Chemistry Widget Notes

Social sharing chemistry for StackExchange type sites

The following code added into one of the ‘HTML Customization’ boxes (recommendation: Footer) for a StackExchange setup will display social sharing widgets.  Note, I would recommend changing the images currently linked in the code to something customized for your site.  This is derived from a meta.stackoverflow answer from EpicAdvice.

<script type="text/javascript">
(function() {
	try{ 
        var share = {"html":
        '<div class="chem_share" style="text-align:left;"><table border="0" cellpadding="0" cellspacing="1">\
        <tr><td colspan="16" style="padding:0;"><h4 style="margin-bottom:2px;">Chemistry Question? Share it with others!</h4></td></tr>\
        <tr>\
        <td align="center" style="padding:2px 3px 0 0;"><a target="_blank" href="http://chemistry.reddit.com/submit?url=%%URL%%&amp;title=%%TITLE%%" title="Click to share this page on Reddit"><img src="http://thumbs.reddit.com/t5_2qhf9.png"></a></td>\
        <td align="center" style="padding:2px 3px 0 0;"><a target="_blank" href="http://twitter.com/home?status=%%TITLE%% (%%URL%%) #chemistry" title="Click to share this page on Twitter"><img src="http://a2.twimg.com/a/1268259414/images/frontpage-bird.png"></a></td>\
        <td width="1"></td>\
        </tr></table></div>'}; 
        share.html = share.html.replace(/%%URL%%/g, location.href);
        share.html = share.html.replace(/%%TITLE%%/g, document.title);
        $(function() {
            $("#question .post-taglist").append("<div style='float:right;'>"+share.html+"</div>");
        });
	}catch(e){};
})();
</script>

Note especially lines: 6,8,9. These are the ones you will probably want to customize. You can see this in action here:

http://00verpa00.stackexchange.com/questions/1/stuff-and-junk-and-what-i-think

(if it hasn’t expired. If it has, feel free to drop me a note)