Javascript not running on Facebook iframe

2.1k views Asked by At

I have a django project which is intended for a facebook application. In the project, the invite friends module runs fine in localhost!

Runs fine on localhost

But while it is loaded in facebook application, the javascript responsible for displaying the friends list doesn't work. Although the libraries are properly loaded.

Javascript doesnot run on facebook app

I don't know why it is so. May be some iframe problem. Here is the javascript code

<script type="text/javascript"> 
window.fbAsyncInit = function() {
    FB.init({appId: '460948667348013', cookie: true});

    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
         FB.api('/me', function(response) {
           // alert('Your name is ' + response.name);
           console.log('Your name is ' + response.name);
          init();
         });
      } else if (response.status === 'not_authorized') {
        alert('the user is logged in to Facebook, but has not authenticated your app');
      } else {
        alert('the user is not logged in to Facebook.');
      }
     });  
}
    function init() {
      FB.api('/me', function(response) {
          $("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name + "</div>");       
          $("#jfmfs-container").jfmfs({ 
              max_selected: 15, 
              max_selected_message: "{0} of {1} selected",
              friend_fields: "id,name,last_name",
              pre_selected_friends: [1014025367],
              exclude_friends: [1211122344, 610526078],
              sorter: function(a, b) {
                var x = a.last_name.toLowerCase();
                var y = b.last_name.toLowerCase();
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
              }
          });
          $("#jfmfs-container").bind("jfmfs.friendload.finished", function() { 
              window.console && console.log("finished loading!"); 
          });
          $("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) { 
              window.console && console.log("changed", data);
          });                     

          $("#logged-out-status").hide();
          $("#show-friends").show();
      });
    }              

    $("#show-friends").live("click", function() {
        var friendSelector = $("#jfmfs-container").data('jfmfs');             
        $("#selected-friends").html(friendSelector.getSelectedIds().join(', ')); 
    });                  
    function sendRequest() {
       var friendSelector = $("#jfmfs-container").data('jfmfs');
       var sendUIDs = friendSelector.getSelectedIds().join(', '); 
       // Use FB.ui to send the Request(s)
       FB.ui({method: 'apprequests',
         to: sendUIDs,
         title: 'My Great Invite',
         message: 'Check out this Awesome App!',
       }, callback);
     }
     function callback(response) {
        // alert('callback called');
       var friendSelector = $("#jfmfs-container").data('jfmfs');
       var sendUIDs = friendSelector.getSelectedIds().join(','); 
       var uids = sendUIDs.split(',');
       var query = '';
       for(i=0;i<uids.length;i++){
        if(i==0){
            query =  query + 'to[' + i + ']=' + uids[i];
        }
        else{
        query =  query + '&to[' + i + ']=' + uids[i];
        }
       }
       console.log(query);
       if(response){
        // alert('successful');
        window.location.assign("/?"+ query)
       }
       else{
        alert('failure');
       }

     }

  </script> 

Please help ! I am stuck with this problem.

1

There are 1 answers

1
ShapCyber On BEST ANSWER

The issue may be SSL issues.

Facebook has made many changes in few months ago.

Also you need to keep update with Facebook developer blog.

So I am going to try to explain few things I suspected.

App on Facebook

  1. Your Canvas Page should be https://apps.facebook.com/yourchoosenname

1a. Your Canvas URL should be https://yoursite.com/yourapplication/

Website

http://yoursite.com/

Page Tab

  1. Your Secure Canvas should be https://yoursite.com/yourapplication/

  2. Your Page Tab URL should be https://yoursite.com/yourapplication/

  3. Your Secure Page Tab URL should be https://yoursite.com/yourapplication/

In this case you will need SSL Certificate for site so You can find reliable yet cheap digital certificate from Here .

This mandatory for any Application to work on facebook.

Hope this will help you and others