Sunday, September 9, 2012

Add Social Networking Buttons in Blog Sidebar

In my previous post, I discussed how to add a floating social media button in a blog. In this post, I will discuss how to add a static social media share buttons on your sidebar  directly from the blogger or using codes.
 
To Add Social Networking Buttons Directly From Blogger
 
  • Go go the Dashboard
  • Layout
  • Blog Post - Click on Edit
  • On Configure Blog Posts
  • Scroll down the page
  • Click on small box next to Show Share Button

 
  • Click on Save.
 
You are done. Social network buttons will be displayed below each post.
 
Adding Social Networking Buttons Using Codes on Sidebar
 
  • Go to Layout
  • Add a gadget
  • Select HTML/Java Script
  • On Configure Script pop up window
  • Copy and paste the following code
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="
http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fdb16d133fdf909"></script>
<!-- AddThis Button END
-->
 
The social networking button from the above code will look like this;
 
  
If you want to show the total number of people who have shared/liked your posts. Use the following code; 
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-504b3a8a674bf05b"></script>
<!-- AddThis Button END -->
 
The social networking from the above code will look like this;
 
 
 
  
Click on Save and view your blog.  Make sure you have positioned your gadget  on the right place where you want your social networking buttons to be displayed.  

Related Posts
Add Social Share Buttons Below Post Titles
Add Media Share Buttons at the End of Posts
  

4 comments:

  1. Cool post. I'm definitely going to try and place social media buttons in my articles. Thanks !

    ReplyDelete
    Replies
    1. Thank you and thanks for visiting my blog.

      Delete
  2. Thanks for this! I was trying to solve all day why the buttons from AddThis didn't show up on my sidebar. I actually used AddThis' own website for the widget. And the one on your blog was the one that actually worked. Thanks!

    ReplyDelete