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>
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.