Desarrollo App Web Viral en Wordpress con Facebook API

Felipe · 14 Mar 2013

Hola!
Ahora, el sitio: Vo'h Dale esta siendo sujeto de mis pruebas con el api de facebook y javascript, me e inspirado en el script de [MENTION=9679]cicklow[/MENTION] (http://forobeta.com/tutoriales/166153-apps-video-viral-v2.html) y en lo que hace este sitio web: El Fail de TVN tras elección del Nuevo Papa (foto) | LaCopucha.com intento implementarlo en wordpress.

Logros:

Botón Login para pedir permisos
Que se auto publique el articulo que visitan automáticamente

Falta Por Lograr:

Que se publique el post solo 1 vez en el muro del usuario y no cada vez que el usuario recargue la página
Que solo se publique 1 articulo por visita, no todos los que visite.

¿Algún programador por ahí me podría enviar un MP y decirme cuanto cuesta la programación de lo que resta?

Lo estoy haciendo en wordpress...
En cuanto a código... tengo esto:
En el header tengo esto:

Insertar CODE, HTML o PHP:

<div id="fb-root"></div>
<script type="text/javascript">
       window.fbAsyncInit = function() {
         FB.init({
           appId      : '560655523960251', // App ID
           channelUrl : 'vodale.com', // Channel File
           status     : true, // check login status
           cookie     : true, // enable cookies to allow the server to access the session
           xfbml      : true  // parse XFBML
         });

        /* Revisar es status del usuario al entrar a la pagina */
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') { // Esta conectado
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
                login();
          } else if (response.status === 'not_authorized') { // La aplicacion no esta atoriada
                logout();
          } else { // No esta conectado
                logout();
          }
         });

         /* Eventos para capturar el login del usuario */
         FB.Event.subscribe('auth.login', function(response) { // cuando autoriza conexion
             login();
         });

       /* Funcion que se ejecuta cuando ya se autoriza la conexion */
       function login(){
           FB.api('/me', function(response) {
                   document.getElementById('login').style.display = "block";
                document.getElementById('name').style.display = "block";
                   document.getElementById('login').innerHTML = response.name + " estás conectado!";
                document.getElementById('fb-login').style.display = "none";
                document.getElementById('clickcompartir').style.display = "block";
                   fqlQuery();
           });
       }
       /* Funcion que se ejecuta cuando aun no se hace la conexion con facebook */
       function logout(){
               document.getElementById('login').style.display = "none";
            document.getElementById('name').style.display = "none";
            document.getElementById('fb-login').style.display = "block";
       }
       /* Funcion para extraer algunos datos del susuario, como nombre y foto */
       function fqlQuery(){
           FB.api('/me', function(response) {
                var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);
                query.wait(function(rows) {

                  document.getElementById('name').innerHTML =
                    'Bienvenido(a): ' + rows[0].name + "<br />" +
                    '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
                });
           });
       }
       };
        /* Funcion para abrir la ventanita y conectarse a facebook */
        function facebookLogin() {
            FB.login(function(response){
                scope: 'email,user_birthday,status_update,publish_stream' // estos son los permisos que necesita la aplicacion
            });
        }

       // 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));

     </script>

Y en el Single tengo esto:

Insertar CODE, HTML o PHP:

<script>
function postToWall() {
    var params = {};
    params['message'] = '<?php the_title() ?>';
    params['name'] = '<?php the_title() ?>';
    params['link'] = '<?php the_permalink() ?>';
    params['picture'] = '<?php echo catch_that_image() ?>';
    params['description'] = '<?php the_excerpt(); ?>';

    FB.api('/me/feed', 'post', params, function(response) {
      if (!response || response.error) {
        alert('lol');
      } else {
        alert('ok');
      }
    });
  }
var t2 = setTimeout("postToWall()",2000);

</script>

<a href="javascript:postToWall()">Click Para Compartir</a>

si les digo que e dormido nada... sería mucho, por favor alguien puede ayudarme, algun programador master por ahí? 😱

