How to Add Social Media Buttons to Blogger Posts

You want your blog visitors to share your great content with their friends, right? So make it easy for them by adding social media buttons to each of your Blogger posts! They can share your posts on Facebook, Twitter, Google+ and Pinterest without leaving your blog.  Don’t worry – you don’t need to do this every time you write a blog post. Simply edit your Blogger template and they’ll appear on all your blog posts.
HOW TO ADD SOCIAL MEDIA BUTTONS TO THE TOP OF YOUR BLOGGER POSTS
add social media buttons to blogger posts
  1. In your Blogger Dashboard click on “Template” in the left menu. (If you’re using the old interface, you will need to click “Design” instead.)
  2. Click the “Edit HTML” button. In the window that appears, click the “Proceed” button.
  3. In the window that appears, check the “Expand Widget Templates” checkbox at the top.
  4. In the HTML code, find the first instance of this line of code: 
    <data:post.body/> 
    (Note: This line of code appears multiple times throughout your template. The number of times this appears varies depending on your template. Lately most of the templates I’ve worked on required that I find the SECOND instance of it.)
  5. Paste the HTML/CSS/Javascript Code ABOVE that line of code.
  6. Click the “Save Template” button.
  7. Click the “Close” button.
HTML/CSS/Javascript Code

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<script>(function(d, s, id) {
<div id='fb-root'/>
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
js = d.createElement(s); js.id = id;
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
fjs.parentNode.insertBefore(js, fjs); </script> <!-- Google +1 -->
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
<script type='text/javascript'> (function() {
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
po.src = &#39;https://apis.google.com/js/plusone.js&#39;; })(); </script> <!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if> <!-- Scripts End --> <!-- Horizontal social buttons Start --> <div class='horizontal-social-buttons' style='padding:10px 0 10px;'> <!-- Twitter --> <div style='float:left;'>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:left;'> <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div> <!-- Facebook Like+Send -->
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> <!-- Pinterest Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'> <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span> </div>
<!-- Horizontal social buttons End -->
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script> <style type='text/css'> #pin-wrapper > a {background-image:none !important;} </style> </b:if> <!-- Pinterest End --> </div>
<div style='clear: both;'/>
VARIATION #1: MOVING THE SOCIAL MEDIA BUTTONS TO THE BOTTOM OF YOUR BLOGGER POSTS
If you prefer that your social media sharing buttons are at the BOTTOM of your posts, follow the instructions above – but instead of placing your code above the <data:post.body/> line, place the code BELOW it.
VARIATION #2: ADDING THE PIN IT BUTTON TO THE POSTS ON YOUR HOME PAGE
You may notice that all four buttons (Twitter, Facebook, Google+ and Pinterest) appear on your blog post pages; but the Pin It button is missing from the posts on your home page. That’s because if someone were to pin one of your images from your home page, the link would go back to your blog’s home page (instead of to that blog post). This isn’t very helpful to someone clicking on your image on Pinterest – because it would take them to your home page instead of to the blog post where that image is. That being said – if you do prefer to have the Pinterest icon/link appear on your home page too:
Delete this line of code (line 40):
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
and delete this line of code (line 55):
[/b:if>]
VARIATION #3: REMOVING THE FACEBOOK SEND BUTTON
social media blogger post
If you just want the Facebook Like button to appear (and not the Facebook Send button) find this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
and change it to this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’false’ show_faces=’false’/>  
VARIATION #4: ADDING THE STUMBLEUPON BUTTON
social media blogger stumbleupon
Find this line of code:
<div class=’horizontal-social-buttons’ style=’padding:10px 0 10px;’>
and add these lines of code below it:
<!– StumbleUpon –>  <div style=’float:left; margin-right:30px;’>  <script src=’http://www.stumbleupon.com/hostedbadge.php?s=1’/>  </div>

VARIATION #5: REMOVING THE GOOGLE+  BUTTON

social media buttons blogger
Delete the following lines of code:
<!– Google +1 –>  <script type=’text/javascript’>  (function() {  var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;;  var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);  })();  </script>
and delete these lines of code:
<!– Google +1 –>  <div style=’float:left;’>  <g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>  </div>

8 comments

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

Here's a link to our share buttons: https://shareaholic.com/pub...
You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.


Powered by Blog Tips by KP