Question

I want to create a joomla menu-item that will display its content if the user has liked a specific page on facebook.

I dont want people to like a facebook application, but a facebook page. Facebook offers this code:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxx', // App ID
      channelUrl : 'xxxxxxxxxxxxxx/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
  FB.Event.subscribe('auth.authResponseChange', function(response) {
    if (response.status === 'connected') {
      testAPI();
    } else if (response.status === 'not_authorized') {
      FB.login();
    } else {
      FB.login();
    }
  });
  };

  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Good to see you, ' + response.name + '.');
    });
  }
</script>

but this forces the users to like a app.

Everything im finding on web is similar. any suggestions? tutorials?

Thanks in adv.

Edit: Ok, so here is the complete code in case anyone needs it. There is just a problem: the query that asks if a user likes this page returns wrong result...any idea?

<?php
defined('_JEXEC') or die;
?>
<link href="modules/mod_facebook/tmpl/css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
      div#container_notlike, div#container_like {
        display: none;
      }
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script>

$(document).ready(function() {
    $("body").prepend( "<div id='erresira'></div>" );
    var window_h = $(window).height()/2;
    var window_w = $(window).width()/2;

    $("#popup").css({top:window_h,left:window_w});

    $("#popup").animate({
            left: "-=230px",
            width: "+=460px",
            top: "-=112px",
            height: "+=224px"
            }, 0 );
});
</script>

<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {

    FB.init({
      appId      : 'XXXXXXXXXX', // App ID
      channelUrl : 'XXXXXXXXXXXXXXXXXXXXXXXXXx/channel.', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });



  FB.Event.subscribe('auth.authResponseChange', function(response) {
    if (response.status === 'connected') {
      allowed();
    } else if (response.status === 'not_authorized') {
      FB.login();
    } else {
      FB.login();
    }
  });


 FB.Event.subscribe('edge.create', function(response) {
  $('#container_like').show();
  $("#erresira").remove();
  $("#popup").remove();
  $('#container_notlike').hide(); 
}); 

  };

  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));

  function allowed() {
    $('#app').hide();
    FB.getLoginStatus(function(response) {
            var page_id = "184393808323569";
            var user_id = response.authResponse.userID;
            console.log('Good to see you, ' + user_id + '.');
            var fql_query = "SELECT uid FROM page_fan WHERE page_id = " + page_id + "and uid = " + user_id;
            FB.Data.query(fql_query).wait(function(rows) {
              if (rows.length == 1 && rows[0].uid == user_id) {
                $('#container_like').show();
                $('#container_notlike').hide(); 
                $("#erresira").remove();
                $("#popup").remove();
              } else {
                $('#container_like').hide();
                $('#container_notlike').show(); 
              }
            });
        });
  }
</script>
<div id="popup">
    <div id="login">
                <img src="<?=$params->get('image');?>" />
                <p><strong><?=$params->get('content');?></strong></p>

        <div id="app"><fb:login-button show-faces="true" width="300" max-rows="10"></fb:login-button></div>
                <br/>
                <div id="like"><fb:like href="https://www.facebook.com/ICBank.Albania" width="330" show_faces="false" send="false"></fb:like></div>
    </div>
</div>
<div id="container_notlike">
      YOU DONT LIKE US :(
    </div>

    <div id="container_like">
      YOU LIKE US :)
    </div>
Was it helpful?

Solution

You'll need to have them approve an app so that you can run a query to see if they like your page or not. If they like your page, show these options. If they don't, then don't.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top