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:

And the original Tweet URL here:

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:

  1. Navigate to your main Twitter page (For example:
  2. Find the desired Tweet and click on the time/date it was posted.
  3. 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: 683370254710345728)

The Code

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

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

The Demo



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="" 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>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";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.

  • 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.

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

  • Vijaysinh

    on localhost it will work?? I am not able to retweet from my localhost..

  • I don’t do localhost testing, so I couldn’t say.

    I recommend creating a live (but hidden from public view) testing area for proper testing.

    You should be testing in the same environment as where the actual, live site will reside to avoid unexpected changes.

    If you don’t have your own host account for testing, you can see my recommendations here:


  • Vijaysinh

    Thanks for the reply Bryan.. I resolved issue…!! I was using id from response but actually I have to use str_id of tweets….!!