This is not the first set of floating share buttons I’ll be sharing on this blog but I realized there’s a need to update this cove and maybe change the styling a bit to make it look somehow similar to Digg Digg which I presently use. The need for a horizontal set of floating share buttons on your sidebar cannot be over emphasized since it plays a major role in making sure your contents gets shared on major social networkDigg is as good as dead and I’ve decided not to include it in this new set. Buttons included are: Facebook like, Facebook, share, Tweeter, Pinterest, Stumbleupon and Google +1. However, the “pin it” button won’t appear on the homepage, just post pages.
The Facebook share button stopped working on the previous sets of buttons but it’s fixed in this new one: users can like and share.
How to add the new floating share buttons to blogger
- Log in to your Blogger account and go to Template > Edit HTML
- Check the box labelled Expand Widgets Template
- Search for <html, leave a space and add xmlns:fb=”http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:
<html xmlns:fb=”http://ogp.me/ns/fb#”
If this is already there, you don’t need to do it again.
- Search for
<data:post.body/>. If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>- Copy this code:
<b:if cond=’data:blog.pageType == "item"’><!–Start Floating Share Buttons with Pinterest BloggerHelp24–><style type=’text/css’>#dc-float {position:fixed; bottom:15%; right:10px; float:left;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding:0 0 2px 0;z-index:10;}#dc-float .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=’dc-float’ title=’Share with your friends’><div class=’sbutton’ id=’rt’><a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></div><div class=’sbutton’ id=’su’><script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/></div><div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=167544263382192";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/></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=’"http://pinterest.com/pin/create/button/?url=" + 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('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);document.body.appendChild(e);}</script></div><div class=’fb_button_share’><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=112973755438933"; // appId must be validfjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><fb:share-button type="box_count"></fb:share-button></div><br/><!–End Floating Share Buttons with Pinterest BloggerHelp24–></b:if>
- In the line just below that, paste the whole content in the text file.
- Hit the Save Template button and view your blog.
To make the share butons float to the left instead of right, search for this code:
dc-float {position:fixed; bottom:15%; right:10px; float:left;
Replace with this:
dc-float {position:fixed; bottom:15%; left:10px; float:left;
Did you like the way the buttons appear? Got some questions not covered in the post? Please do let me know.