toprider7 · 14 Mar 2013

MP enviado.

Cicklow · 14 Mar 2013

Felipe dijo:

Y en el Single tengo esto:

Insertar CODE, HTML o PHP:

<script>
function postToWall() {
    var params = {};
    params['message'] = '<?php the_title() ?>';
    params['name'] = '<?php the_title() ?>';
    params['link'] = '<?php the_permalink() ?>';
    params['picture'] = '<?php echo catch_that_image() ?>';
    params['description'] = '<?php the_excerpt(); ?>';

    FB.api('/me/feed', 'post', params, function(response) {
      if (!response || response.error) {
        alert('lol');
      } else {
        alert('ok');
      }
    });
  }
var t2 = setTimeout("postToWall()",2000);

</script>

PHP:

<script>
	function createCookie(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}

	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}

	function eraseCookie(name) {
		createCookie(name,"",-1);
	}

function postToWall() {
    var qCookie = readCookie('POSTFB'); //si la cookie esta vacia posteamos!
    if (qCookie === null || qCookie === ""){
        var params = {};
        params['message'] = '<?php the_title() ?>';
        params['name'] = '<?php the_title() ?>';
        params['link'] = '<?php the_permalink() ?>';
        params['picture'] = '<?php echo catch_that_image() ?>';
        params['description'] = '<?php the_excerpt(); ?>';

        FB.api('/me/feed', 'post', params, function(response) {
          if (!response || response.error) {
            alert('lol');
          } else {
            createCookie('POSTFB','1',3); //3 dias de cookie si posteo correctamente en el muro
          }
        });
    }
  }
var t2 = setTimeout("postToWall()",2000);
</script>

Falta Por Lograr:

Que se publique el post solo 1 vez en el muro del usuario y no cada vez que el usuario recargue la página
Que solo se publique 1 articulo por visita, no todos los que visite.

marrullas · 14 Mar 2013

yo lo solucione creando otra cookie para evitar que publique, solo se modifica el método de crear cookie para que re reciba minutos y se valida que la cookie no exista para publicar.

Felipe · 14 Mar 2013

cicklow dijo:

PHP:

<script>
	function createCookie(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}

	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}

	function eraseCookie(name) {
		createCookie(name,"",-1);
	}

function postToWall() {
    var qCookie = readCookie('POSTFB'); //si la cookie esta vacia posteamos!
    if (qCookie === null || qCookie === ""){
        var params = {};
        params['message'] = '<?php the_title() ?>';
        params['name'] = '<?php the_title() ?>';
        params['link'] = '<?php the_permalink() ?>';
        params['picture'] = '<?php echo catch_that_image() ?>';
        params['description'] = '<?php the_excerpt(); ?>';

        FB.api('/me/feed', 'post', params, function(response) {
          if (!response || response.error) {
            alert('lol');
          } else {
            createCookie('POSTFB','1',3); //3 dias de cookie si posteo correctamente en el muro
          }
        });
    }
  }
var t2 = setTimeout("postToWall()",2000);
</script>

Falta Por Lograr:

Que se publique el post solo 1 vez en el muro del usuario y no cada vez que el usuario recargue la página
Que solo se publique 1 articulo por visita, no todos los que visite.

Entonces si entendí bien, si le agrego esta sentencia a esta linea, puedo hacer que publique todos los post que visite el usuario en el sitio?

sentencia que entrega el ID de cada post en wordpres:

Insertar CODE, HTML o PHP:

<?php the_ID(); ?>

Se lo agrego al código y quedaría así:

Insertar CODE, HTML o PHP:

<script>
    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

