How to Add a Tweet Button to Your Website

You can put a Tweet button on your website or blog to provide an easy way for your visitors to share your content with their friends and followers on their Twitter profiles. This tutorial will demonstrate how to add a Tweet button on your website.

Have you noticed the Tweet buttons on this page (the "t" button with Twitter-blue color)? One of them is just below the post title at the top and the other one is at the end of the post. Try clicking one of them (you don't need to tweet, this is just to see how they work) and you will see how a Tweet or "Share a link on Twitter" button works.

I am pretty sure that you have seen the Tweet button on many other websites, and even used it for sharing content that you liked, with your followers. As you see, adding a Tweet button, or any similar share buttons from other social networks such as Facebook and Pinterest, is a great way for letting your website visitors and readers share your content with the click of a button and at the same time reaching more visitors as a result of this free marketing done by your visitors, willingly.

If you are running a website, no matter what it is about and whether it is an interesting website or not, you should definitely make use of the social share buttons including the Tweet button. You can find detailed tutorials about Google+ button, Pinterest Save button, Facebook Like and Share buttons in our earlier posts.

TIP: You can also check these posts about multiple Facebook share buttons and Facebook share button with no script which will help with adding social sharing buttons on your site.

Now is the time to talk about adding Twitter's Tweet button to your site.

Adding a Tweet Button to Your Site

You can find the technical details about how the Tweet button is created, how it works and related FAQ on the official Twitter support page at the following link:

https://dev.twitter.com/web/tweet-button

What we will do here is, using Twitter's Tweet button generator, to go through the steps and create a Tweet button to be placed on your website.

STEP 1: Go to the official Twitter Publish page, where you will find a number of embed options for things like tweets, timelines, lists, handles and hashtags.

At the bottom right corner of this page, you will see the Twitter Buttons option.

How to Add a Tweet Button to Your Website - 1

This is what you will be using to generate your Tweet buttons.

STEP 2: Click on Twitter Buttons option, which will open a popup to ask you the type of button you would like to create: Share, Follow, Mention, Hashtag or Message.

STEP 3: Select the Share Button from the list.

How to Add a Tweet Button to Your Website - 2

On the next page, you have two options and are free to use whichever you prefer.

The first option is to use the generated button code directly, without any customization.

How to Add a Tweet Button to Your Website - 3

STEP 4 a: If you prefer to use the generated button code directly, which is the simplest option, simply click the Copy Code button and then paste this code into your website (into the related file) to where you want it to be displayed.

Also take your time to read the Development Agreement and Policy, which are linked to below the button code box to ensure your use of the Tweet button is acceptable.

STEP 4 b: If you would like to customize your Tweet button, simply click the Set customization options link above the code box.

This will open a page where you can control and customize a number of things about the Tweet button such as the tweet text, URL to tweet, username and hashtag inclusions, the language and the size of the button.

How to Add a Tweet Button to Your Website - 4

You can specify the page title as the text, or anything you want, specify the page URL if you want it to be mentioned in the tweet and select the language of your choice. Keeping the language as Automatic will be ideal since you may have visitors from different countries, speaking different languages.

The final Tweet button code will be something like the following:

<a href="https://twitter.com/share" class="twitter-share-button" data-text="How to Add a Tweet Button to Your Website" data-url="http://www.tutsandtips.com/twitter/how-to-add-a-tweet-button-to-your-website/" data-show-count="false">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

And the button will look like this:

The above button code uses this page's title and URL. You will notice that the above code consists of an <a> link element and a script reference. You can place the link to where you want the button to appear, and put the script reference to the bottom of your page just before the closing </body> tag for faster page loading speed.

This is how a Tweet button is added to a website. You can now decorate your website(s) with the Tweet buttons and let your visitors share your content on Twitter freely and easily.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in