How To Create Social Share Icons (Facebook,Twitter And Google+)

Social

Tweet

After so much request that how we have created above social share icons that appears on the top of each post, we are now writing this post on how to create social share buttons that appears on the top of each post. For the demo of his social widget you can just look above and below the title and you can also check and click on it how it works?

Carefully follow these all steps to configure this social widget otherwise it will not work.

STEP 1

1. Log In to your blogger account go to the site dashboard.
2. Now Go to Template >> Edit HTML
3. See below picture for more demonstration.

STEP 2

1. Now find </head>.
2. Copy below code
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style type='text/css'>
   #AMGP {
   float: left;
   border-top: 1px solid #eaeaea;
   border-bottom: 1px solid #eaeaea;
   width: 610px;
   margin-bottom: 20px;
   margin-left: -10px;
   margin-top: 10px;
   }
   .headingsharer h5 {
   float: left;
   padding-right: 20px;
   padding-top: 18px;
   text-transform: uppercase;
   font-weight: bold;
   margin: 0px;
   padding-left: 10px;
   }
   .tweeetero, .fbwolo, .g-plusones, .fbshare {
   float: left;
   border-left: 1px solid #eaeaea;
   padding-left: 18px;
   padding-top: 15px;
   padding-bottom: 10px;
   }
   .g-plusones {
   margin-left: 20px;
   }
   </style>
   </b:if>
3. Paste this code above </head>
4. See below picture for more demonstration.

STEP 3

Now this is the most crucial step so follow this carefully.

1. Now find <data:post.body/>.
2. Copy below code
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='AMGP'>
    <div class='headingsharer'>
     <h5>Social</h5>
    </div>
    <div class='tweeetero'>
     <a class='twitter-share-button' data-count='horizontal' data-via='guide_pedia' href='http://twitter.com/share'>Tweet</a><script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
    </div>
    <div class='fbwolo'>
     <iframe allowtransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
    </div>
    <div class='g-plusones'>
     <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
     </div>
     <div class='fbshare'>
      <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
     </div>
    </div>
    </b:if>

   
   
3. And Paste it above  <data:post.body/>.
4. Change guide_pedia with your twitter User name.
5. See below picture for more demonstration.

Now the most problem we face while setting up this widget is <data:post.body/> we find this code three times or sometimes four to five times. So most easy method is to copy above code and paste one by one above on all <data:post.body/> this code you find.

If you still face any problem while setting up this social share widget you can comment below.