Add Floating Vertical Share Bar for Blogger Posts with AddThis

People always love to share interesting content with their friends and followers. Isn't it? I think you totally agree with it. As you and I are struggles with information madness, we may always find different kind of interesting information or content everywhere on the web. Once we find those, we may provide our feedback via available ways. Next we will try to find a way to share this piece of information. Copying and pasting links on our social profiles could somewhat an old methodology. So why don't you provide your readers an easy yet simple way to share your content across the web?

AddThis is an sharing platform useful for publishers and it enables readers to share content easily. If you can recall, we had a similar discussion in our recent post - Add Share Buttons for Your Blogger Posts with AddThis. However this time it will comes up with a different layout - Vertical layout.

You may have seen vertical share buttons appearing on popular websites with easy sharing capability. As like that AddThis provides you vertical share bar with popular share buttons and eventhough readers scroll your page, still they will able to see share buttons. So they don't need to scroll top or bottom again to find share buttons if they wanna share your content. It's right there available for them. AddThis offers you vertical share bar in few different sizes and as usual, they offer you analytics for the shared content.

Before You Go:

You need to have AddThis account before you proceed with below steps. Sign up for a new AddThis account if you haven't got one yet.

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 the following tag within your template.

</head>

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

<script type='text/javascript'>
var addthis_config = {"data_track_clickback":true, "data_track_addressbar":false};

var addthis_share =
{
 templates:
 {

   twitter: "{{title}} {{url}} via @[Your Twitter Username]"

 }
};
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=[Your Profile ID]' type='text/javascript'/>

Color Indication Information:

   - Click Tracking

Here this will enable tracking of click backs for your shared content. If you wanna disable click tracking of your shared content, set this as false. However this doesn't affect on your SEO.

   - Address Bar Tracking

This feature responsible for tracking of your content being shared by copying the page URL from user's address bar. If you wish to enable this feature, specify true here.

   - Your Twitter Username

Add your Twitter username here. So whenever someone share your posts via Twitter, it will mention your Twitter username in the tweet.

   - AddThis Profile ID

Add your AddThis profile ID here. You can find your AddThis profile ID on AddThis Publisher Profiles page.


7. Now select your preferred style from below and add relevant code snippet just before the </body> tag.

Large Style

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="top:50px;left:0px;">
<div class="addthis_toolbox addthis_default_style">
<span><a class="addthis_button_facebook_like" fb:like:layout="box_count"/>
<span><a class="addthis_button_tweet" tw:count="vertical"/>
<span><a class="addthis_button_google_plusone" g:plusone:size="tall"/>
<span><a class="addthis_counter"/>
</div>
</div>
</b:if>

Medium Style

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="top:50px;left:0px;">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<span><a class="addthis_button_preferred_1"/>
<span><a class="addthis_button_preferred_2"/>
<span><a class="addthis_button_preferred_3"/>
<span><a class="addthis_button_preferred_4"/>
<span><a class="addthis_button_compact"/>
</div>
</div>
</b:if>

Small Style

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_bar addthis_bar_vertical addthis_bar_small" style="top:50px;left:0px;">
<div class="addthis_toolbox addthis_default_style">
<span><a class="addthis_button_preferred_1"/>
<span><a class="addthis_button_preferred_2"/>
<span><a class="addthis_button_preferred_3"/>
<span><a class="addthis_button_preferred_4"/>
<span><a class="addthis_button_compact"/>
</div>
</div>
</b:if>

Color Indication Information:

   - Top Position

This value defines the top position of vertical share bar. Change it if you wanna change top position of bar.

   - Left Position

This value defines the left position of vertical share bar. Change it if you wanna change left position of bar.


8. Now save your template and check your individual posts for share buttons.

More Information:

* You can review analytics for shares made on your blog via Floating Vertical Share Bar at AddThis Analytics page.

Enjoy :-)