Add Click To Tweet Button To Your Web Page

Adding Click to Tweet button is really simple and quick. Instead of using an external plugin, you can simply do it yourself. You don’t have to integrate Twitter’s SDK or any kind of API for this. We are going to use URL request method to tweet our text.

Why Click To Tweet Button?

You know, how important is the social media for a website developer. It is good for you and your site if your contents are being shared in social medias. In this sense, Twitter is one of the most popular social medias. Having your contents shared in Twitter makes your website more popular.

We all know that a Tweet is restricted to 140 characters. So if you want something to be shared as a tweet, it should be short and simple. If you have a habit to insert lot of quotes, important notes or phrases in your post it would be cool if you place a Click to Tweet near each one of them. Visitors may share those quotes or phrases.

It is obvious to add @ mention of your twitter account (eg: @voidTricks ) or source mention (eg: [source: www.voidtricks.com]) in your tweets. Then only the users who read this tweets will know about your website.

There are two methods to add Click to Tweet button. First method uses just an anchor tag that redirects your phrase via URL to post a tweet. Another method is pretty handy while you have to insert multiple phrases or multiple Click to Tweet buttons in your post. It uses jQuery.

Method 1

<p>Hello how are you?</p>
<a href="https://twitter.com/intent/tweet?text=Hello how are you?" target="_BLANK"><button>CLICK TO TWEET</button></a>

Like I said, really simple. Look at the URL in anchor tag. It has only one parameter called text. That is all we needed. We have to give the text which we wanted to be shared as this parameter value. You can style it with CSS as per your creativity.

HTML

div with the id of container is just an outer wrap. Then we have to paragraphs with the class name of c2t. Click to Tweet button will be added after to each paragraph tags with the class name c2t. When it is clicked, the content inside of the paragraph tags will be shared as a tweet.

Basically we have to functions inside of document.ready function. One is to add Click to Tweet button after each paragraph tag and another functions is to get the text in each paragraph tags and add it to Twitter tweet URL as parameter value for text and opens in new tab as a post request.

Note the @ mention and website mention is added after the original text, just to gain some popularity to your site. Using any one of this is enough.

Complete code

So finally, add some CSS to style it to match with your websites template.