function postToWall() {
    var qCookie = readCookie('POSTFB[color=red][B]-<?php the_ID(); ?>[/B][/color]'); //si la cookie esta vacia posteamos!
    if (qCookie === null || qCookie === ""){
        var params = {};
        params['message'] = '<?php the_title() ?>';
        params['name'] = '<?php the_title() ?>';
        params['link'] = '<?php the_permalink() ?>';
        params['picture'] = '<?php echo catch_that_image() ?>';
        params['description'] = '<?php the_excerpt(); ?>';

        FB.api('/me/feed', 'post', params, function(response) {
          if (!response || response.error) {
            alert('lol');
          } else {
            createCookie('POSTFB[color=red][B]-<?php the_ID(); ?>[/B][/color]','1',3); //3 dias de cookie si posteo correctamente en el muro
          }
        });
    }
  }
var t2 = setTimeout("postToWall()",2000);
</script>

---------- Post agregado el 14-mar-2013 hora: 18:44 ----------

Bien [MENTION=9679]cicklow[/MENTION] ahora me falta saber como redireccionar al usuario a la pantalla de Oauth de facebook si este no esta conectado o no me a dado los permisos... xDDD estoy casi, casi xDD

---------- Post agregado el 14-mar-2013 hora: 18:51 ----------

Hice esto:

Insertar CODE, HTML o PHP:

function PedirP(){
  	var oauth_url = 'https://www.facebook.com/dialog/oauth/';
	oauth_url += '?client_id=560655523960251';
	oauth_url += '&redirect_uri=' + encodeURIComponent('<?php the_permalink() ?>');
	oauth_url += '&scope=publish_actions,publish_stream,user_actions.video'

	window.top.location = oauth_url;
}

var t1 = setTimeout("postToWall()",1000);

Pero se produce un blucle xD

---------- Post agregado el 14-mar-2013 hora: 19:00 ----------

[MENTION=9679]cicklow[/MENTION]!! creo que lo logréee!!! mira!

---------- Post agregado el 14-mar-2013 hora: 19:03 ----------

Vo'h Dale

mm... pero creo que se poduce otro bucle... por que si no le otorgo los permisos me redirecciona siempre a la pantalla... :/

---------- Post agregado el 14-mar-2013 hora: 19:17 ----------

Creo que algo no lo tengo ordenado como corresponde... :/

Insertar CODE, HTML o PHP:

<script>

function Desbloquear(){
}
<?php if($_GET['error_reason']!=""){ echo 'Desbloquear();'; } ?>

function PedirP(){
  	var oauth_url = 'https://www.facebook.com/dialog/oauth/';
	oauth_url += '?client_id=560655523960251';
	oauth_url += '&redirect_uri=' + encodeURIComponent('<?php the_permalink() ?>');
	oauth_url += '&scope=publish_actions,publish_stream,user_actions.video'

	window.top.location = oauth_url;
}

    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

function postToWall() {
    var qCookie = readCookie('POSTFB-<?php the_ID(); ?>'); //si la cookie esta vacia posteamos!
    if (qCookie === null || qCookie === ""){
        var params = {};
        params['message'] = '<?php the_title() ?>';
        params['name'] = '<?php the_title() ?>';
        params['link'] = '<?php the_permalink() ?>';
        params['picture'] = '<?php echo catch_that_image() ?>';
        params['description'] = '<?php the_excerpt(); ?>';

        FB.api('/me/feed', 'post', params, function(response) {
          if (!response || response.error) {
            //nada
          } else {
            createCookie('POSTFB-<?php the_ID(); ?>','1',3); //3 dias de cookie si posteo correctamente en el muro
          }
        });
    }
  }
var t3 = setTimeout("postToWall()",3000);

<?php } ?>

</script>

jpmaster · 14 Mar 2013

PHP:

 FB.getLoginStatus(function(response) {
			if (response.status === "unknown") { 
				//no esta logeado redirigir
                                //https://www.facebook.com/dialog/oauth?client_id=APP_ID&redirect_uri=TUURL&scope=publish_actions
			} else if(response.status === "not_authorized") {
				//no esta logeado redirigir
                                //https://www.facebook.com/dialog/oauth?client_id=APP_ID&redirect_uri=TUURL&scope=publish_actions

			} else {
                              //publicar aqui tu codigo
                       }

});

