my github
english | español
Waldo Urribarri HOME PROJECTS ABOUT ME


Utiliza Open Graph E Insights De Facebook En Tu Página Web: Parte II

Ahora que has probado las metatags de Open Graph, utilizaremos el Javascript SDK de Facebook para poner a funcionar los Likes y cajas de comentarios. Ten en mente que esto sólo cubrirá lo más básico. Si quieres conocer mucho mas sobre el tema, haz click aquí .

Lo primero que necesitas es un channel.php en tu página. Facebook amablemente nos da el código a utilizar:

<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>

Así que, ¿Qué demonios es un channel.php? Bueno, según Facebook tenerlo "mejora el rendimiento del JS SDK abordando problemas de comunicación entre dominios en ciertos exploradores"... ¿Qué significa? No necesito saberlo. Sólo hice un channel.php y lo coloqué en mi carpeta raíz. Si quieres cambiar el lenguaje de SDK, puedes realizarlo donde dice "...connect.facebook.net/en_US/...".

Ahora, ve y edita tu página de pruebas y pega este código justo después de que habras el tag BODY.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.php', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>

Ahora, coloca la locación de tu channel.php en la propiedad channelURL, y una id de aplicación. ¿De qué aplicación? Bueno, de la que vamos a crear. Ve a http://developers.facebook.com/ y regístrate como desarrollador. Luego debes hace click en "Apps" en la parte superior de la página. Eso te llevará a la lista de aplicaciones que has creado. Ahora has click en "Crear nueva aplicación". Escribe el nombre de la aplicación y namespace. Yo coloqué waldo.com y waldourr. Cuando crees tu aplicación, selecciona su App ID/API Key y colocala en la propiedad appId. Eso es todo.

Ahí tienes. Ahora si quieres colocar un botón de Like, créalo usando este código:

<fb:like ref="REFERENCIA" href="URLAHACERLIKE" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>

Por supuesto si quieres conocer todos los parámetros o cambiar algo, puedes crear el código con la ayuda de esta página: LINK.

Para ver los gráficos de tu página, entra en http://www.facebook.com/insights/ e introduce tu dominio para registrarlo a tu página de Facebook Insights.

Después que coloques el código en tu página, haz click en el botón de Like, y tu página de Facebook Insights reflejará el mismo. ¿Cool verdad? Pues, será más útil luego que tengas más tráfico.

En cuanto a la caja de comentarios, ahora es simplemente cuestión de colocar este código:

<div class="fb-comments" data-href="LAURLQUEDESEASCOMENTAR" data-width="600" data-num-posts="5"></div>

De nuevo, si quieres cambiar sus propiedades, utiliza esta página: LINK.

Se que esto es muy muy básico, así que si quieres alguna funcionalidad extra o utilizar otros plugins sociales, la mejor forma es leer la documentación de la página de Desarrolladores de Facebook.


www.000webhost.com