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.

Here’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]:

<div id="flbuttons" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="flbuttons_image"></div> <div id="flbuttons_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof biro_onload_queue=='undefined')var biro_onload_queue=[];if(typeof biro_dom_loaded=='boolean')biro_dom_loaded=false;else var biro_dom_loaded=false;if(typeof biro_async_loader!='function'){function biro_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(biro_dom_loaded){newcallback()}else biro_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof biro_domLoaded!='function')function biro_domLoaded(callback){biro_dom_loaded=true;var len=biro_onload_queue.length;for(var i=0;i<len;i++){biro_onload_queue[i]()}}biro_domLoaded();biro_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://wp2blogger-services.googlecode.com/files/bp-out-slide.min.js",function(){},"vlbuttons")},"jQueryjs")} </script> <a href="http://3w.blogidol.ro/2012/06/floating-buttons.html?utm_source=blog&utm_medium=gadget&utm_campaign=floating_buttons" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWXyo_pMXCBFrQnM6bFHkTO7L8vBexQOt7ku6kne47fbbE9knrwHDI8gpMw59Jvb_G5sq1pBq9MM4m0CyjPHpC6ShlvX26VUZBuqeDlZacvf16_3d9waOXAiQuJCdKXguf2rgtnjgyAs3/s288/BlogIdolRoWM.png" alt="Floating Buttons For Blogger" /></a>

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 BlogIdol.ro-->
<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;}
</style>
<div id='pageshare' title='Share with your friends'>
<div class='sbutton' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='sbutton' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton' id='gplusone'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/>
</div>
<div class='sbutton' id='gb'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&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='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</div>
<div class='sbutton' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='sbutton' id='reddit'>

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script type='text/javascript'>reddit_newwindow='1'</script>
<script type='text/javascript'>reddit_target='blog'</script>

<script language='javascript' src='http://reddit.com/static/button/button2.js'></script>

</div>
<br/>
<div style='clear: both;font-size: 8px;text-align:center;'><a href=http://3w.blogidol.ro/2012/06/floating-buttons.html?utm_source=blog&utm_medium=gadget&utm_campaign=floating_buttons' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div><!-- Do not remove this link -->
</div>
<!--End Floating Share Buttons with Reddit and Pinterest BlogIdol.ro-->

</b:if>

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='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThisButton DiggMedium'/>
</div>

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,

BlogIdol, social media, sharing, share, buttons, twitter, facebook, reddit, digg, plus, widget (Tags)