Add Simple Social Share Buttons Widget on Blogger

If your visitors find your blog post useful, they may also share it with their friends on social media. You can make it easier for your visitors to share your blog content by adding social media share buttons at the end of the post.

Blogger does have a built-in social sharing widget but unluckily, it does not work on custom templates. We have created a simple and professional social share buttons widget for Blogger. This tutorial will guide you to add it to your blog.

Features of this social share buttons widget

Here are some of the features of this social share buttons widget –

• Fast loading – The widget doesn’t load any file from the external source (except the social media icons) so it won’t affect the page loading speed of your blog.
• No JavaScript used – The widget doesn’t use JavaScript language. It is based on HTML and CSS language only.
• Simple UI – It has a very simple and responsive design that can fit on any blog template.
• Social share buttons – We have added share buttons of 4 popular social media sites in this widget including Facebook, Twitter, Google Plus and Pinterest.

To see the live preview of this social share buttons widget, scroll down to the end of this blog post.

How to add social share buttons widget on Blogger

Follow this step-by-step guide to add social share buttons widget on your Blogger blog –

1. First, login to your Blogger Dashboard and go to Theme > Edit HTML.
2. Click anywhere in the template editor and press CTRL+F shortcut key to open the search box.
3. Now search this code in the template:

   <div class="post-footer">
   

4. Just below it, paste the following piece of code:

   <b:if cond='data:blog.pageType == "item"'>
   <style type='text/css'>
   .share{overflow:hidden;margin:20px auto;display:inline-block;width:100%;text-align:center;letter-spacing:.6px;font-size:13px}.share ul{margin:0;padding:0}.share ul li{display:block;float:left;min-height:40px;position:relative;padding:0;text-decoration:none}.share ul li a{float:left;display:block;color:#fff;padding:10px 14px;text-align:left;margin:0 3px 3px}.share ul li a:hover{opacity:.8;text-decoration:none;transition:all 0s linear}.share a.fb{background:#395796}.share a.tw{background:#4cb0ea}.share a.gp{background:#de3425}.share a.pn{background:#cd1c1f}.fb i,.gp i,.pn i,.tw i{background:url(//1.bp.blogspot.com/-P3DOmXqEiCM/VkOW8tkzxGI/AAAAAAAAMpE/cBX9b0xTPU8/s320/sosmed2.png) no-repeat;width:22px;height:18px;display:inline-block;vertical-align:text-top;margin:-3px 10px 0 0;text-align:center}.fb i{background-position:0 -100px}.tw i{background-position:0 -150px}.gp i{background-position:0 -200px}.pn i{background-position:0 -50px}
   </style>
   <div class='share'><div style='float: left;padding: 10px 14px;'><span style='font-size: 15px;font-weight: bold;'>Share this post</span></div>
   <ul><li><a class='fb' expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Facebook</a></li>
   <li><a class='tw' expr:href='"https://www.twitter.com/intent/tweet?original_referer=" + data:blog.url + "&text=" + data:post.title + "&url=" + data:blog.url + "&via=mevivekch"' rel='nofollow' target='_blank' title='Twitter'><i class='tw-1'/>Twitter</a></li>
   <li><a class='gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google+'><i class='gp-1'/>Google+</a></li>
   <li><a class='pn' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:blog.postImageUrl + "&description=" + data:post.title' rel='nofollow' target='_blank' title='Pinterest'><i class='pn-1'/>Pinterest</a></li></ul></div>
   </b:if>
   

   You can change “Share this post” text with any other tagline you like such as “Sharing is caring“, “Please share” etc.
   Note: There may be more than one occurrence of <div class=”post-footer”> code in your Blogger template. If the widget isn’t working with the first occurrence of the code, try it with others.

5. Finally, tap the “Save theme” button to save the changes. That’s it.

When someone clicks on the share button, the link will be opened in a new tab. We have also added a rel nofollow attribute in the anchor tag which tells search engines not to follow these social links.

There are a few third-party services available that can also help you to add social share buttons on your blog. We don’t recommend you to use any third-party service as it can affect your blog’s performance and page loading speed.

• Also read: Add simple social media follow buttons on Blogger

We hope you liked this social share buttons widget for your Blogger blog. If you want to ask something about this tutorial, feel free to share it in the comment section and make sure to share this post with your friends!