How I Added Inline Social Media Share To My Blogger Blog


I cannot overstate the importance of social media share for our Blogs and Websites.
For the sake of emphasis, it makes it easier for your blog’s audience to share your content they find valuable with their friends on the social media of their choice.

So, in this post, I’m going to share my success story on how I added inline social media shares to my blog.

But to be honest, it is an improvement on an earlier awesome tutorial by Techno Gadget World on out how to add floating social media share widget to blogger blog. Read the full post here.

After stumbling on it, it happens to be exactly what I’ve been looking to lay my hands on for ages. I was elated and I immediately implemented it on my blog.

However, like an Oliver Twist, I wanted more. And what did I do?

I asked if the same string can be used to achieve inline social media shares. I wasn’t too sure, though, I only said I should give it a try relying on my stammering knowledge of the HTML.

So, I embarked on an ambitious exercise of tweaking the widget code to suit my blog needs and I was pleasantly surprised at the success I was able to achieve.

That was what gave birth to the post you’re reading. Without much ado, let’s quickly go to the details.
And how did I do it? Below is the floating social media share widget supplied by Techno Gadget World:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;”>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_whatsapp"></a>
<a class="addthis_button_email"></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-51f184b5319b19ad"></script>
<!-- AddThis Button END -->

Note: To use, just copy and paste to the HTML field anywhere in the gadgets section of your blog’s layout and you’re done. But make sure you leave the space above the gadget open.

As you can see below, all I did was:

1.     1Change floating to inline in red highlight.
2.     2. Change the style link also in red above to this: style='align: left;’

3.     3. Add the code in the second line (also highlighted in red below) to enforce it on the page. You can remove it if you want the share to display on the homepage alone.

4.      4..And finally, I also add the terminating </b:if> code in red right before the </div> in the string. Actually 3 and 4 go together.  

5.      5.To substitute the default social media share with any of your choice, all you need to do is follow the existing pattern.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_inline_style addthis_32x32_style"  style='align: left;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_whatsapp"></a>
<a class="addthis_button_email"></a>
</b:if></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-51f184b5319b19ad"></script>
<!-- AddThis Button END -->

To simply add inline social media share to blogger blog, just copy the entire code above and apply it where you like in your blog template.

But I can’t guarantee you there won’t be hitches as you embark on implementing it in your blog template.

Therefore, to be on the safer side, you might need to back up your template. To do so, copy, paste, and save the template codes to your notepad.

Secondly, you might also need to switch off the blogger default share for the best result which can be found in the gadget setting of the layout of your blog. Click the edit link in the blog post page and just toggle it off.

To edit your template, Go to Theme > Edit HTML > click Jump to widget > select Blog1.

To achieve the best result, look for and paste below or above this line of code in your template:

<data:post.body/>

Or alternatively below any of these two strings:
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>

Or you just look for this set of codes and add just below the last (div)

<!-- share buttons -->
    <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>

      </div>

Click save and you’re done!


My photo
Deji Olaluwe
Abuja, FCT, North Central,, Nigeria
Deji Olaluwe is a writer, poet, and blogger. He's the brain behind this blog. Some of his hobbies are travelling, listening to good music (especially Afro-centric genres), and meeting people.