Para incluir el plugin de facebook lo principal es crear una "pagina de facebook" (Este apartado no se explicará en este artículo)
Ir a la url: https://developers.facebook.com/docs/plugins/like-button y construir el código fuente que pondrás en tu web.
Nos devolverá un script
<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/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Que pegaremos despues de la etiqueta </body>
y un código html para que aparezcan los botones "compartir, me gusta..." en función de lo configurado. Este código lo pondremos donde queramos que aparezca los botones.
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
Una vez hecho esto para que al compartir el script seleccione los elementos de la web que queremos debemos "marcar" los elementos del post.
¿Cómo marcar los elementos del post que queremos mostrar?
Para ello usaremos:
The Open Graph protocol
Es un protocolo de marcado que indica al plugin de facebook que imagen de la web debe seleccionar para mostrar en el post, qué titulo....
referencias en: http://ogp.me/
Para usarlo comenzaremos nuestra código html con el encabcezado:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
Y usaremos entre las etiquetas <head> ...</head>
los "tags" para indicar los elementos del post. Podremos consultar todos los tags disponibles en el sitio oficial: http://ogp.me/
Los mas comunes son:
<meta property="fb:admins" content="NUESTRO_ID_DE_FACEBOOK"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="TITULO_DEL_POST"/>
<meta property="og:image" content="http://www.midominio.es/logo.png"/>
<meta property="og:site_name" content="NOMBRE_DEL_SITIO"/>
<meta property="og:url" content="http://www.midominio.es"/>
<meta property="og:description" content="DESCRIPCION DEL POST"/>
podemos usar lenguaje de servidor como *.php para hacer estos valores dinámicos:
ejemplo
<?php
$MI_TITULO = 'VALOR_LEIDO_DE_BD';
echo '<meta property="og:title" content=" ' . $MI_TITULO .' "/>';
?>
facebook tiene habilitada la url: https://developers.facebook.com/tools/debug/og/object/
donde podremos validar nuestro código
¡¡MUY IMPORTANTE!! desarrollar los cambios en el dominio para que funcione correctamente, es decir, no desarrollar en LOCALHOST ni servidor apache propio.
Quedaría algo así:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta property="fb:admins" content="NUESTRO_ID_DE_FACEBOOK"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="TITULO_DEL_POST"/>
<meta property="og:image" content="http://www.midominio.es/logo.png"/>
<meta property="og:site_name" content="NOMBRE_DEL_SITIO"/>
<meta property="og:url" content="http://www.midominio.es"/>
<meta property="og:description" content="DESCRIPCION DEL POST"/>
<html>
<body>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</body>
<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/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</html>
Preguntas frecuentes:
¿Cuál es mi id de facebook?
Cuál es mi perfil URL personal?
Su perfil personal de Facebook URL es la URL se obtiene cuando se hace clic en su nombre en la parte superior izquierda de la página de inicio de Facebook . Debe ser algo como esto :
https://www.facebook.com/JohnDoe
https://m.facebook.com/sally.struthers
https://www.facebook.com/profile.php?id=24353623
Puedes consultarlo en: http://findmyfacebookid.com/
No hay comentarios:
Publicar un comentario