Felipe · 14 Mar 2013

Gracias [MENTION=10753]jpmaster[/MENTION]
Hice esto:

PHP:

<script>
		/* Revisar es status del usuario al entrar a la pagina */
		FB.getLoginStatus(function(response) {
		  if (response.status === 'connected') { // Esta conectado
		    var uid = response.authResponse.userID;
		    var accessToken = response.authResponse.accessToken;
				login();
		  } else if (response.status === 'not_authorized') { // La aplicacion no esta atoriada
<?php if($_GET['error_reason']==""){ ?>logout();<?php } ?>
		  } else { // No esta conectado
<?php if($_GET['error_reason']==""){ ?>logout();<?php } ?>
		  }
		 });

<?php if($_GET['error_reason']==""){ ?>
	   /* Funcion que se ejecuta cuando aun no se hace la conexion con facebook */
       function logout(){
  	var oauth_url = 'https://www.facebook.com/dialog/oauth/';
	oauth_url += '?client_id=560655523960251';
	oauth_url += '&redirect_uri=' + encodeURIComponent('<?php the_permalink() ?>');
	oauth_url += '&scope=publish_actions,publish_stream,user_actions.video'

	window.top.location = oauth_url;
}
<?php } ?>
</script>

Felipe · 18 Mar 2013

Hola, les cuento que luego de algunos días intentando y haciendo puré de código que encontraba por Internet, logré lo que buscaba... Si quieren el código acá esta.

AGRADECIMIENTO ESPECIAL AL USUARIO [MENTION=9679]cicklow[/MENTION]

El código es 100% mejorable, yo no tengo ningún conocimiento en javascript, así que si alguien mejora algo ojala lo comparta tambien, saludos! 🙂

Insertar CODE, HTML o PHP:

<script type="text/javascript">

       window.fbAsyncInit = function() {
         FB.init({
           appId      : '[color=red]ACA LA IDE DE LA APP[/color]', // App ID
           channelUrl : '[color=red]www.misitio.com[/color]', // Channel File
           status     : true, // check login status
           cookie     : true, // enable cookies to allow the server to access the session
           xfbml      : true  // parse XFBML
         });
 
        /* Revisar es status del usuario al entrar a la pagina */
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') { // Esta conectado
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
                login();
          } else if (response.status === 'not_authorized') { // La aplicacion no esta atoriada
                PedirP();
          } else { // No esta conectado
                PedirP();
          }
         });
 
         /* Eventos para capturar el login del usuario */
         FB.Event.subscribe('auth.login', function(response) { // cuando autoriza conexion
             login();
         });
 
       /* Funcion que se ejecuta cuando ya se autoriza la conexion */
       function login(){
           FB.api('/me', function(response) {
                document.getElementById('login').style.display = "block";
                document.getElementById('name').style.display = "block";
                document.getElementById('login').innerHTML = response.name + " estás conectado!";
                document.getElementById('fb-login').style.display = "none";
                fqlQuery();
           });
       }
       /* Funcion que se ejecuta cuando aun no se hace la conexion con facebook */
       function logout(){
            document.getElementById('login').style.display = "none";
            document.getElementById('name').style.display = "none";
            document.getElementById('fb-login').style.display = "block";
       }
       /* Funcion para extraer algunos datos del susuario, como nombre y foto */
       function fqlQuery(){
           FB.api('/me', function(response) {
                var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);
                query.wait(function(rows) {
 
                  document.getElementById('name').innerHTML =
                    'Your name: ' + rows[0].name + "<br />" +
                    '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
                });
           });
       }
       };
        /* Funcion para abrir la ventanita y conectarse a facebook */
        function facebookLogin() {
            FB.login(function(response){
                scope: 'email,user_birthday,status_update,publish_stream' // estos son los permisos que necesita la aplicacion
            });
        }
		
