Wednesday, May 27, 2009

How to Add a "Tweet This" Button After Your Blogger Posts!

Go to your blog. Click Customize in the upper right corner, then "Layout" and then "Edit HTML". To be safe, check the box to expand your widgets and then click the Download Full Template option before you fiddle with your coding.

With the widgets expanded, search the content for "<data:post.body/>" (you can use ctrl+f to do this search). After this, paste the following:

<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjni9Mv2WyPPwelHmvpXgmofU-7uVXa8kQQy5uhrePhiEkFUaHq3_ybpzcj8BPBTsVY3nAWPz6aKDzPQZlwJEGuq3W34nPCmOd6AbWt_95_6ViYLT4rhQDDVzsdlCK0NkZTDtzF883ELDms/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>

<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>

<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>

<span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span></b:if>

Where it says "I'm reading" you can put whatever you want the person's tweet to say. In this example, a tweet would show up like this:

Blogger Buster made it easy for me to add a "Tweet This" button after my posts, but I'm still not satisfied with the design. The button only shows up when you click the post title to specify the link to the specific entry. This means the people who read the blogs off of the main page (as I'm betting you're doing now!) won't see my button. Any good remedies for this?

I was hoping to add a summary feature to collapse all but the first paragraph of each blog. This was in hopes of accomplishing two things: one, getting the user to click the link to read the full blog, and thus, see my Tweet This button (a cheap fix, but if it worked I'd be satisfied!) and two, it'd summarize my posts to allow easier browsing.. which was actually more for my other blog, minifad.blogspot.com, which has recently focused very much on the odd food I'm making for this diet... something not of interest at all to some of my readers. Shortening my posts to summaries would allow those bored by my black bean chocolate cake antics to skip on to my post on How to Dance With Girls at the Lantern.

If anyone has successfully combined these two features: the Tweet This button and the expandable summarized posts, do let me know. Or, alternatively, if you have another solution that makes the button show up on the main page but still link to the posts individually.

I know, I know. I'm picky for someone who only barely fiddles with coding. But I know what I want, alright?

-Jess MINIFAD: How to Add a "Tweet This" Button After Your Blogger Posts!Tweet this!

2 comments:

  1. Here are instructions from Blogger Buster on how to create summaries on your main page:
    http://www.bloggerbuster.com/2008/02/how-to-create-post-summaries-in-blogger.html

    If you want to add a "Tweet this!" button to each post on the main page (summaries or full posts), it shouldn't be too difficult using Layouts Data Tags in Blogger:
    http://help.blogger.com/bin/answer.py?hl=en&answer=47270

    Maybe we can figure it out tonight and you can feed me dinner ;)

    ReplyDelete
  2. I saw the summaries instruction, but when I added it my "Tweet This" would always disappear. I'm a coding noob.

    But that sounds like a plan to me, sir. I'll even let you try a slice of this amazing chocolate cake: http://minifad.blogspot.com/2009/05/lordy-be-chocolate-black-bean-cake.html :-D

    ReplyDelete