Adding a Retweet Button to your Site

Posted by Gabe on January 17, 2010 under Social Media, Twitter | 5 Comments to Read

Yesterday I discovered the value of the Facebook Share button. I have known for quite some time about Tweetmeme’s Retweet button (as seen on this blog) as a WordPress plugin but hadn’t thought of using it on my regular web site.  That is until yesterday.

The Tweetmeme retweet button allows users to easily share the current URL with their Twitter followers by composing a tweet and bringing up the Twitter interface.  You can still edit the tweet before you send it out.  The button code for your web site can be found here.  What’s nice about it is that you have several easy options to modify the button. (I chose to have a compact button.)  You can even change the identity of the retweeter which defaults to @tweetmeme.  This is nice because that allows you to have other users promote your own Twitter ID as well as the URL. That’s what I call a “twofer”.  If you click on the number that prefaces the button, it will take show you who tweeted your link.  It would be nice if you could set the background color or have that be transparent, but that doesn’t appear to be an option just yet. Update: According to their own support dep’t., it’s supposed to be transparent but not all browsers support that.  I verified this to be true. Works fine in Firefox, no go in IE8.   (If you need the plugin directory for Tweetmeme, it’s here.)

So now I have an easy way to share the Kids Are Heroes web site with both Facebook and Twitter. And yes, that’s a hint. :)

Bookmark and Share

  • Liz Murphy said,

    Thanks so much for posting this!! I’m having fun adding all these fun apps to my blog and appreciate being able to add them easily :)

  • Gabe said,

    You are welcome Liz, I am learning from everyone else so it’s kind of a “pay it forward” thing. -Gabe

  • Nick Telford said,

    Hi Gabe,

    The background of the button itself is set to be transparent. However, the button is displayed inside an IFRAME, which on your site is set to have a white background.

    To change this behaviour, you simply need to add the following CSS to your site’s stylesheet:

    iframe {
    background: transparent;
    }

    I hope this solves your problem :)

  • Gabe said,

    Wow! Thanks Nick. That’s awesome that you guys are on top of posts like this.

    Unfortunately that is not the case. I have the code inside of a table cell.

    I received a message from Chris as I also contacted tech support about it. (That’s cool that he responded as well.) He says that it is supposed to be transparent, but not all browsers support it. This seems to be consistent with what’s going on because it looks OK in Firefox but not in IE8. Interesting that the Facebook Share button seems OK in both environments.

  • Rémi Savard said,

    I had the same prob. as you and I’ve look on IE filters and I fixed with this :

    iframe {
    FILTER:chroma(color= white);
    }

    The question comes from the browser itself, ie8 does not allow iframes without background color. So I guess that Twitter should have a solution without Iframes like the FaceBook share!

Add A Comment

home top