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>
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>
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.
