How to Add Share Buttons for Your Blogger Posts with ShareThis

You may do a lot of researches and explore extra resources, integrate your experiences and perform different activities to result an informative and interesting posts on your blog. Blogging can be your passion, but on the other hand your expectation is to share knowledge with the audience who really interested in your content as they can make use of yours. Have you ever thought about a convenient solution for your readers to share your posts or articles with interested parties?

By default, Blogger has standard share buttons which allows your readers to share your posts. But you may notice that it's limited to few popular networks. If you prefer to let your readers share on more networks, we have already discussed about adding more share buttons with AddThis and you can even have a Floating Vertical Share Bar too.

Those both blog posts were based on AddThis sharing solution, and it has eye catching share buttons and cool features for publishers. But now I'd like to introduce ShareThis, as another popular solution for sharing content on your blog.

ShareThis helps visitors share your content on popular networks such as Facebook, Twitter, Google+, Pinterest and so on. The functionality is similar to AddThis, but they have an identical style for their share buttons which you may fall in love with ShareThis in first place.

Except for stylish share buttons and opening doors for multiple networks, they provide real-time analytics for user shares happening on your blog. As ShareThis offer reports on sharing statistics, you can track down which topics matter to your audience too.

Before You Go:

You need to have a ShareThis account to continue with below process. If you don't have an account already, register for a new account.


Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button underneath your blog preview.

5. Now find </head> in your template.

6. Add following ShareThis script right before the </head> tag.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"/>
<script type="text/javascript">stLight.options({publisher:'[Your Publisher Key]', shorten:false});</script>

Color Indication Information:

   - Share Widget Style

Here you can enable Multi-Post (Oauth) style or Direct Post (Classic) style. Specify true to enable Multi-Post style and false to enable Direct Post style.

Multi Post Style - Let people share your content to multiple networks at once without leaving your blog.

Direct Post Style - People will redirected to particular site when clicking on button. For example, if an user clicks on Facebook button, he will be redirected to Facebook to complete sharing.

   - Your Publisher Key

Add your ShareThis publisher key here. If you don't know your publisher key, you can find it at My Account page.

   - Shorten URL

Here you can enable or disable shortening your links with ShareThis when sharing. If you wanna enable shortening, change the value as true here.


7. Now search for <data:post.body/> in your template and add your preferred button code snippet right after <data:post.body/>.

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.

Small Style

<b:if cond='data:blog.pageType == "item"'>
<span class='st_facebook' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>

Large Style

<b:if cond='data:blog.pageType == "item"'>
<span class='st_facebook_large' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_large' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_large' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_large' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_large' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_large' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>

Horizontal Count Style

<b:if cond='data:blog.pageType == "item"'>
<span class='st_plusone_hcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_hcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_hcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_hcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_hcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_hcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_hcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_hcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>

Vertical Count Style

<b:if cond='data:blog.pageType == "item"'>
<span class='st_plusone_vcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_vcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_vcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_vcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_vcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_vcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_vcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_vcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>

Color Indication Information:

   - Your Twitter Username

Enter your Twitter username here if you wanna mention your Twitter username when sharing. Else leave it blank.

   - Custom Button Label

Here you can specify a custom button label or text to be reflected on respective buttons.

   - Google +1 Button

Remove this line if you wanna remove Google +1 button from your share buttons.

   - Facebook Like Button

Remove this line if you wanna remove Facebook Like button from your share buttons.


8. Now save your template.


More Information:

* You can find the all statistics for shares happened on your blog via ShareThis Metrics Dashboard.

* If you wish to customize your buttons and its functionality further, you can refer ShareThis Customization Overview.


Enjoy :-)