Friday, August 5, 2016

How to add social media sharing button bellow in every post at blog?

Inserting social media button below blog post or above comment box is highly recommended as after reading entire blog post visitors will be able to make decision whether to share your stuff or not. This tutorial is a part of SMO, Increase your blog traffic put social media sharing button below every blog post in blogspot site. It’s most important fro blogger site. However, we had shared the same post in before. In fact, social media shares many of the visitors are very easily available for the social media to post the times I feel very good. Today I will share with you the code it is very beautiful and decorated with the latest updates. I think that social media share buttons to customize and where not to. Although If you get but it will look old interface. I'm shares which, taken from the social media version of the latest update.

Inserting social media button below blog post or above comment box is highly recommended as after reading entire blog post visitors will be able to make decision whether to share your stuff or not. This tutorial is a part of SMO, Increase your blog traffic put social media sharing button below every blog post in blogspot site. Its most important fro blogger site.

Installing First Widget

  • Login into your blogger blog
  • Go to template > Edit HTML 

And from the keyboard by pressing Ctrl + F of the search </body>
And paste the bellow code in to the widget. Or, you can add the Below Section of code before closing </body> tag.
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Note

Top this JavaScript code is the latest update of Facebook code. You have never experienced before adding it code to your Blogger Template. JavaScript does not need to be added again if it had added before time. If you do not add it certainly will. Facebook Social Plugin works with JavaScript because you can use your blog. Therefore, it is my view bloggers / sites too important for a plugin.
  • Now search code data: post.body. This code may be more than one place you can see your blogger template. Try it if you can get the latest. Try the last line of the second line is if you do not.
  • Copy and paste the codes just below the top portion.
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id="pro-share" style="margin-top: 10px; font-weight: bold;">
      <div style='margin-right:10px;margin-top:4px; float: left; font-weight:bold;'>Share this Post</div>

      <div style='padding-top:0px; margin-right: 5px; float: left;'>
      <div class="fb-send" expr:href="data:post.url"></div>
      </div>

      <div style='padding-top:0px; margin-right: 5px; float: left;'>
      <div class="fb-like" expr:href="data:post.url" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
      </div>

      <div style='padding-top:0px; margin-right: 5px; float: left;'>
      <div class="fb-share-button" expr:href="data:post.url" data-layout="button_count"></div>
      </div>

      <div style='padding-top:0px; margin-right: 5px; float: left;'>
      <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
      <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
      </div>

      <div style='margin-right:5px;margin-top: 0px; float: left;'>
      <div class="g-plusone" expr:href="data:post.url" data-size="medium"></div>
      </div>

      <div style='margin-left:-30px;margin-top: 0px; float: left;'>
      <a class="addthis_counter addthis_pill_style"></a>
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script></div>
      </div>
      </b:if>
      • Finally, click Save Template. That's All.

      Customization

      • Heading change at the top can be marked in red Share this Post. You can be change heading the top marked name as “Share this Post
      • Each button has been divided into separate code and style. If you wish to remove the button from here or you can change the style.

        Previous Post
        Next Post

        4 comments: Post Yours! Read Comment Policy ▼
        লক্ষ্য করুনঃ
        পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

        1. Wa alaikum salam akhi....nice tutorial....
          I'm looking for a floting social share on left side bar which would be just round icons of fb,twitter,G+ and pinterest for my site ...

          ReplyDelete
          Replies
          1. Thanks for Comment. I will try about this tutorial in few days. So, Stay canected our site Or, do this site bookmarks.

            Delete
          2. Actually,Addthis did the work but I'm unable to use only my favourite social sharing icons.May be due to free account.
            Thanks for your help :)
            and is your site on Wordpress?I guess so...
            I think you should have a look on your page links which appear in gooogle like http://www.tutorialgift.com/?p=8 ..is the link SEO friendly...
            I'm a beginner,Thanks for your help.

            Delete
          3. Again Thanks. Agree! Addthis widget does make
            disturbance at sometimes. So, Should be use customized widget. Other wise, My blogger site has opend new platfrom. It is only 3 months old. And its running blogger platfrom. Although I am flowing to try latest article base SEO. Hope that, You will stay this blog at free times.

            Delete

         
        Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE