Home » gadget » Blogger AddThis Gadget with Facebook Like & Twitter button positioning! Newer Post

Blogger AddThis Gadget with Facebook Like & Twitter button positioning!

I was a big fan of ShareThis. For years, it served pretty well on my blog. It offers a bunch of buttons which are very easy to use. Once you paste the Javascript of sharethis in the template, things are very easy to add. It offers definite advantage in terms of customizability and usability, but it has some very serious drawbacks in the long run. It slows down your website through a bunch of tracking cookies. Recently I found whenever the page loads it send call to scorecardresearch.com, which is a third party cookie! Another drawback is, it uses sh.es url shortner for publishing the shared page. It might be a permanent redirect, but I was taken aback when I found pages shared on facebook which displayed netargument.com below the post title, changed to sh.es after sometimes. So, my trust was broken and I completely pulled out all the codes of sharethis from this website. Whenever, installing any third party sharing button one must check: 1) How it impacts speed of your website; 2) The kind of url shortner it uses. Sharethis lost on both!
Addthis is part of Blogger’s gadget library and so you may trust them. They always use your actual url for sharing & if you add it via gadget library, you don’t need to put any Java code in your template, they are taken care of by Google’s server. So you are safe here, from SEO point of view. Links used to be the most important aspect of SEO, but now it is the Speed of your website! Faster and having better on site clickstream data goes higher on Google.
First of all go to gadgets library of blogger and find addthis gadget, by simply going to Page element page. Choose show facebook like and twitter button. If you also want to get rid of Facebook’s Java SDK & Twitter’s Java code from your template, choose none in sharing icon option. They will let you use FB like & tweet button on your website without any need of having codes. If you wish you may even remove twitter and facebook codes to further enhance the performance of your website.
Let us go step by step on How to do it.:
  1. Go to Page element page and click on Add an element
  2. Go to More Gadgets and find Addthis via search there.
  3. Go to next page and check: Show Facebook & Twitter buttons
  4. Next choose “none” from dropdown menu next to Show Icon option.
  5. If you don’t want Add This written on the top of the widget, simply make it blank and Save.

Positioning the buttons

The above steps will add the gadget to the page element box. Now drag the element to just below the Post area. Save arrangement and  click edit once again. Expand the box and note its widget ID, from the top address bar.
Now open the template HTML editor, tick expand the widget option on the top, Ctrl F  to find the widget ID.  Select the line including the widget ID and everything above <b:include name='quickedit'/>. Replace it with the one written below, putting your widget ID at the colored place:

<b:widget id='WRITE YOUR WIDGET ID HERE' locked='false' title='' type='Gadget'>
<b:includable id='main'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != &quot;&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != &quot;&quot;'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != &quot;&quot;'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if></b:if>
Now the buttons will only appear on the blog post page. To further customize it where it should appear on the page. Use the following code, and add it to Add CSS of your blog via Template Designer. The following code will place it at left hand side bottom of the blog post, like the one shown on this page.
#WRITE YOUR WIDGET ID HERE {
position:fixed;
left:0px;
top:625px;
}
If you want to place it near blog post headline, choose this code and adjust the attributes.
#WRITE YOUR WIDGET ID HERE {
position:absolute;
left:  px;
top:  px;
}
If you want to place it near Footer, use this code and adjust the pixel values

#WRITE YOUR WIDGET ID HERE {
position:absolute;
left: px;
bottom: px;
}

For vertical alignment, add:
width:130px;
within the curly bracket in any of the codes.

No comments :

Thanks for Reading Netargument. You may also Say Something about Yourself,HERE! http://www.netargument.com/p/about-you.html