Iframe-based Twitter Tweet Button for Blogger. The better alternative!

Twitter has provided webmasters and bloggers 3 different ways of adding their Tweet button to websites and blogs.

The most popular and undoubtedly the easiest way for everyone is by using JavaScript but what many didn’t know is that it has the tendency to create a lot of problems to those using it. I have seen problems caused by JavaScript-based Tweet button too many times already and I’m getting pretty sick and tired of it.

Why?

The ONE and ONLY reason why I do not like JavaScript-based Tweet buttons

Do you see those awful spikes (the one near the end of August and the other somewhere in the middle of September) in the above screenshot (taken straight from my current Site performance chart)?

Those spikes were caused by JavaScript-based Tweet buttons and in that few instances, JavaScript-based Tweet buttons have brought down this blog to a near standstill! Twitter’s fail whales are not something to be taken lightly, folks!

I knew something had to be done and I begun to look for a better alternative. I found one last month and used it for a while on my niche sites. So far it has performed flawlessly and yesterday I begun testing it on this blog. So far, so good and I think I should share the better alternative with bloggers that are also using Blogger like me.

Iframe-based Tweet button for Blogger

According to Twitter, there are 7 unique Twitter query strings that we can use to customize our Tweet buttons but in the example down below, I’m only using 3 since they are what we need most of the time. The query strings are count, via and text. Take a look at the following example:

<iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?text=&quot; + data:blog.pageName + &quot;&amp;via=homebiss&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:110px; height:20px;'/>

The ones purposely colored in red are attributes that you can change on your own. Note the use of Blogger’s data:blog.pageName data tag in the above example. You may also use Blogger’s data:post.title data tag if you want to but it won’t make any difference since the purpose is more or less the same. It is to help Twitter grab the title of the blog post that is about to be tweeted!

Please bear in mind that the example shown above is best used on blog posts alone. Each blog is unique and other bloggers may need to wrap the above codes with some Blogger conditional tags in order to show iframe-based Tweet buttons only on blog posts. Here’s an example:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?text=&quot; + data:blog.pageName + &quot;&amp;via=homebiss&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:110px; height:20px;'/>
</b:if>

How does each tweet looks like after using iframe-based Tweet buttons?

No worries! Each tweet will look exactly the same as before!

Conclusion

It is indeed possible to use iframe-based Tweet buttons on Blogger-powered blogs and I strongly feel that iframe-based Tweet buttons are better than JavaScript-based Tweet buttons but that is only my 2 cents worth of opinion. :)