Friday, June 15, 2012

Adding floating buttons (Facebook, Reddit, Pinterest, Twitter, GPlus) to Blogger

Sometimes, the Blogger provided buttons just don’t work. Here, rather than bother with that, we’ll just make buttons float to the right (though they can also float on the left.
BlogIdol Floating ButtonsHere’s the Blogger code, see if you can get it to work:
<div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div>
If you want to be able to control whether it appears or not from the interface, use the conditional:
<b:if cond='data:post.sharePostUrl'></b:if>

If your buttons work, you might want to control it with the “email this post” checkbox:

<b:if cond='data:post.emailPostUrl'></b:if>

Should you ever need to use “email this”, you can actually create a link directly:

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg' rel='nofollow' target='_blank'>Email This!</a>

This allows you to reserve the Email link conditional (easily reachable from the GUI, without messing with template codes) to turn on and off this bar. If the above doesn’t work for you, we will soon have the following simple button working for you [not yet, though]:

If you would rather mess with the code yourself, add this right after the first <data:post.body/> or <div class='post-footer-line-1'/>:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Start Floating Share Buttons with Reddit and Pinterest>
<style type='text/css'>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
<div id='pageshare' title='Share with your friends'>
<div class='sbutton' id='fb'>
<a href='' name='fb_share' type='box_count'>Share</a><script src='' type='text/javascript'/>
<div class='sbutton' id='rt'>
<script src='' type='text/javascript'/>
<div class='sbutton' id='gplusone'>
<script src='' type='text/javascript'/>
<g:plusone size='tall'/>
<div class='sbutton' id='gb'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;src&#39;,&#39;; + Math.random()*99999999);
<div class='sbutton' id='su'>
<script src=''/>
<div class='sbutton' id='reddit'>
<script type='text/javascript'>reddit_newwindow='1'</script>
<script type='text/javascript'>reddit_target='blog'</script>
<script language='javascript' src=''></script>
<div style='clear: both;font-size: 8px;text-align:center;'><a href=' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div><!-- Do not remove this link -->
<!--End Floating Share Buttons with Reddit and Pinterest>


The original included the following Digg code which I considered irrelevant, so I removed it:

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='' type='text/javascript'/>
<a class='DiggThisButton DiggMedium'/>

To make it appear on the left, find

#pageshare {position:fixed; bottom:15%; right:10px;

and change it to

#pageshare {position:fixed; bottom:15%; left:10px;

All in all, an easier and more effective way to add social media sharing buttons than the default Blogger buttons.

Source: dc, mbt, jq-spyb,

No comments:

Post a Comment

Thank you for commenting and rest assured that any and all comments are welcome, whether positive or negative, constructive or distructive. Unfortunately, if you comment in this view I might not know about - please use the regular (Desktop) view.
I am using Disqus for commenting, but Blogger is not showing it so your comments may end up not being displayed - tell Google about it!