Tuesday, August 25, 2009

Adding Your Tweet Me Me Button To Blogger

It's pretty interesting, but I had been struggling to add a "TweetMeMe" button to this Blogger blog and others. It took me quite a bit or research to not only place the button but to get it to achieve the functionality I really wanted for my blog.

Problem 1: Finding Code To Add to My Blogger Template
Most of the code out there related to adding Twitter buttons is for WordPress. I know that I may be the only guy still out there using Blogger, but I always thought that it would be a safe bet given the fact that Google owns it... but I guess you never really know. Anyway, it took me a while to find the right source code to drop into a template, but here it is (PLEASE NOTE: All "[" and "]" symbols need to be changed to "<" and ">" symbols in order for code to work. I only changed them for this web page so they will display properly).

Follow these simple steps:
1. Go to Layout-->Edit Html
2. Download Full Template
3. Check the Expand Widget Templates
4. Search for the code below (remember "[]" symbols should be "<>" symbols):

[div class='post-header-line-1'/]


a. For the full retweet button place the following code below the above code:

[div style='float:right; padding: 5px 5px 5px 5px']
[script type='text/javascript']
tweetmeme_url='[data:post.url/]';
[/script]
[script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript']
[/script] [/div]

This will display the button on the right side of the blog post. To place the button on the left side just replace float:right in the code to float:left.

b. For the compact button instead of the code above place the following code (replace "[]" symbols with "< " and ">" symbols):

[div style='float:right; padding: 5px 5px 5px 5px']
[script type='text/javascript']
tweetmeme_url='[data:post.url/]';
tweetmeme_style = 'compact';
[/script]
[script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript']
[/script] [/div]

5. Save the Template and you're done!

Problem #2: Getting the Tweet to Show the Name of the Post
Okay, now that you have the button installed, test it out. The biggest problem I had.. which no blog or forum provided the answer to, was that the button only provided the title of the blog in my tweet. I paid programmers, tried a bunch of stuff on my own, but only got workable solution from Tweet Me Me directly via their forum.

The reason why my button wasn't fully operational is because the title of my blog was too long. I had to go into my template and shorten the title of my blog. Within 24 hours, the problem cleared itself up. Now, if you visit The Marketing Blog (which is where I was having the problem) and Retweet, you'll see the name of the blog and title of the post. Walaaa!

If you're having the same problem, the above should take care of it. If this post was helpful, please retweet!

No comments: