Saturday, September 18, 2010

Marketing Tip: Adding a Retweet Button to your Blog

I find since adding the retweet button to my blog posts, it saves me so much time by one click retweet and I'm done. So everytime I'm on my blog I find a post to retweet. Click, confirm, done! It will also display how many times it's been retweeted. I'll tell you how to add it to Blogspot (Blogger).

1. Determine where you would like the retweet button to appear in your posts (My button is normal right):
 normal right, normal left







compact right, compact left




2. Now to get the code for which position you would like. HINT: I would open Word, notepad, somewhere to paste the code to. Once you decide which position you want, copy the code for that placement and paste it into Notepad, Word, wherever you chose to paste it.

Normal Left

<div style="float:left;padding:4px;">  <script type="text/javascript">  tweetmeme_url = '<data:post.url/>';  tweetmeme_source = 'your_twitter_user_name';  </script>  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>  </div>
 
Normal Right
<div style="float:right;padding:4px;">  <script type="text/javascript">  tweetmeme_url = '<data:post.url/>';  tweetmeme_source = 'your_twitter_user_name';  </script>  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>  </div>  
 
Compact Left
<div style="float:left;padding:4px;">  <script type="text/javascript">  tweetmeme_style = 'compact';  tweetmeme_url = '<data:post.url/>';  tweetmeme_source = 'your_twitter_user_name';  </script>  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>  </div>
 
Compact Right

<div style="float:right;padding:4px;">  <script type="text/javascript">  tweetmeme_style = 'compact';  tweetmeme_url = '<data:post.url/>';  tweetmeme_source = 'your_twitter_user_name';  </script>  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>  </div> 

 
3. See this in the code that you just pasted? 
'your_twitter_user_name' 
Change that to your Twitter username.
  
 
4. Open up your blogger, and go to the Design Mode. 
In the upper left corner you will see Page elements, 
Edit HTML, Template Designer Click on Edit HTML. 
You will see this screen:
  
See the Expand Widget Templates in the upper right corner of that box? Check that.


5. Within that box, find this code: 
<div class='post-header-line-1'/>
I suggest using the Find (control F) and paste that code in that search box. Or you can scroll through the code.  *** Please note, depending on how your blog was set up... templates, etc, if you cannot find this code, try this code: <data:post.body/> and move to step 6***.

6. Once you find that code, go to the Word, Notepad, etc document where you pasted that placement code. Copy it and paste that after the code
<div class='post-header-line-1'/>


7. Save template. If you preview, it will give you false tweet numbers, fyi. Go to your blog and you should see it in the place you wanted.

8. You're done! Retweet a blog post!  Hope this is helpful.

Great place to find Blog topics hints and tips.

4 comments:

  1. Ooo, I'm gonna go try this right now! Thank you!

    ReplyDelete
  2. You're very welcome. Happy to share. Good luck! You'll love having it.

    ReplyDelete
  3. Thanks so much for this. I copied it all and pasted it into a word doc to use as a reference. I'll be back for help with Twitter. I'm a T newbie. BTW, did you catch the story about the hacker who hacked into Twitter? Check out story either through foxnews.com or mywot.com (web of trust) -- can't remember where I caught the story.

    I just added you to my new category, Great Blogs, in "Art-Online" ezine. BTW, Thanks for your comment!

    Cheers,
    Marian

    Marian Cates
    Art-Online e-zine
    http://artonline-mwc.blogspot.com

    ReplyDelete

Follow Finding Charm on Twitter

Related Posts with Thumbnails