Wednesday, April 18, 2012

Blogger How to: Customizing Tweet Buttons to show your Twitter Handle

Today, my post is more of a "how to" for other bloggers. Almost all blogs have share buttons at the top or bottom of every post. For a while I've been trying to find out how to have my tweet button auto-populate with 'via @TheAnthonyCrew' after my blog post title and link. I think it's important to have your twitter handle at the end of a sharing tweet.

I had to cut and copy things from different websites to get exactly what I wanted so, to save you the time and hassle, I'm going to show you what to do. 

I know that blogger has built in share buttons that appear below your post but I decided to go with AddThis.com because you can log in and see the button analytics.

Install the AddThis Share Widget
  1. Go to addthis.com and you'll see different styles of share buttons. For blogger you want to click on the link under the style options that says "Blogger, Word Press, and other options"and this will bring you to a page where you can choose the platform you're using (blogger).
  2. Follow the on screen instructions to Install the Blogger Widget. (all you do is click where it tells you to!).
How to Customize your Tweet Button

     1.  On blogger go to Design, Layout, and then find the AddThis widget and click edit. 

     2.  Find the html near the top that looks like this:
          (it's circled in red above, and the numbers will be different on yours)

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4da5f9431bc30dd8"></script>

      
     2.  Go to the end of the first line of text as shown above where my cursor is in this picture (after </script>) and paste this:

<script type="text/javascript">
var addthis_share = {
    templates: {
        twitter: "Your Text {{title}} {{url}} via @TheAnthonyCrew"
    }
};
</script>


     3.  Now you can change the text to what you want to show up in the tweet box. I opted not to have 
          any text appear before the post title so I just deleted "your text" (don't delete the  "  before the word  
          your). Then delete my twitter handle and type yours.
   
     4. Hit Save and try out your tweet button!

I guess I should make sure my Tweet button is working properly now! 

I hope this helped you out! :)

1 comment:

A Cook Not Mad (Nat) said...

thanks for this post. do you know how to add a twitter handle to the share buttons below each post?