Custom share menus are easy to make by putting together some simple jQuery click handling and pre-written Facebook and Twitter share bookmarklets. I recently needed to build my own “social sharing” menu (like addThis) on a jQuery-enabled site. Here is the code:

HTML:

Email to friend
Share on Twitter
Share on Facebook

JAVASCRIPT:

$('.social li.twitter a').click(function(event) {
 (function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());
 event.preventDefault();
});

$('.social li.facebook a').click(function(event) {
 var d=document,f='https://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1297114121&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0);
 event.preventDefault();
});

Of course, there are simpler solutions to this, but this is pretty handy and reusable. You can easily swap out the elements for something more semantic if you are crazy over that sort of thing. Hope it helps someone!

Tags: facebook, javascript, jquery, share, twitter

This entry was posted on Monday, February 7th, 2011 at 3:43 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.