Check out our new version of floating social media share buttons. Click this: Floating share buttons with Google +1
Wondering how to add floating social media (Facebook, Twitter, StumbleUpon, Digg, LinkedIn) share button on your Blogger or BlogSpot blog?
You see social media share buttons on most websites today. It is very popular because webmasters and bloggers get more traffic with it. Share buttons like “Facebook Share, “Facebook Like”, “Twitter Tweet”, “StumbleUpon Submit”, “Digg This”, and “LinkedIn Share”, boost traffic back to your website. It makes it easier for visitors and readers to share your content to their friends and connections.
Adding a floating share buttons on your blog is very easy. You just need to edit a part of your Blogger template. We have provided eight different colors for you to choose from. This gives you an option to install the floating share button that is related to the color of your Blogger template.
On this tutorial, we have gathered five most used share buttons: Facebook Like, Twitter Tweet, StumbleUpon Submit, Digg This, and LinkedIn Share. They are all in “vertical count” format and will show up on the left side of your blog.
2. Click Design.
3. Click Page Elements.
4. Click Add a Gadget on the sidebar or any Add a Gadget you see on your page elements.
5. A new window will show up. Scroll down and look for HTML/JavaScript in the selection.
6. Click on the button with a plus (+) sign next to HTML/JavaScript.
What "Floating Share Buttons" color do you wish to use for your Blogger or BlogSpot blog? Proceed to step 7 once you're done choosing a color.
7. Click on your preferred color below to get the code:
8. Copy the code for the color you like.
9. Go back to the HTML/JavaScript window.
10. Paste the code on the box below Content.
11. Leave the box under Title empty.
12. Click the Save button.
Now, view your blog. You should see the floating social media share buttons on the left side of your blog page. So, that's all there is to install share buttons on your Blogger blog. Leave a comment below if you have questions or feedback regarding this tutorial.
Let us know what you think about this floating social media share buttons tutorial by adding a comment below. We'd love to hear from you.
Subscribe to our e-mail newsletter and be the first to know when we publish new posts. Get it now!
Wondering how to add floating social media (Facebook, Twitter, StumbleUpon, Digg, LinkedIn) share button on your Blogger or BlogSpot blog?
You see social media share buttons on most websites today. It is very popular because webmasters and bloggers get more traffic with it. Share buttons like “Facebook Share, “Facebook Like”, “Twitter Tweet”, “StumbleUpon Submit”, “Digg This”, and “LinkedIn Share”, boost traffic back to your website. It makes it easier for visitors and readers to share your content to their friends and connections.
Adding a floating share buttons on your blog is very easy. You just need to edit a part of your Blogger template. We have provided eight different colors for you to choose from. This gives you an option to install the floating share button that is related to the color of your Blogger template.
On this tutorial, we have gathered five most used share buttons: Facebook Like, Twitter Tweet, StumbleUpon Submit, Digg This, and LinkedIn Share. They are all in “vertical count” format and will show up on the left side of your blog.
How to add floating Facebook Like, Twitter Tweet, StumbleUpon Submit, Digg This, and LinkedIn Share buttons to the left side of Blogger or BlogSpot blog?
1. Go ahead and log in to your Blogger account.2. Click Design.
3. Click Page Elements.
4. Click Add a Gadget on the sidebar or any Add a Gadget you see on your page elements.
5. A new window will show up. Scroll down and look for HTML/JavaScript in the selection.
6. Click on the button with a plus (+) sign next to HTML/JavaScript.
What "Floating Share Buttons" color do you wish to use for your Blogger or BlogSpot blog? Proceed to step 7 once you're done choosing a color.
7. Click on your preferred color below to get the code:
8. Copy the code for the color you like.
9. Go back to the HTML/JavaScript window.
10. Paste the code on the box below Content.
11. Leave the box under Title empty.
12. Click the Save button.
Now, view your blog. You should see the floating social media share buttons on the left side of your blog page. So, that's all there is to install share buttons on your Blogger blog. Leave a comment below if you have questions or feedback regarding this tutorial.
Code for Silver theme
Highlight and copy the code below then proceed to step 8.Code for Red theme
Highlight and copy the code below then proceed to step 8.Code for Blue theme
Highlight and copy the code below then proceed to step 8.Code for Black theme
Highlight and copy the code below then proceed to step 8.Code for Green theme
Highlight and copy the code below then proceed to step 8.Code for Orange theme
Highlight and copy the code below then proceed to step 8.Code for Yellow theme
Highlight and copy the code below then proceed to step 8.Code for White theme
Highlight and copy the code below then proceed to step 8.Let us know what you think about this floating social media share buttons tutorial by adding a comment below. We'd love to hear from you.
Subscribe to our e-mail newsletter and be the first to know when we publish new posts. Get it now!



