Wednesday, June 23, 2010

Twitter Retweet Button for Blogger - Code for TweetMeme Integration

People who use Twitter like to share web pages. TweetMeme offers a super simple retweet button that can be installed on any web page, will shorten the web page's URL, and include your Twitter username in the retweet. Installing the retweet button in Blogger took a few minutes to figure out but the following is what I came up with to get the button to display below the title of a blog post; as seen on this blog:
  1. From your Blogger Dashboard, click "Design"
  2. Click "Edit HTML"
  3. Click "Expand Widget Templates"; you may want to download a backup copy of your current HTML before proceeding to step 4
  4. Search and find the following line of template code:
    <h3 class='post-title entry-title'>
  5. Add the following template code just before the closing </h3> tag:
    <b:if cond='data:post.title'><br/>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_source = &#39;rjmiller&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    </script><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </b:if>
  6. Change "rjmiller" to be your Twitter username and your final code should look similar to:
     <h3 class='post-title entry-title'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
            <b:if cond='data:post.url'>
              <a expr:href='data:post.url'><data:post.title/></a>
            <b:else/>
              <data:post.title/>
            </b:if>
         </b:if>
         <b:if cond='data:post.title'><br/>
              <script type='text/javascript'>
                  tweetmeme_style = &#39;compact&#39;;
                  tweetmeme_source = &#39;rjmiller&#39;;
                  tweetmeme_url = &#39;<data:post.url/>&#39;;
              </script><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </b:if>
    </h3>
  7. Click "Save Template" and then "View Blog"
The following is an example retweet of this blog post:
RT @rjmiller Twitter Retweet Button for Blogger - Code for TweetMeme Integration http://bit.ly/bahM59

No comments:

Post a Comment