How to create a tweet button containing a twitter username

How to create a tweet button containing a twitter username

Tweet buttons are very important on your website. Especially nowadays, when the internet is all about sharing and socializing. Social networks have become a prime component on the internet.

So, in this tutorial, I am going to tell you a very interesting thing about tweet buttons. I will tell you how to create a tweet button that has a Twitter username inside it. So, whenever someone uses it (clicks on it), the tweet will by default contain your pre-defined twitter username or twitter handle.

Tweet on click is one concept of embedding twitter into your website. However, this is also very useful. First of all let us see some of the reasons why this can actually be great for you and your website –

  1. First, this concept help you popularize the twitter user that you are attaching. So, from your blog, any person who uses this button is actually mentioning your name to the Twitter world each time. Plus more and more traffic!!

This is extremely helpful as this helps raise your popularity to a greater level.

  1. The user who uses, might just feel that he or she should mention you as the source of the material being shared.

So, you are giving your user the Twitter handle by default. He or she would have found it much more difficult otherwise to find out what your Twitter username is.

  1. A tweet button itself plays a very vital role in popularizing content and redistributing it. A twitter handle gives a better marketing edge.

Since you are attaching a name to it, this thing becomes more appealing to users. People love to see names attached to materials instead of just anonymous posts.

Twitter offers their buttons from the developers section. If you have sound knowledge coding using JavaScript and web development languages; I think this link on twitter developers zone would be enough for you.

For all others, let’s see this through step by step.

 

  1. Create the tweet button

However, for the benefit of all others who would like to learn how to create a Tweet button, here

Process 1:

This is the old school HTML method. Here, we will create an anchor tag and inside that we will place an image of the tweet button. In the href attribute of the anchor tag, we will place the Twitter supplied link content that will redirect the system to Twitter for tweeting.

Download the graphic (the icon) from Twitter. Download it here. Avoid downloading the graphic from other websites as Twitter strictly recommends that they must abide by their specifications.

This method is a detailed method.

Procedure 2:

As suggested by Twitter’s own tutorial, simply call the Twitter “twitter-share-button” class. This will automatically change your link or anchor tag into a clickable button. There is a “data-size” attribute supplied by Twitter. In order to get a large button, just write data-size=”large” as part of the anchor tag attributes.

The href content must, however, be the same as the above procedure.

We will see in the next step, how we can modify the href attribute for containing a twitter username.

Note: For both of the above procedures, Twitter’s JavaScript library must be loaded into your webpage.

  1. Modify your button to hold a twitter username

Once your tweet button is in place, just modify the HTML part of the tweet button in order achieve what we are planning.

So, basically the structure of the tweet button generating HTML is something as below –

<html>
<head>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>
</head>
<body>
<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=My%20Tweet%20button%20with%20a%20via%20tag%20via @kb020189"
  data-size="large"
via="kb020189">
Tweet</a>
</body>
</html>

Our target is to prepare a tweet button that contains a “via” tag. That way, whenever someone is using the button to tweet, the twitter handle will automatically appear in the tweet body.

This feature to add a twitter username to a tweet button, is also possible using the rel=canonical concept supplied by Twitter. In that, you could also post URLs and Twitter cards from a tweet button.

As you can see in the above code block, we have modified the “href” attribute of the hyperlink.

So, this is basically very easy. Just try out yourself and let me know in the comments section.

Here’s a quick example of the final product –