Twitter Introduce - Official Twitter Share Button (Tweet Button) for Blogger

For those of you who use Twitter on a daily (or even hourly) basis to share and read information about celebrities, friends, or businesses, you may be interested in Twitter’s new addition — The Tweet Button.

The aim of the Tweet Button is to simplify the sharing of web links by its day-to-day users and web publishers who use the social networking website to distribute information about its products and services.

When the Tweet Button is pressed or clicked, a pop-up box appears where an ‘automagically’ shortened URL of the page or object shared is displayed, Twitter said in their blog post released Thursday.

The Tweet Button also aims to grow traffic to the site and extend the Twitter followers. They aim to do this with publishers having the ability to preconfigue the custom text with every Tweet Button they wish to display to users, as well as the option to suggest other Twitter accounts they may also be interested in.

TweetMeme is another company who have provided similar capabilities, but will now retire and phase out its “retweet” service in aid of assisting Twitter with the growth of the Tweet Button.

It was only a matter of time before Twitter adopted such a service, as Facebook did some while ago with its infamous “Like” button that has also become a favorite on YouTube and many other blogs and social networking websites.

Do you like the new Tweet Button? Will you be adopting it on your website?

To install the new tweet button on blogger, Follow these steps

1. Login to your Blogger Dashboard and Navigate to Design > Edit HTML

2. Click on the Check box which says “Expand Widget Templates”

3. Now Look for

<data:post.body/>

and immediately above it paste the following code snippet(after proper editing)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='BlogCommander'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

4. Save your template.

5. Now you should see the twitter button near each of your blog posts.

Editable parameters

1. float:left - you can change this to float:right if you need the button on the right side of the post instead of on the left

2.data-count='vertical' - you can change this to data-count='horizontal' or data-count='none'

3.data-via='BlogCommander' - you can edit BlogCommander with your twitter user name. So if your twitter handle is michael, then change it to data-via='michael'

4. Adding some extra text in the tweet – With the current code, the button will make a tweet with the title of the blog post. If you want to add some extra text to the tweet, change expr:data-text='data:post.title' to

expr:data-text='"I am Reading: "+data:post.title' This will append “I am Reading:” to the tweet :)

Displaying the Tweet Button on the Post Page Only

If you want to display the Twitter button on the post page only, then wrap the code with conditional tags like

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='BlogCommander'>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</div>
</b:if>

Demos

1.data-count='vertical'
Tweet

2.data-count='horizontal'
Tweet

3.data-count='none'
Tweet

Something more about the Tweet Button
 

Blogspot Bloggers Official Sharing Buttons

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are still in draft(still not published on the official draft blog) and so wont be available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So  i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

• Login to Your Blogger in Draft Dashboard at http://draft.blogger.com
• Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option

• You can Drag and Drop the Share buttons and place it where you want.

• Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
• If it didn’t appear then don’t worry, That is because you are having a modded template. Just Got to the Edit HTML page under the Design Tab and locate 

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

and place the following code just below any of these lines[whichever is present in your template].

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and Save your template.

Optional Tweaks

• Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

• Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template 

.sb-blog{display:none}

sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or  buzz buttons, then it might look a little bad as these have rounded edges,

Add Facebook Like Button on blogspot blogger

Facebook has now made a extremely easy for anyone to integrate Facebook social elements into their blog – just copy-paste a HTML code and your site will instantly become Facebook-ready.

To this, open your blogger html editor, make sure that “Expand Widget Templates” checkbox is ticked.
Now Search for the following code (you can use CTRL+F on your browser) 

<data:post.body/>

When you found it, on the next line you should past this code

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>

If you found that, it means you are on the right spot.

Now Click “Save Template”. Refresh your main blogger blog now and you should be able to see your new Facebook Like Button.