January 7, 2012

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Marty said...

Hi, Mayura
I tried it and it worked nicely. But it is not sticking to the left margin of the page, if someone has a low resolution monitor, it will overlap the text.Can you help in this regard. Thanks

Mayura De Silva said...

Hi Marty,

You can try changing Top and Left positions in the style code snippet to place your share bar where you wanna display it on the page mate :)

Cheers...

Marty said...

Thanks for a quick response :)
Yes I have been trying that, not much success :( Rven if I say "right" it goes a little left but still the problem remains. It sticks to the left end of screen rather than the left side of post, which I want, any more ideas from your side Mayura?

Mayura De Silva said...

You can change Top value to position your share bar vertically. Just keep Left to 0px as in the post. However can you can tell me exactly where you wanna position it and I'd prefer if you can mention your screen resolution too... :)

Cheers...

Marty said...

Mayura,
My resolution is 1366*768 actually it doesn't matter because the blog should be designed as per the needs of visitors, it will create a problem for a visitor who has low resolution. I can adjust it by Ctrl and mouse wheel.
I will try, what you said above

Many thanks for quick follow ups friend :)

Mayura De Silva said...

Alright Marty :) Yeah we can't decide by our own screen resolution. I just wanna know it coz I didn't see share bar overlapping on your text. BTW My screen resolution is lower than yours mate :)

Cheers...

Osaru-yo said...

Thanks for the incredible helpful tutorial! It finally floats next to my blog ^^.

Mayura De Silva said...

You are welcome Osaru-yo :)

Enjoy blogging...

Cheers...

Unknown said...

Thanks for this great tutorial!

Mayura De Silva said...

You're welcome Rie :) Thanks for your compliments dear...

Cheers...

Zaaynab Le'Von said...

This is so detailed and helpful - thank you sooo much :-)

Mayura De Silva said...

You're welcome Zaaynab :) Thanks for commenting and for your compliments...


Cheers...