How to create a tweet gate on a link using Twitter web intent?

About a week before I'd shared an article related to Twitter web intent.That shows how to create a interactive Twitter plugins using simple scripts.In this tutorial I'm going to share how to create a tweet gate way on a link i.e when user tweets then only it can excess to link else it won't be able to get though it.

Before moving on let me recommend you to have a look on my previous web intent article.
Importance of tweet gate way:

• Your link will be tweet.
• Can be use in a download of a freebie.
• User cannot copy link from the button.

For Demo I've created a button on this page,have a look.

Firstly,it is necessary to add the Twitter web intent script to make it work that is:

window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

Then add the HTML like this one:

<span class="link">Click Here</span>
<div class="tweet-box">
<h2>
Tweet to open link</h2>
<span id="tweetthis"></span>
</div>

Now by using Twitter intent event we will add the tweet button in #tweetthis and you have to make sure that the .link button should not be a link because if it would be a link then the user will copy the link without tweeting the tweet.That is why I am going to redirect the page on tweet using another function.

Further, add a function to first add a tweet button.For that use the following code:

twttr.ready(function (twttr) {
twttr.widgets.createShareButton(
  'http://bloggerever.com',
  document.getElementById('tweetthis'),
  function (el) {
    console.log("Button created.")
  },
  {
    count: 'none',
    text: 'Blogger Ever is a developers blog.'
  }
);
});

The above code will only create a tweet button not anything else.For this change the link http://bloggerever with your desire link to share in tweet and the text too.Further detail and options are provided by Twitter in its Twitter web intent documentations.

Now our first phase is complete now let add the script because of which the page will be redirected to a specific page.Before that let me tell you that you can do any callback function on tweet,I am sharing redirecting link but you can use it for many purposes.Add the following code

twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
var url = "http://bloggerever.com";  
$(location).attr('href',url);
});

Change the value of variable URL with your URL on which the page will be redirected.If you have observed the HTML of this script then you have found that the tweet button will be visible when the window will be loaded.So for this issue, change the CSS of the buttons that is tweet box and add some style in your button.

<style>
.link{
padding:7px;
background:#00bfff;
color:#fff;
}
.tweet-box{
display:inline-block;
margin:15px;
padding:15px;
border:1px solid #00bfff;
background:#00cfff;
display:none;
}
</style>

On button click the box appears with the following code:

$(document).ready(function(){
$('.link').click(function(){
$('.tweet-box').slideDown();
});
});

Sum up

First the button will be clicked and the tweet box will appear,in which a tweet button will be present.On tweet a callback will return and will redirect the page.

Further Advices

• You can use popup for your tweet box instead of it appears below the page.For popup read my previous article that describes how to create popup.
• Other uses of this gate are submission of form.