Bryan Hadaway's Blog
Your Account:   subscribe

bhadaway@gmail.com | Social: Facebook Twitter LinkedIn Google+

How to Create a Twitter Retweet Button





The purpose of placing a Retweet button on your site is to help promote a specific Tweet, often for the purpose of a contest or giveaway. The information is readily available here, but a little more hands-on than say going through the form of creating a Follow button. Here, we have to create our own visual button manually.

The Pertinents

Here’s a Retweet link:

https://twitter.com/intent/retweet?tweet_id=326818042568921088

And the original Tweet URL here:

https://twitter.com/startupwp/status/326818042568921088

As you can see we simply need to snag the ID of the Tweet and append the Retweet URL with it.

To get the ID, simply:

- Navigate to your main Twitter page (For example: https://twitter.com/username/).
- Find the desired Tweet and click “Expand” just underneath it.
- Then click on “Details”, just to the right of the time and date.
- Now in your browser’s URL bar above, you can highlight and copy the ID that appears just after /status/ in the URL (For example: 326818042568921088)

The Code

Now, with a little HTML, CSS and JS we can take our Retweet URL and turn it into a proper button:

<a href="https://twitter.com/intent/retweet?tweet_id=326818042568921088" class="retweet" style="display:inline-block;font-family:georgia,serif;font-size:12px;color:#000;text-decoration:none;padding:1px 5px;border:1px solid #ccc;border-radius:3px;background-color:#ddd;background:linear-gradient(to bottom, #f6f6f6, #ddd)">Retweet</a>
<style>.retweet:hover{opacity:0.9}</style>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The Demo

Retweet

Customization

To change the button size, simply adjust the font size and padding. Of course, you can easily customize the colors, gradient, shape etc too as well as the wording “Retweet” itself.

<a href="https://twitter.com/intent/retweet?tweet_id=326818042568921088" class="retweet" style="display:inline-block;font-family:georgia,serif;font-size:25px;font-weight:bold;color:#5f8b25;text-shadow:0 1px 0 #ddfcb3;text-decoration:none;padding:15px;border:1px solid #67a01b;border-radius:5px;box-shadow:0 1px #b6f562 inset;background-color:#8dc63f;background:linear-gradient(to bottom, #a0db51, #8dc63f)">Tweet for $$$</a>
<style>.retweet:hover{opacity:0.95}</style>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Tweet for $$$


That’s it, easy peasy. You can copy and paste the code anywhere, directly inside the body of your website’s page as is. Or if you’re using WordPress, you can paste the code directly into pages, posts or text widgets and edit as needed. Enjoy!

Thanks for reading, Bryan

Other Reads

  • Billy

    Great tip, works like a charm, THX

  • Upasana Chauhan

    Hi, the code works beautifully. I want to place a Retweet and Favorite link (beside each tweet) on my website and then directly want to retweet/fav the tweet. By the way above, we get a screen, which asks us to select Retweet or Cancel and then the tweet is Retweeted. Can I do it directly at one go? Kindly reply back to my query.

  • http://bryanhadaway.com/ Bryan Hadaway

    Apologies for this super late reply, could you still use some help?