Kepada Blogger IT, Teknologi atau Berkaitan Dunia Teknologi, Mari Bertukar Link Dengan Blog ini


Monday, September 10, 2012

Add Twitter Tweet Button To Blogger

Add Twitter Tweet Button To Blogger
Twitter is one of the largest social media company in the world and they has released their official share buttons with counter. In this tutorial we will discuss on how to add this Tweet Button to Blogger. This button is an official button created by twitter developers and does not belong to a third party. As opposed to the retweet button this button loads quickly and does not disturb the load time of your website.

How To Add Twitter Tweet Button To Blogger?

Now let’s install the button:

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates.
4. Search (Ctrl + F) for following line of code in your HTML:


5. Paste the below code immediately below/after that line:

<!-- Twitter Tweet Button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='YourTwitterUsername' data-related='' href=''>Tweet</a>
<script src='' type='text/javascript'></script>
<!-- Twitter Tweet Button End -->

6. Save it.

Button configuration:
  • Choose the type of button and follow recommendation by changing the value of the respective attributes in the code step 5.
Button type Attribute Value
               Twitter tweet with counter data-count vertical
          tweet counter on side horizontal
              tweet stand alone none

Follow recommendation 1
data-via YourTwitterUsername

Follow recommendation 2
data-related Second Twitter username

Button repositioning:

The steps above positioned the button on bottom left of each post. You can change the position if you wish:

  • Position it on top of post
  • Place the button code before <data:post.body/>, instead of after.
  • Position it on the right
  • Change the float in the code from left to right.

No comments:

Post a Comment

Popular Posts Blog IT Segment

Recommended Post Slide Out For Blogger
Related Posts Plugin for WordPress, Blogger...

Rakan Bersama

Blogger tricks and toolz