This is essential plugin for blog.. thanx for sharing..
ReplyDeleteYou're welcome, Lucky!
ReplyDeleteHi,
ReplyDeleteThanks for sharing it. would it possible to add this floating social bar on plain html site?.
Yes! The codes for "floating social media buttons" that we provided should also work on HTML based sites. :)
ReplyDeleteVery thorough job .... I need to incorporate my FB Share button to this and I am all set. Thank you.
ReplyDeletehi,
ReplyDeletehow to fix Floating Social Media Share Buttons and add beside google adsense after post title in blogger posts?
thanks
@Ramin: can you provide the URL of your site you want to customize?
ReplyDeleteThis is awesome. Thank you so much!
ReplyDelete@Brent: You're welcome!
ReplyDeleteVery nice. Thanks!
ReplyDeleteYour blog post is very informative and interesting for folks just like me who needs an insightful and edifying information. I am hoping that you always have the spare time to continue with your valuable endeavors.
ReplyDeleteVery nice. But is there a way to leave the counters out? When you're just starting, all those zeros are embarrassing!
ReplyDeleteAlso do you have the code for Google +1 in this format so that I could add that?
Thanks so much. This is the nicest looking floating share bar I've found. I like that it floats way off to the left so that it doens't interfere with anything else.
@Eileen: the only way to get rid of the zeroes is to use the buttons without counters.
ReplyDeleteBy the way, since you asked for Google +1, we will create an updated version of this post. Don't forget to subscribe to our blog so we can notify you when our new floating share buttons are available. =)
How do you use the buttons "without counters" as you said?
ReplyDeleteyes! plz include Google +1
ReplyDeleteGoogle +1 button is now included on the new floating share buttons version. Check it out: floating share buttons
ReplyDeleteAny trick how to reposition the Floating buttons ? i just wanna put somewhere near the center.
ReplyDeleteThanks for posting the share button.
ReplyDeleteEverything works only I have had complaints that when people click on the "Like" Button the image logo that appears in their facebook page is Linkin. Is there any way to change that?
can you provide the URL of your site?
ReplyDeleteAdd this code just below your template's <head> tag. Change URL to the url of the photo that you wish to appear when people like your site.
ReplyDelete<meta content='URL' property='og:image'/>
I try it but nothing change. I went to my template and placed it underneath my head tag yet the Linkedin logo still remains after the like. Any other suggestions?
ReplyDeleteRemove both [IMG] and [/IMG] from the url of your photo.
ReplyDeleteI tried that and nothing change.
ReplyDeleteIt's working! Try to "like" your site, confirm it, then check out your Facebook profile which you used to "like", it will display your photo now.
ReplyDeleteOh ok I just tried it and it work. Thanks so much and keep posting updates. I love following you. Keep up the great work.
ReplyDeleteYou're welcome!
ReplyDeleteI used a FB floating plug-in before and click it to share my blog but it turned out that it only shows the homepage of my site. Now my question is can we use this plug-in for individual post?
ReplyDeleteYes!
ReplyDeletethank you very much,it works nicely!!
ReplyDeletethanks it's cool
ReplyDelete