Yesterday (or was that this morning) I posted about adding your own "Tweet This" button to your blog. Today I will explain how you can better control the ShareThis button, and use some Movable Type template tags to do your bidding. This uses the ShareThis API and could easily be used with any CMS, not just Movable Type. Hit the jump for all the scary code.
While you can just copy the code block from your ShareThis account, you can also control the ShareThis widget using the API, as briefly described here. The example on that page is half of what we need. First add this to your global HTML Head template:
<mt:IfArchiveType type="individual">
<script type="text/javascript">
function addJS(path,callback){var d=document;var p=d.getElementsByTagName('HEAD')[0];var c=d.createElement('script');c.type='text/javascript';c.src=path;if(callback!==undefined){c.onload=callback;}p.appendChild(c);}
var inlineJS=[];function callJS(inlineJS){var l=inlineJS.length;for(var i=0; i<l; i++){inlineJS[i]();}}
addJS('http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=PUBLISHER_ID_HERE&headerbg=%23638dc1&inactivebg=%2395b9ed&inactivefg=%23ffffff&linkfg=%23638dc1');
</script>
</mt:IfArchiveType>
Mine is modified from that, you can view the source code of this page to see my changes. You can basically copy all the parameters from the auto-generated code block you get from your account and add them here.
Placing the ShareThis icon on your page can be done using inline CSS and images, or external CSS. I went the quick and dirty rout, but will likely clean it up soon.
<a id="sharethis" rel="nofollow" href="javascript:void(0);" title="Submit <$MTEntryTitle encode_html="0"> to ShareThis"><img src="/path/to/image.gif" border="0"></a><script type="text/javascript">var object = SHARETHIS.addEntry({title: '<$MTEntryTitle encode_html="0">',url: '<$mt:EntryPermalink$>',summary: '<$mt:EntryExcerpt$>'},{button:false});var element = document.getElementById("sharethis");object.attachButton(element);</script>
Place the above code on the page where you want the image to show up. I put this in my Entry Detail template.
<mt:IfArchiveType type="individual">
<script type="text/javascript">
function addJS(path,callback){var d=document;var p=d.getElementsByTagName('HEAD')[0];var c=d.createElement('script');c.type='text/javascript';c.src=path;if(callback!==undefined){c.onload=callback;}p.appendChild(c);}
var inlineJS=[];function callJS(inlineJS){var l=inlineJS.length;for(var i=0; i<l; i++){inlineJS[i]();}}
addJS('http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=PUBLISHER_ID_HERE&headerbg=%23638dc1&inactivebg=%2395b9ed&inactivefg=%23ffffff&linkfg=%23638dc1');
</script>
</mt:IfArchiveType>
Mine is modified from that, you can view the source code of this page to see my changes. You can basically copy all the parameters from the auto-generated code block you get from your account and add them here.
Placing the ShareThis icon on your page can be done using inline CSS and images, or external CSS. I went the quick and dirty rout, but will likely clean it up soon.
<a id="sharethis" rel="nofollow" href="javascript:void(0);" title="Submit <$MTEntryTitle encode_html="0"> to ShareThis"><img src="/path/to/image.gif" border="0"></a><script type="text/javascript">var object = SHARETHIS.addEntry({title: '<$MTEntryTitle encode_html="0">',url: '<$mt:EntryPermalink$>',summary: '<$mt:EntryExcerpt$>'},{button:false});var element = document.getElementById("sharethis");object.attachButton(element);</script>
Place the above code on the page where you want the image to show up. I put this in my Entry Detail template.
Leave a comment