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.

Add Click To Tweet Button

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.

To learn more about the parameters see in Twitter Developer Guide

Method 2

In this method, we use jQuery so make sure you have included the jQuery library inside of your head tag.

HTML


<div id="container">
 <p class="c2t">You are now seeing the Click to Tweet demo</p>
 <br><br>
 <p class="c2t">Learn to add Click to Tweet button to your web page</p>
</div>

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.

jQuery


$(document).ready(function () {
 var i = 1;
 $(".c2t").each(function () {
 var className = "c2t"+i;
 $(this).addClass(className);
 $(this).after("<button class='trigger' id='"+className+"'>CLICK TO TWEET<img src='twitter.png'></button>");
 i= i+1;
 });

 $(".trigger").click(function () {
 var id = $(this).attr("id");
 var shareText = $("."+id).text();
 window.open('https://twitter.com/intent/tweet?text='+shareText+' via @voidTricks (www.voidtricks.com)');
 });
 });

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.


<!DOCTYPE html>
<html>
<head>
 <title>Add Click To Tweet Button</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var i = 1;
 $(".c2t").each(function () {
 //auto increase class name
 var className = "c2t"+i;
 //add class name to the paragraph
 $(this).addClass(className);
 //add button after the paragraph with the id of the same class name created above
 $(this).after("<button class='trigger' id='"+className+"'>CLICK TO TWEET<img src='twitter.png'></button>");
 i= i+1;
 });

 $(".trigger").click(function () {
 //get the id of the button
 var id = $(this).attr("id");
 //match the id with the class name and get the text
 var shareText = $("."+id).text();
 //open new window or tab with the url 
 window.open('https://twitter.com/intent/tweet?text='+shareText+' via @voidTricks (www.voidtricks.com)');
 });
 });
 </script>

 <style type="text/css">
 @import url(https://fonts.googleapis.com/css?family=Ubuntu);
 #container{
 width: 70%;
 margin: 30px auto;
 font-family: 'Ubuntu', sans-serif;
 }
 h2{
 text-align: center;
 margin: 0;
 }
 .c2t{
 color: #929292;
 font-size: 40px;
 clear: both;
 text-align: center;
 border: 1px solid #E6E6E6;
 width: 70%;
 margin: 0 auto;
 padding: 25px;
 border-radius: 10px;
 box-shadow: 0 10px 10px #C3C3C3;
 }
 .trigger{
 margin-right: 13%;
 margin-top: -23px;
 border: none;
 color: #aaa;
 font-size: 12px;
 float: right;
 background: transparent;
 cursor: pointer;
 font-weight: bold;
 }
 .trigger:focus{
 outline: 0;
 }
 .trigger:hover{
 color: #3BA9DA;
 }
 .trigger img{
 width: 11px;
 margin-left: 5px;
 }
 </style>
</head>
<body>
<div id="container">
 <p class="c2t">You are now seeing the Click to Tweet demo</p>
 <br><br>
 <p class="c2t">Learn to add Click to Tweet button to your web page</p>
</div>
</body>
</html>

In this code I have two paragraphs but basically you can have as much as you want. You can use div or any other element instead of paragraph which is convenient for you. The class is what matters.

Try this and leave your comments below. Don’t forget to share this if you find it useful.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *