😍 Loving this theme? Download

Please enter at least 3 characters.

Add Social Media Share Buttons to Blogger Posts

Add Horizontal Social Media Share Buttons Below the Post Title or Footer of Post in Blogger with Stylish and eye catchy buttons. Fb, Twitter, G+, StumbleUpon
Add Social Media Share Buttons to Blogger Posts
social media icons for blogger
Beautiful and simple Social media share buttons help us to get our well-written content shared on different social media platforms easily. When a piece of content get shared more and more times on different social media platforms, it helps our content to get more links, free traffic and social signals which increase the value of our content in search engines and ultimately it ranks well too.

Today I am going to share a horizontal social media share buttons bar I designed for blogger and currently using it below the post title. However, you can use it in the post footer too if you do not like it appearing below the post title.

I have added a little twist to the default social share buttons and used different colors in the background of each button which makes these buttons colorful, pretty and eye catchy compared to default boring design. :) So I hope you like the design and your visitors would love to click on them to get you more shares, likes, and tweets.

Recommended:-  Add Custom Social Media Share Buttons to Blogger Posts Below Title or in Post Footer Fully responsive along with total shares count.

I have used four different social media share buttons which are as follow:
-Google Plus
-Stumble Upon

Note: New version available  - Super Light Weight Social Sharing buttons 

I have used only four buttons because the space is limited, but you can add more if you like or remove the one you do not want and add yours. All you need to have is fair knowledge of HTML and CSS. You can grab the code of any social media share button from the respected social media platform's website.

You can see the live demo of this social media share buttons bar in my blog itself and if you liked it, let us begin the installation process.

Add Social Media Share Buttons To Blogger

Adding Social Media Share Buttons to Blogger - Below the Post Title

Step 1) Go to BloggerTemplate → Edit HTML

Step 2) Click inside the Template code box  → Press Ctrl+A and copy your template code to a notepad file and have a Backup of it in case you did something wrong, you can revert it back to original.

Step 3) Ok, so now you have the backup so again click inside the template code box, Press Ctrl+F or Cmd+F (for mac) and find out this closing tag </head>

Step 4) Now just before it, paste the whole CSS code given below .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*----Social Share Buttons Bar Coded By TwistBlogg.com----*/
#twistBloggerSocialbar {
  float: left;
  width: 100%;
  padding-bottom: 7px;
  margin-top: 15px;
  padding: 5px 0px 5px 0px;
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #F2F2F2;
  margin-bottom: 15px;
  height: 28px;
  background: #FFF9F9;
  position: relative;
  z-index: 9999;
  overflow: hidden!Important;
