Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

January 10, 2013

How to Add Social Share Buttons Above and Below your Posts
















I get asked often about the share buttons I have above and below my posts. They are really simple to add in Blogger. Follow this step-by-step tutorial and you can have them up and sharing your posts in no time.

There is a way to automatically install the share buttons on Blogger but this will only install them below each post. This tutorial will show you how to add the HTML code to your template so they will appear above and below each post. So we will be editing your blogs HTML. The first thing you should do anytime you are about to edit your HTML is Backup your Blogger Template.


How to Add Social Share Buttons Above and Below your Post



First, check out Add This and Share This. Decide which one you want to add to your blog. They both do the same thing but are a little different in style.


Add This options:

















Share This options:









How to add Add This Sharing Buttons to Blogger


1. Go to www.addthis.com and click on Get the Code at the top






2. On this page choose the option "A Website" and whatever share button style you want to appear on your blog.























3. Open a Text Editor on your computer like Microsoft Notepad. Then go back to Add This and copy the HTML code that appears on the right side of the screen and paste it into the Notepad. 























4. The default buttons that appear on Add This are Facebook, Twitter, Email, Pinterest and the Add This button and counter. You can edit these by going to this page: Third Party Buttons and grabbing whatever code you want and add it to the code that you have copied on the notepad. For example, this is the way the code appears by default:

<!-- 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="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5018656f0f3a1a32"></script>
<!-- AddThis Button END -->

To add Google Plus grab the code from the Third Party Button page and add it. It should appear like this.


<!-- 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_google_plusone" ></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="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5018656f0f3a1a32"></script>
<!-- AddThis Button END -->

You may need to edit the Google Plus Code that you grabbed but in the end it should look exactly like the other codes. If you want to remove the Pinterest or Add This counter, start deleting at the <a class...... and end at the </a> on that line.

So once you have the code editing and ready to go into your Blogger Template...

5. Go to your Template in your Blogger Dashboard and click on Edit Template, highlight the radio button next to Expand Widget Templates and click on CTRL + F to populate the search or find box. Type in the search/find box:

<div class='post-header-line-1'/>


After you have found that line of code, make sure you locate the </div> directly after it. You will now paste your Add This code AFTER the </div> code.





6. Now find this piece of code:

<div class='post-footer'>

Paste the Add This code directly after the closing  </div> code.























7. Click Preview on the HTML Editor and make sure your template loads correctly and the buttons are appearing how you want them to. If everything is okay, click Save Template and Close.

8. Go to your Blog and see how it looks.


















How to add Share This Sharing Buttons to Blogger

This one is a little bit more complicated but I prefer these over Add This.


1. Go to www.sharethis.com and click on Get Sharing Tools.






2. There are 3 Steps to get your code for the Share This Buttons.

In step 1, you will choose the Website option and click Next




















In step 2, choose your button style and click Next























In step 3, you customize what buttons and in what order you want them to appear. At the top you will see a Preview of your buttons. Under Selected Services you will see the buttons that are going to appear. There is a default list that appears. You can remove the ones you don't want by hovering your mouse over the Service Name. A "X" will appear to the right and if you click it, that service will be removed. On the right you will see Sharing Buttons. Scroll through this list, then drag and drop any added services you want. You can drop it where you want it to appear and you can edit the order of your Selected Services by dragging and dropping also. After you are done click Finish: Get the Code.





























A Code and Instructions box will appear. The first box is the actual Share Buttons code. The second box is the Script tags code that is needed for your buttons to work properly.

The first box code will appear something like this, depending on what services you added to yours:

<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_email_hcount' displayText='Email'></span>

Add this code exactly like I mentioned above:

After the closing </div> code on both of the following.....


<div class='post-header-line-1'/>


           &

<div class='post-footer'>

Then the second box with the script tag, copy and paste it after the closing Head tag. So you will search for this: </head> and paste the script tag directly after it.

3. Click Preview on the HTML Editor and make sure your template loads correctly and the buttons are appearing how you want them to. If everything is okay, click Save Template and Close.

4. Go to your Blog and see how it looks.


If you are having problems adding the code to your Blogger Template, leave a comment below with your email address and the Blogger Template Name that you are currently using or you can email me directly at bfranks@alittleunhinged.com.