Friday, April 24, 2009

Dynamic Facebook Buttons and Links for Blogger Templates - Redux

I've been going through and updating all my code snippets to the latest versions. Today I went ahead and converted all the current Facebook buttons, icons and link codes converted for Blogger template XHTML. To install you have to expand your template's widget code and paste one of the following snippets into or near one of your post-footer or post-header divs.

Icon only:
<!-- icon only -->
<script type='text/javascript'>
function fbs_click() {u='<data:post.url/>';t='<data:post.title/>';window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' onclick='return fbs_click()' target='_blank'>
<img src='http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981' alt=''/></a>

Text only: Share on Facebook
<!--text only -->
<script type='text/javascript'>
function fbs_click() {u='<data:post.url/>';t='<data:post.title/>';window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' onclick='return fbs_click()' target='_blank'>Share on Facebook</a>

Icon and text: Share on Facebook
<!-- icon and text -->
<script type='text/javascript'>
function fbs_click() {u='<data:post.url/>';t='<data:post.title/>';window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top left; }</style>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' class='fb_share_link' onclick='return fbs_click()' target='_blank'>Share on Facebook</a>

Share Button: Share
<!-- share button -->
<script type='text/javascript'>
function fbs_click() {u='<data:post.url/>';t='<data:post.title/>';window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; text-decoration:none; } </style>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' class='fb_share_button' style='text-decoration:none;' onclick='return fbs_click()' target='_blank'>Share</a>