.shareBox {
  float: left;
  padding: 0px;
  margin-right: 10px;
  height: 20px;
.titleBox {
  background: #5F5F5F;
  border: 1px solid #000000;
  height: 100%;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-right: 5px;
  font-size: 15px;
  font-family: sans-serif;
  line-height: 1.4em;
  font-weight: bold;
  color: #EFF9FD;
  border-radius: 0px 2px 2px 0px;
.titleBox:before, .titleBox:after {
  left: 74px;
  top: 50%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
.titleBox:before {
  border-color: rgba(245,0,0,0);
  border-left-color: #000000;
  border-width: 6px;
  margin-top: -5px;
.titleBox:after {
  border-color: rgba(245,0,0,0);
  border-left-color: #5F5F5F;
  border-width: 5px;
  margin-top: -4px;
.twitterBox {
  width: 77px;
  background: #00A8E8;
  height: 100%;
  padding: 4px 10px;
  border: 0;
.googlePlusBox {
  width: 57px;
  background: #E06352;
  height: 100%;
  padding: 4px 10px;
  border: 0;
.stumblupon {
  width: 75px;
  background: #5F5F5F;
  height: 100%;
  padding: 5px 10px 3px 10px;
  border: 0;
<script type='text/javascript'>
//Stumble Upon Script
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
// Twitter Script
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

Did you complete the above steps? Let's move on to next step which is adding HTML part of social media share buttons below the post title.

Step 5) Now Search for this code line <div class='post-header-line-1'/>  and paste the HTML code just below it.

Note: You may find this code line appearing more than once (usually twice) so you have to paste the HTML code after its second appearance in your template code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='twistBloggerSocialbar'>
<div class='shareBox'><div class='titleBox'>SHARE</div></div>
  <div class='shareBox'> <div class='twitterBox'><a class='twitter-share-button' expr:data-text='data:post.title' data-via='TwistBlogg' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div></div>
<div class='shareBox'>
   <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' style='background: #4965B4; width:80px; height: 100%; padding: 4px 10px; border: 0;'/>
<div class='shareBox'>
   <div class='googlePlusBox'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
 <div class='shareBox'>
   <div class='stumblupon'>
<su:badge expr:location='data:post.url' layout='1'/>

Important: Change the highlighted text TwistBlogg with your Twitter username. It will be added to your tweets in the end and you'll be able to trace your tweets easily about who shared them.

Ok so now we are done with it. Save your template code and visit any 1 of your blog posts to see the cute social media share buttons appearing just below the post title. :)

So did it work for you? It should work if you haven't skipped any one of the steps I mentioned above. I am always free to help you BDW :) so you can ask me in the comment box if you need my help.

Making Social Media Share Buttons Responsive - Optional

So you want to make these social media share buttons screen responsive? Well, it depends on your template code and your @media screen queries you have used in your template code (in case you're using a responsive template) so I can not make these buttons responsive according to my template code but I can give you an example so that you can work around to make them responsive according to your template.

I have made these buttons responsive for my blog and this code may not work for you perfectly the way you want, but It will give you a head start to make them work for you. Below is the responsive code I have made for my template where I disabled StumbleUpon Button, Share Title Text and Decreased the margin and padding of buttons accordingly.

@media only screen and (max-width: 979px) and (min-width: 768px) {  .shareBox {
    margin-right: 1px; }   /*---- Decreased the margin to 1px from 10px  ----*/
@media only screen and (max-width: 767px) and (min-width: 480px) { .titleBox {
display: none; /*---- Disabled The Share Text From Displaying ----*/
  .shareBox {
    margin-right: 8px; /*---- Decreased the margin to 8px from 10px   ----*/
@media only screen and (max-width: 479px) {  .titleBox {
    display: none;   /*---- Disabled The Share Text From Displaying ----*/
  .shareBox {
    margin-right: 1px; /*---- Decreased the margin to 1px from 10px  ----*/
  .stumblupon {
    display: none;   /*---- Disabled Stumble Upon Button ----*/
  .twitterBox {
    padding: 4px 8px;  /*---- Decreased the padding  ----*/
  .googlePlusBox {
    padding: 4px 5px; /*---- Decreased the padding  ----*/

Note: You have to add the responsive CSS code with the CSS code given above.

Did you get it? Have some questions? Feel free to ask for help and I'll do my job. I hope you liked these social media share buttons for blogger and added successfully to your blogger blog.

Recommended:- Add Floating Social Media Share Buttons Bar to Blogger

Did you like this post? Please do share and show me that you care. :) Stay blessed, peace upon all.

Share this post

Explore more articles by Satbir


Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. This cool! Thanks a lot
  2. I cant search this code
  3. nice info bro, i will try this
  4. Thank you so much.
  5. This great and l like the button appearance
  6. This is still not working for me... CAN SOMEONE PLEASE HELP? I'm beyond frustrated.
  7. As far as I know, I did everything as outlined and the buttons don't show. :( Can you advise me? http://mlisrobinson.blogspot.com.
  8. I was looking for something like this and I am very glad to see such amazing information here. I'll be looking forward to your suggestions..social share
  9. i can use it for my blog pls help me sir modernpromotingnews.blogspot.com.ng
  10. pls i dont know were to paste the whole of that i highligted
  11. I have tried many time in my website www.achieversrule.com but its not functioning. Useless
  12. Thank you for the tutorial. I've been looking for this to put on my blog.
  13. nice! post
  14. Great blog
  15. Impressive widget ! thanks Satbir
  16. Your blog is the best.
  17. can i share this code?
    1. Farras :: Hi,
      Sorry but this is not allowed. It will create problems for both of us.
      I hope you understand.
    2. ok thanks you
  18. The social media buttons worked but do all display because there is a "nextblog>>" text in the way. Maybe the layout can be changed to kick out this annoying text...
  19. The Social Media buttons not showing still . Is there any issues recently with blogger ??
  20. I Love This Article, Such a Fabulous Way to Explain This Post. I'm Using this sharing icons but i'm newbie in Php please provide a demo or video make for us thank you SweetLyrics.in
  21. so cool. thanks very nice description
  22. I can't make responsive for my blog, can you help me?
    My blog: newkhanh98.blogspot.com
    1. Hello Buddy:: Soon I am going to release another version of these social media share buttons with share count box for blogger and they will be fully responsive. Please till then wait.
  23. But the blogger is showing error on "version=v2.3" in blogger template.
    "Error parsing XML, line 3234, column 64: The reference to entity "version" must end with the ';' delimiter."
    1. Faisal Shehzad:: Hello Buddy.
      I am sorry for the inconvenience but now I have updated the code and it should work fine for everyone. Please let me know if the problem still persists.

      Thanks for your feedback, much appreciated.
  24. KABIE :: Thanks for your kind words :) and yes, blogger lacks the plugins compared to WordPress where plugins do the all magic with a few clicks.
  25. In as much as I will always pick blogger.com over wordpress.com, one thing which wordpress has that blogger seem to be lacking is the addition of plugins.

    But all in all, I do believe this is one post most blogger platform users will be grateful for.
Post a Comment