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


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?

How To Create Social Share Icons (Facebook,Twitter And Google+)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.
How To Create Social Share Icons (Facebook,Twitter And Google+)

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.
How To Create Social Share Icons (Facebook,Twitter And Google+)

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.

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


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.
Review

Post a Comment Blogger

  1. Guidepedia has been producing really helpful tutorials and shares on the internet best .. how i wish i could contribute...

    ReplyDelete
    Replies
    1. you are welcome to contribute on GuidePedia

      Delete
  2. masala v.13 please , waiting from so many day .. no so many months

    ReplyDelete

Don't Comment irrelevant It will be deleted!

 
Top