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 networks.
Digg 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:
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'/>
- Download this text file
- 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:
Replace with this:
You can check the demo here. You should note that these buttons only appear on post pages. Did you like the way the buttons appear? Got some questions not covered in the post? Please do let me know.
Twitter: mavtrevor
says:
Social Sidebars are great ways of letting your visitors share your blog posts to their favorite social media networks and thus generate traffic to your blog.
Twitter: Techopera
says:
Really beautiful stylish Button for blogger Blogs, pls can you code a similiar Plugin for wordpress users?
Thanks alot.
Techopera.com
Twitter: divyanshojha
says:
really like the idea of adding multiple social share buttons on a blog, specially adding appealing things to blogger is tough, and this really solves the problem
Divyansh recently posted..4 Effective Tricks to Earn Money from Blogging
Yes, it’s rather tough doing these on blogger but you can achieve even a better result on WordPress by installing a plugin and clicking a couple of buttons.
Twitter: edi4all
says:
I kinda prefer the look of the first One you posted, just that the Facebook Share button doesn’t work on it anymore, if only I can extract the new fb share xml script from this new one
just to fix it
Of course you can check the code and find a way to include the facebook share button to the old one. You may just need to copy and paste the required part.
Twitter: softvie_com
says:
Please i’ll like you to share how to apply social media buttons with counter to all blogger posts. Thanks.
Victor recently posted..Get An Approved Google Adsense Account Using Docstoc
Twitter: kulhead
says:
i tried it several times, it does not work on MY blog though! any assistance??
I think it’s already working on your blog. Checked just now.
Yes, nice one it really working on my blog thanks a lot
Twitter: thescript102
says:
very nice article i already installed the floating social buttons on blogger but i have a problem when i hit like the a text float on the right and hide and i can’t see it how can i make it float on the left?
anis recently posted..24 ways to boost your BlogTraffic
Twitter: dailyschoolnews
says:
very nice article i already installed it on my blog, it is really beautiful.
dailyschoolnews recently posted..JAMB UTME 2013 Registration For 2013/2014 Guidelines And Procedures | Jamb 2013 Direct Entry
Hello! Thanks a lot for this post, you have helped me a lot!
However, I have a question. As you can see in my blog: http://discutindocinema.blogspot.com the buttons aren’t centered, giving the floating menu a kind of a “ugly visual”.
Can you help me centering all the buttons? Thanks in advance!
Already did it. Thanks!
Twitter: Junpitz
says:
Thank you so much. It did work for me. Instructions are very clear even to people like me who do no have knowledge in html. The only problem now in my blog is that I put a LIKE button ( which I do not like anymore) on the top of my posts before and now I do not know how to remove it. Anyway, thank you again for your post, I really like it.
http://weightlosseffectively.blogspot.com/
You can remove that button by simply removing the code you added in the first place.
Twitter: Junpitz
says:
That was my problem, I don’t know what and where that code was. Now, my blog is working fine because I reverted my template to the original and I applied your other sharing button (not this floating one but the one that can be placed on the top and the bottom of the blog post ). So, thank you again for helping newbie bloggers like me.
Twitter: dailyschoolnews
says:
Thanks alot for this wonderful article, i’ve successfully added them to my blog.
Is there any wordpress plugin to use and add this floating share buttons to my website?
@ dailyschoolnews
Post UTME/JAMB 2013 recently posted..10 Must Have WordPress SEO Plugins
Sure, you may check out Digg Digg.
Hi don, I was wondering how we can change the picture that appears on the preview shown in facebook when someone likes our articles, thanks!
It’s possible, Jessie. You only have to specify an open graph meta tag for the image to be shown in your site’s head section.
Twitter: moneyhomeblogg
says:
DC, how can we specify an open graph meta tag?
don’t you think you should create it as an article yourself?
Thanks DC.
make money online recently posted..How To Make Money Online Writing Articles