Adding twitter button to a website is quite easy, In the last post we discussed adding Facebook like button to website. Here, we are gonna see how to add twitter button manually to your blog/website. We will also see how to implement twitter card and what are the benefits of doing so. I prefer adding social media button manually on my blog as in this way I can place it wherever I want and it gives me liberty to tweak the code, the way I need.
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
This code will show a tweet button with the counter as shown below –
If you want to configure this button further more or want to implement twitter follow button then you can refer twitter resource page.
Synchronous script – Less recommended – Makes webpage loading slow down
Asynchronous script – Good for websites – Doesn’t affect the website’s loading time.
Lets talk about twitter cards
Till here, we have learnt how to implement a tweet button on your website but don’t you wanna make your tweets look attractive so that it gains more attention? I prefer to do. It’s possible with the help of twitter cards. Before, I explain what are twitter cards, have a look at the picture of a tweet.
Basically, a tweet cannot have more than 140 characters. However, you can see that the above tweet has a eye catchy title, image and a good description. It has become possible with the help of twitter cards.
What is a twitter card?
Google uses meta data & Facebook uses open-graph, similarly twitter uses twitter cards. These are basically few lines of code which tells twitter about the content description, title, image of a particular webpage.
This is how they look like:
<meta name="twitter:site" content="Easy Steps 2 Build Website"> <meta name="twitter:creator" content="@Steps2BuildSite"> <meta name="twitter:url" content="http://beginnersbook.com/2013/09/add-twitter-button-website/"> <meta name="twitter:title" content="How to Add Twitter button to website"> <meta name="twitter:description" content="A complete guide on how to add twitter tweet button and twitter cards to website...">
Apart from above meta tags, there are other twitter cards exists, which makes it easier for twitter to understand your content and display it in a perfect way, you always wanted.
How do I add them in my website?
Manual ways of adding such kind of tags are always tedious and difficult. I have a perfect solution for WordPress blogs. If you are running a website on WordPress platform then you can try few plugins, which does this task automatically for you.
That’s all for now, let me know if you need any assistance while adding the twitter button to your website.