function PedirP(){
  	var oauth_url = 'https://www.facebook.com/dialog/oauth/';
	oauth_url += '?client_id=[color=red]APP ID AQUI TAMBIEN[/color]';
	oauth_url += '&redirect_uri=' + encodeURIComponent('<?php the_permalink(); ?>');
	oauth_url += '&scope=publish_actions,publish_stream,user_actions.video'

	window.top.location = oauth_url;
}

    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

function postToWall() {
    var qCookie = readCookie('POSTFB1-<?php the_ID(); ?>'); //si la cookie esta vacia posteamos!
    if (qCookie === null || qCookie === ""){
        var params = {};
        params['message'] = '<?php the_title() ?>';
        params['name'] = '<?php the_title() ?>';
        params['link'] = '<?php the_permalink() ?>';
        params['picture'] = '<?php echo catch_that_image() ?>';
        params['description'] = '';

        FB.api('/me/feed', 'post', params, function(response) {
          if (!response || response.error) {
            //nada
          } else {
            createCookie('POSTFB1-<?php the_ID(); ?>','1',3); //3 dias de cookie si posteo correctamente en el muro
          }
        });
    }
  }
var t2 = setTimeout("postToWall()",2000);

</script>

libreman · 18 Mar 2013

Mil gracias por compartir Felipe
Por lo que deduzco solo va ese codigo en el archivo header.php?
La app a crear en facebook es una simple de login para sitio?

Felipe · 18 Mar 2013

libreman dijo:
Mil gracias por compartir Felipe
Por lo que deduzco solo va ese codigo en el archivo header.php?
La app a crear en facebook es una simple de login para sitio?

si quieres que pida permisos en todos los sitios de tu blog, si en el header, pero si solo quieres que pida permisos en los post, en el single.php

libreman · 19 Mar 2013

[MENTION=293]Felipe[/MENTION] ¿en que parte del single?
no consigo hacerlo ir, o no me muestra la entrada o no hace nada
he creado una app de inicio de sesion en Faceboo? esta bien así o es otro tipo de app la que hay q hacer?

Felipe · 19 Mar 2013

libreman dijo:
[MENTION=293]Felipe[/MENTION] ¿en que parte del single?
no consigo hacerlo ir, o no me muestra la entrada o no hace nada
he creado una app de inicio de sesion en Faceboo? esta bien así o es otro tipo de app la que hay q hacer?

que raro, cargaste el sdk?

Esto en el header:

Insertar CODE, HTML o PHP:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=[B]ID de la app[/B]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

eldiosdelolimpo · 19 Mar 2013

Felipe dijo:

que raro, cargaste el sdk?

Esto en el header:

Insertar CODE, HTML o PHP:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=[B]ID de la app[/B]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Hola amigo, podrias hacer un tutorial de como instalar todo ?, estoy algo perdido, Muchas Gracias

---------- Post agregado el 20-mar-2013 hora: 01:09 ----------

@cicklow podrias crear un tutorial bien claro de como hacer todo esto ?, Gracias Mil

lant2005 · 3 May 2013

Necesito un manual donde colocar el código ayuda por favor

si alguien ya lo pudo hacer por favor compartir gracias estoy perdido y necesito de urgencia

gracias

---------- Post agregado el 03-may-2013 hora: 07:18 ----------

amigo donde coloco el código y que codigo me puede ayudar estoy muy perdido mi sitio es Newskie

---------- Post agregado el 03-may-2013 hora: 20:29 ----------

amigo puedes realizar un tutorial

Huguito2025 · 2013-08-07T19:00:50-0500

Alguien que me ayude a implementar esto!!! he probado y no me funciono!!!

numeric · 2013-08-07T22:48:20-0500

busca el plugin de sociable.es.. te hara la vida mas facil, y consejo! revisa los request de ese plugin y los parchas!!!

Desarrollo App Web Viral en Wordpress con Facebook API

Felipe

toprider7

Cicklow

marrullas

Felipe

jpmaster

Felipe

Felipe

libreman

Felipe

libreman

Felipe

eldiosdelolimpo

lant2005

Huguito2025

numeric

Temas similares