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=683370254710345728
And the original Tweet URL here:
https://twitter.com/calmestghost/status/683370254710345728
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 on the time/date it was posted.
- 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="https://twitter.com/intent/retweet?tweet_id=683370254710345728" 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>
<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
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=683370254710345728" 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>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.