How To Create Tweet & Follow Button In Your Web Application


Twitter is great for sharing interesting things you find on the web. In fact, close to a quarter of all Tweets include a link in them. Despite the high volume of sharing, there is plenty of room to make it easier.
So, I have recently created “Share on Twitter” functionality in my application. Now you can use this functionality too with yours application.

Lets quickly start to add Tweet Button
For try out your button, you just copy and paste the below code into the HTML
where you want to add tweet button.

 
<a target="_blank" id="b" class="" 
href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&amp;
text=@TwitterTweet.setMesasgeForTweet(job)">
<i></i>
<span id="l" class="">
<img src="@routes.Assets.at("images/twitter.png")" alt="Tweet" title="Click to share on Twitter"/>
</span>
</a>
<script>!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>

Note : In above code you can configure tweet button accordingly, For ex.
text: You can give Tweeting contents within text.
image: Under img src you can give tweet button image which one you like

Once you add above code in your application then you can get tweet button functionality with your application. After clicking tweet button following twitter signin window appear,

tweetsignup

After Sign in tweet window appear as given below

tweet

Same as Tweet Button you can also create Follow Button for Twitter.
For achieve this functionality you can just copy and paste below code in your html.

<a href="https://twitter.com/singhsomvanshi" class="twitter-follow-button" data-show-count="false">Follow @singhsomvanshi</a>
<script>!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>

Following window look like as below

Following

I hope you will enjoy using this Tweeting and following button funtionality in your web application. Please try this out for yourself to see how it works.

About anuj2013

Software Consultant At Knoldus Software LLP
This entry was posted in Web and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s