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.
In order to display twitter button on website, you need to add two elements: Twitter button code & Java scripts. Twitter button code should be copied to the place where you want the button to be displayed (Generally in a template file such as single.php so that you don’t have to add it anywhere else). JavaScript can be added anywhere between opening and closing of Body tags(<body>….</body>).
Button
<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.
JavaScript
Before placing the button’s code into the template or onto a webpage, copy the below JavaScript, without this the button won’t work. There are two types of script available for the button to render, you need to choose only one of them. We recommend using asynchronous script as it makes your site load faster.
Synchronous script – Less recommended – Makes webpage loading slow down
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
// ]]></script>
Asynchronous script – Good for websites – Doesn’t affect the website’s loading time.
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.async=true;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
// ]]></script>
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="https://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.
Yoast WordPress SEO plugin(free) and SEOpressor v5 (premium) are the plugins which supports this feature.
That’s all for now, let me know if you need any assistance while adding the twitter button to your website.
Leave a Reply