pues vamos a empezar con algo que esta siendo muy usado y lo haremos
unicamente usando javascript
primeramente tenemos que crear una aplicacion en facebook
para obtener el API KEY
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var fb = {
config :{
app_id : 'INGRESAR LA ID DE APLICACION',
use_xfbml : true,
extendPermissions : 'email, read_friendlists' ,
locale : 'es_ES'
},
login : function (callback){
FB.login(function(r) {
if (r.status == 'connected') {
FB.api('/me/permissions',function(perm){
fb.logged = true;
fb.perms = [];
for(i in perm.data[0]){
if (perm.data[0][i] == 1){
fb.perms.push(i);
}
}
});
fb.getUser(callback);
} else {
fb.logged = false;
fb.perms = [];
callback();
}
},{scope:fb.config.extendPermissions});
return false;
},
syncLogin : function (callback){
if (!callback) callback = function(){};
FB.getLoginStatus(function(r) {
if (r.status == 'connected' ) {
FB.api('/me/permissions',function(perm){
fb.logged = true;
fb.perms = [];
for(i in perm.data[0]){
if (perm.data[0][i] == 1){
fb.perms.push(i);
}
}
});
fb.getUser(callback);
return true;
} else {
fb.logged = false;
callback();
return false;
}
});
},
getUser : function(callback){
FB.api('/me', function(r){
var user = r;
user.picture = "https://graph.facebook.com/"+user.id+"/picture?type=large";
fb.user=user; callback(user);
});
},
getFriends : function(callback){
FB.api('/me/friends', function(r){
callback( r.data );
})
},
sendMessage : function(to, requestCallback){
FB.ui({
method:'send',
to: to,
link: 'INGRESE UNA URL VALIDA'
}, requestCallback );
},
readyFuncs : [],
ready: function(func){fb.readyFuncs.push(func)},
launchReadyFuncs : function () {for(var i=0,l=fb.readyFuncs.length;i<l;i++){fb.readyFuncs[i]();};}
}
window.fbAsyncInit = function() {
if (fb.config.app_id) FB.init({appId: fb.config.app_id, status: true, cookie: true, xfbml: fb.config.use_xfbml});
fb.syncLogin(fb.launchReadyFuncs);
};
var oldload = window.onload;
window.onload = function() {
var d = document.createElement('div'); d.id="fb-root"; document.getElementsByTagName('body')[0].appendChild(d);
var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/'+fb.config.locale+'/all.js';
document.getElementById('fb-root').appendChild(e);
if (typeof oldload == 'function') oldload();
};
</script>
<script>
var user_fb = null;
var pubnub, channels_subscribe, channels_publish;
$(document).ready(function(){
setTimeout(function(){ loadinvitefb(); },2000);
});
function sendmsg(id_user){
var URL_HIDDEN = 'INGRESE LA URL QUE USO EN LA CONFIGURACION DE LA API';
fb.sendMessage(id_user, function(data){
if(data){
$.post(URL_HIDDEN+'SendInvite',{UserIdInvite: id_user, Type: 4 }, function(data){
channels_publish = ['channel_thebosslife_'+data.UserIdentify];
sendPush(channels_publish);
}, 'json');
//$this.parent().remove();
}
});
}
function loadinvitefb(){
if(fb.ready){
if(fb.logged){
fb.getFriends(function(data){
if(data != ''){
for( i in data){
$('#ul_notificacion').append('<li data-id="'+data[i].id+'">'+
'<span class="foto"><img src="https://graph.facebook.com/'+data[i].id+'/picture?width=72&height=72" /></span>'+
'<span class="nombre">'+data[i].name+'</span>'+
'<input type="button" class="btn_ok btn_invitar_facebook" onclick=\'sendmsg("'+data[i].id+'")\' value="Invitar" />'+
'<br style="clear: both;" /></li>');
}
}
});
}else{
fb.login(function(){
if(fb.logged){
fb.getFriends(function(data){
if(data != ''){
for(i in data){
$('#ul_notificacion').append('<li data-id="'+data[i].id+'">'+
'<span class="foto"><img src="https://graph.facebook.com/'+data[i].id+'/picture?width=72&height=72" /></span>'+
'<span class="nombre">'+data[i].name+'</span>'+
'<input type="button" class="btn_ok btn_invitar_facebook" onclick=\'sendmsg("'+data[i].id+'")\' value="Invitar" />'+
'<br style="clear: both;" /></li>');
}
}
});
}
});
}
}
}
</script>
<ul id="ul_notificacion">
</ul>
como pueden observar todo esta creado por javascript y jquery