As you know, these days having social media presence is very important for any business or entity. One among that is twitter, which has significant importance if you want to drive traffic to your website and also want to inform the world what you are doing.
There are number of ways, one can add a twitter button, which can tweet the information once clicked to your followers to your website. It depends on what kind of web development platform you are using. If you are using WordPress, there are some plugins which can help to add a button with just install of that plugin. But in this article we will show you how to add “Tweet” button using source code from tweeter. This will definitely uses less code compared to others like plugins, speeding up the loading compared to that.
Following code, will add a “Tweet” button to your page, or where ever you want the “Tweet” button to appear.
<html>
<body>
<h1>The code below, add "Tweet" button and you can tweet this link by clicking on button</h1>
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="greenecosystem1" data-related="greenecosystem1">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>Now, if you want to customise this code and create a different look with different twitter account, you can check link https://about.twitter.com/resources/buttons#tweet create a custom button and copy that code to integrate into your website.
Now, lets try to understand, what is “Tweeter Card”
Tweeter card is a set of meta tags, which when added into <head> section of your webpage, guides the tweeter, how to show the tweet after shared with followers.Twitter Cards generated from developer meta tags only appear when a Tweet is either expanded in the timeline (on web) or viewed on the Tweet’s individual permalink page (by clicking on the date from the timeline, either on web or on mobile).
So, its a way how you want your followers to see the contents of webpage you tweeted from your account.
You may refer to https://dev.twitter.com/cards/getting-started to understand more information about tweer cards.
Now, we will add the tweeter card code into above created webpage, and it will look like as below,
<html>
<head>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@greenecosystem1" />
<meta name="twitter:title" content="Page Heading e.g. Green Ecosystem" />
<meta name="twitter:description" content="Platform which promotes agriculture, renewable energy." />
<meta name="twitter:image" content="http://www.greenecosystem.in/blog/images/sprout.jpeg" />
</head>
<body>
<h1>The code below, add "Tweet" button and you can tweet this link by clicking on button </h1>
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="greenecosystem1" data-related="greenecosystem1">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>Once, you added this code to your webpages <head> tag, you can use the tweeter card tester from the link https://cards-dev.twitter.com/validator to make sure, your code is working properly.
Hope this will help.