Adding a Twitter Button and using Twitter Card for tweets

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

SHUFFLED :   Ubuntu commands, package configurations

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.

Android Android Commands Android Java Applications Application Libraries Bash / Shell Scripts Bluetooth driver Build Frameworks Commands and Packages Core Kernel C Programs Development Environment Setup Documents / Books Errors & Failures File Systems Framebuffer / Display Driver git Go Language Programs Hardware Platforms Home Kernel & Device Drivers Kernel Booting and Porting Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL NDK / Middleware / HAL Network Driver OS Concepts PHP Procfs Filesystem Programming Languages RaspberryPi Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Socurce Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized Userspace Utilities Web design and development Wordpress Yocto / Bitbake / Openembedded
Tags:

Leave a Reply