How to use Twitter web intent and Twitter callback on website widgets

For those whole love to integrate social media with their site for different purpose, Twitter web intent provide some development documents which can be used in website. Twitter intent is something that creates connection with your site and Twitter widgets/plugins.Infact, you can easily create callbacks on tweet or on follow button.

First let me tell you if you want to add a simple tweet button on several places, what you will do?
Normally people use Twitter Button Resource, however I think we could use more better option instead of that.

Twitter has provided JavaScript Interfaces for Twitter for Websites, that allows user to do many stuff using Twitter plugins.First begin by creating a simple tweet button.

The below javascript will be loaded and it will work for all the functions.

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"));

Secondly, every function will be bind under this event:

twttr.ready(function (twttr) {
    // bind events here
}); 

Thirdly, each event that will bind will have different ways to add, like a share button.

<div id="developer"></div>

Now by adding just a element with a class developer will create a share button by the following script.

<script>
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"));
twttr.ready(function (twttr) {
    twttr.widgets.createShareButton(
        'http://bloggerever.com',
    document.getElementById('developer'),
    function (el) {
        console.log("Button created.")
    }, {
        text: 'I love to learn front end development.'
    });
});
</script>

The options for each of the events are well described in the docs provided by Twitter.

Last Words

However, the Twitter has provided all the documents for these events, but the purpose behind this post to give a simple cut idea on how to create some plugins with simple scripts instead of comple stuff.