Like Page to Enable Download File Link

Web developers always try to make their blog more visible to others through search engine optimization, free services and so on. One of the important aspect is liking their blog or site. Liking a facebook page is equally important as subscribing to your rss feed. So developers always try to increase their fan count. Out of the many techniques, a fruitful method will be like to download. Interesting huh? But it works. If you have some corner of site where users can download some stuff, ask the user to like your page to enable download link. This how-to tutorial can help you understand Facebook Javascript SDK, FB.init, FB.getLoginStatus, FB.event.subscribe and FB.api

We will be having mainly 3 files. One html file to write for user interface, css file to style and a js file to use facebook javascript SDK. First lets concentrate on the html file.

I have named the html file as ‘index.html’. Do not worry about the numerous div tags. They are placed for future enhancements. Basic idea is to show a facebook like button and a link to download file. Paste the following code inside body tag.

<div id="container">
    <div id="social-holder">
        <div class="social-icon-holder" id="facebook-like-holder">
            <div id="like-button">
                //here goes the facebook like button code
            </div>
        </div>
    </div>
    <div class="download-holder">
        <a id="download-button" class="download-link" href="file.zip">Download</a>
    </div>
</div>

If you observe the html code, you can see a ‘file.zip’ as the href attribute value of download link. This ‘file.zip’ can be replaced by your download file path. Now by default the hyperlink is enabled. This is to deal with non-javascript browsers. Next we need to give some basic styling and dont ask me how?. I am very poor in designing. Create a css file named ‘download.css’ with following contents.

body{
    text-align: center;
    font-family: arial,sans-serif;
    font-size: 12px;
    background: #999 url('bg.png');
    color: #ccc;
}
#container
{
    height: 400px;
    vertical-align: middle;
    margin-top: 100px;
}
.download-link:link,.download-link:visited
{
    padding: 10px;
    border: 3px solid #999999;
    border-left: 3px solid #cccccc;
    border-top: 3px solid #cccccc;
    height: 60px;
    text-align: center;
    line-height: 50px;
    font-family: 'Terminal Dosis', arial,sans-serif;
    font-size: 55px;
    color: #16CC32;
    text-decoration: none;
    padding-left: 40px;
    padding-right: 40px;
    background: #fff;
    text-shadow: 1px 1px 1px #eee;
}
.download-link:hover
{
    text-shadow: 1px 1px 1px #ccc;
}
.download-link-disabled
{
    padding: 10px;
    border: 3px solid #999999;
    border-left: 3px solid #cccccc;
    border-top: 3px solid #cccccc;
    height: 60px;
    text-align: center;
    line-height: 50px;
    font-family: 'Terminal Dosis', arial,sans-serif;
    font-size: 55px;
    color: #cccccc;
    text-decoration: none;
    padding-left: 40px;
    padding-right: 40px;
    background: #fff;
    text-shadow: 1px 1px 1px #eee;
    cursor: default;
}
.social-icon-holder
{
    width: 172px;
    height: 131px;
    margin-top: 15px;
    background: #fff;
    margin: auto;
}
#facebook-like-holder, #twitter-follow-holder
{
    width: 170px;
    height: 129px;
    border: 1px solid #dcdcdc;
    color: #16CC32;
}
#facebook-like-holder #like-button
{
    position: relative;
    top:33px;
    left: 8px;
}
#social-holder
{
    width: 100%;
    text-align: center;
    float: left;
}
.download-holder
{
    width:100%;
    float: left;
    margin-top: 30px;
}

Next we are going to deal with the real facebook interaction. Since we will be using jQuery for DOM manipulation, add jquery reference inside head tag. Now let us create a js file named ‘facebook-download.js’ and add reference to it after jQuery reference.

Ok. Now come back to index.html. We have left some space inside index.html for including facebook like button. Go to facebook and get the like button code. I suggest you to take the xfbml code for like button.

Add the code as instructed to your page. For that add xmlns attribute to html tag, add div with id root inside ‘like-button’ div. Then add the fb:like tag. Now everything is same till now as given in facebook like button code. But one thing is different. Instead of the script tag provided by facebook like button code, add the following inside ‘like-button’ div.

window.fbAsyncInit = function() {
    afterfbinit();
};
// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

Do not worry about the complexity of code. Just understand that this is a technique of initializing the facebook SDK and once it is initialized, it will call ‘afterfbinit();’ which is a custom function which we are going to write inside  ‘facebook-download.js’

Again pate the below code inside head tag of our ‘index.html’

//global settings
download=false;
$("document").ready(function(){
    //disable download link
    disableDownload();
    //click event of download link
    $('#download-button').click(function(){
        if(!download)
            return false;
    });
});
function enableDownload()
{
    $('#download-button').removeClass('download-link-disabled').addClass('download-link');
}
function disableDownload()
{
    $('#download-button').removeClass('download-link').addClass('download-link-disabled');
}

I will explain what I am trying to do. There is a global variable called ‘download’. It will be set to true or false based on various conditions. Now there are 2 functions to enable and disable download styles. Remember that these 2 functions just change the style not the functionality. Functionality of enabling or disabling download is written inside download link click event. Inside click event, we first check if ‘download’ is true. If its false then we return false from click event.

Now the last part is our custom js file, ‘facebook-download.js’. Paste the following contents to this file:

function afterfbinit(){
    FB.init({
        appId      : '', // App ID
        channelUrl : '', // Channel File
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
    });
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            if (response.authResponse) {
                FB.api('/me/likes/344945255531076', function(response) {
                    if(response.data.length>0)
                    {
                        download=true;
                        enableDownload();
                    }
                    else{
                        download=false;
                        disableDownload();
                    }
                });
            }
        }
    });

    //catch like event
    FB.Event.subscribe('edge.create', function(href, widget) {
        download=true;
        enableDownload();
    });
    //catch unlike event
    FB.Event.subscribe('edge.remove', function(href, widget) {
        download=false;
        disableDownload();
    });
}

Here the entire file contents are inside ‘afterfbinit’ function. This function first user FB.init to initalize our app. Please provide needed appid and channel url. AppId can be obtained from Facebook developer site. FB.getLoginStatus check the login status of current user. If the user is already logged in, we check if the user has already  liked this page. If yes, we enable the download link. FB.Event.subscribe tracks the click event of like button. It can recognize the liking and disliking clicks using edge.create and edge.remove. Again based on these clicks we enable or disable the download link.