domingo, 2 de octubre de 2011
Botones para Compartir de Facebook
1.- Utilizar un botón/script de Facebook
Facebook tiene una cosa que le llaman el "Share Button", que crea este botón por su propia cuenta al insertar un enlace y un script en tu página web. Esta manera de actuar es interesante, pues estos botones son bastante "inteligentes" y proveen de un contador de personas que enviaron tu enlace a la red social, aparte de la propia funcionalidad de compartir. Además, el servicio se puede configurar para que muestre distintos tipos de botones, que podemos elegir en función del aspecto que tenga nuestra página.
Es quizás la manera más adecuada de colocar el botón, pero tiene el inconveniente de no permitir personalizar la imagen o botón que se va a utilizar (o por lo menos en el momento de escribir este artículo no existe esta opción). Por ello, si queremos utilizar un botón con aspecto personalizado, tendremos que buscar otra solución.
Todas las instrucciones para conseguir implementar este botón en tu web están en la Wiki de desarrolladores de Facebook, en la página que trata sobre Facebook Share.
El código HTML para insertar un botón de los que provee Facebook tendrá esta forma:
Además, podemos seleccionar el tipo de botón a utilizar entre varias posibilidades, con el atributo "type" en el enlace.
El atributo del enlace "share_url" es opcional y sirve para indicar la URL que queremos que se comparta. Pero si no indicamos nada en ese atributo se enviará a Facebook la URL de la página donde se ha colocado el botón.
Además, si queremos que dentro del botón esté escrito un mensaje personalizado, podemos poner texto en el enlace, algo así como:
2.- Enlace simple de enviar a Facebook
Otra variante que podemos implementar, si es que deseamos personalizar el botón de enviar a Facebook es crear un enlace normal, dirigido a la URL para compartir en Facebook.
En este caso se crearía un enlace y en el texto aparecería "Compartir FB", y claro, si queremos utilizar nuestro propio icono en vez de ese texto, dentro pondríamos la imagen que deseamos.
3.- Enlace que se abra en un popop
Este código se podría alterar un poco para que este enlace se abra en una ventana secundaria o popup. Para ello tenemos que utilizar un poco de Javascript por nuestra cuenta.
Botón Me Gusta de Facebook
Al igual que el botón permite al usuario compartir su contenido con tus amigos en Facebook. Cuando el usuario hace clic en el botón igual que en su sitio, una historia aparece en el News Feed los amigos del usuario "con un enlace a su sitio web.
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="facebook.com/Nombre_de_la_Organizacion" data-send="true" data-width="450" data-show-faces="true"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Comentarios de Facebook
Caja de comentarios es un plugin social que permite al usuario comentar en su sitio. Las características incluyen herramientas de moderación y de distribución.
Relevancia social: apartado de comentarios utiliza señales sociales a la superficie de los comentarios más alta calidad para cada usuario. Los comentarios están ordenados para mostrar a los usuarios los comentarios más relevantes de los amigos, amigos de amigos, y los temas de discusión que más le gustaba o activo, mientras que los comentarios marcados como spam se oculta a la vista.
Distribución: Los comentarios se pueden compartir fácilmente con amigos o con gente que le gusta de su página en Facebook. Si un usuario deja la "Publicar en Facebook" casilla marcada cuando se envía un comentario, una historia aparece en News Feed de sus amigos lo que indica que ella ha hecho un comentario en su sitio web, que habrá también un enlace a su sitio.
Amigos y personas que les gusta la página se puede responder a la discusión por la simpatía o de responder a los comentarios directamente en el News Feed de Facebook o en el apartado de comentarios en su sitio. Temas permanecer sincronizados a través de Facebook y en el apartado de comentarios en su sitio, independientemente de dónde se hizo el comentario.
CÓDIGO
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="facebook.com/Nombre_de_usuario" data-num-posts="2" data-width="500"></div>
COMPARTIR FACEBOOK
Compartir en FB
Transmisión en vivo de Facebook
El plug-in Live Stream permite a los usuarios que visitan su sitio o aplicación comparten la actividad y los comentarios en tiempo real. Transmisión en vivo funciona mejor cuando está ejecutando un evento en tiempo real, como video streaming en vivo de conciertos, discursos o transmisiones por Internet, chats en vivo Web, seminarios, juegos multijugador masivos.
CÓDIGO
<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_ES/all.js#appId=ID_de_la_Aplicacion&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-live-stream" data-event-app-id="ID_de_la_Aplicacion" data-width="400" data-height="500" data-always-post-to-friends="false"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Imágenes de Perfil de Facebook
El plug-in Facepile muestra las imágenes de perfil de Facebook de los usuarios que han gustado de la página o se han inscrito en su sitio. Si desea que el plugin para ver los usuarios que han gustado de la página, especifique la dirección URL de la página como el href parámetro. Si desea que el plugin para ver los usuarios que se han inscrito en su sitio, especifique su ID de aplicación como el app_id parámetro.
CÓDIGO
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-facepile" data-href="facebook.com/Nombre_de_Usuario" data-width="200" data-max-rows="1"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Actualizaciones de Facebook
Al igual que la caja es un plugin que permite a los sociales Facebook Page propietarios para atraer y ganar le gusta de su propio sitio web. Al igual que la caja permite a los usuarios:
Ver cómo muchos de los usuarios ya como esta página, y que de sus amigos también me gusta
Lea los mensajes recientes de la página
Al igual que la página con un solo clic, sin necesidad de visitar la página
CÓDIGO
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-header="true" data-href="http://www.facebook.com/Nombre_de_Uusuario" data-show-faces="true" data-stream="true" data-width="292">
</div>
COMPARTIR EN FACEBOOK
Compartir en FB
Recomendaciones de Facebook
El plug-in muestra Recomendaciones recomendaciones personalizadas a los usuarios. Dado que el contenido está alojado en Facebook, el plugin puede mostrar recomendaciones personalizadas si el usuario ha accedido a su sitio. Para generar las recomendaciones, el plugin considera todas las interacciones sociales con el URL de su sitio. Para una preferencia usuario registrado en Facebook, el plugin se dan a los objetos y resaltar sus amigos han interactuado.
Debe especificar un dominio para el que se muestran las recomendaciones. El dominio se combina a la perfección, por lo que un plug-in en el sitio = facebook.com no incluye la actividad de developers.facebook.com o www.facebook.com. Puede especificar varios dominios y los resultados se mezclan entre sí.
CÓDIGO
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-recommendations" data-site="facebook.com/Nombre_de_Usuario" data-width="300" data-height="300" data-header="true"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Actividad de Alimentación de Facebook
El plug-in de alimentación de Actividad muestra la actividad reciente más interesantes que tienen lugar en su sitio. Dado que el contenido está alojado en Facebook, el plugin puede mostrar contenido personalizado si el usuario ha accedido a su sitio. La alimentación de la actividad muestra historias de cuando los usuarios como el contenido de su sitio, cuando los usuarios compartir el contenido de su sitio en Facebook, o si un comentario sobre una página de su sitio en el apartado de comentarios . Si un usuario está conectado a Facebook, el plugin se puede personalizar para destacar el contenido de sus amigos. Si el usuario está conectado a cabo, la alimentación de la actividad se mostrará a través de las recomendaciones de su sitio, y dar al usuario la opción de iniciar sesión en Facebook.
El plugin está lleno de actividad de los amigos del usuario. Si no hay actividad amigo suficiente para llenar el plugin, que se rellena con las recomendaciones. Si se establece la recomendaciones parámetros de verdad, el plugin se divide por la mitad, mostrando la actividad de amigos en la mitad superior, y las recomendaciones en la mitad inferior. Si no hay actividad de amigos suficiente para llenar la mitad de la extensión, se incluyen más recomendaciones.
Debe especificar un dominio para mostrar la actividad de. El dominio se combina a la perfección, por lo que un plug-in en el sitio = facebook.com no incluye la actividad de developers.facebook.com o www.facebook.com. Puede especificar varios dominios y los resultados se mezclan entre sí.
El plugin está disponible ya sea a través de un simple iframe se puede colocar en su página, o si está usando el nuevo SDK de JavaScript , puede utilizar el XFBML etiqueta (o class="fb-activity">
CÓDIGO
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-activity" data-site="facebook.com/Nombre_de_Usuario" data-width="300" data-height="300" data-header="true" data-recommendations="false"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Botón Enviar de Facebook
El botón Enviar permite a los usuarios enviar fácilmente el contenido con sus amigos. La gente tendrá la opción de enviar su URL en un mensaje a sus amigos de Facebook, a la pared grupo de uno de sus grupos de Facebook, y como un correo electrónico a cualquier dirección de correo electrónico. Mientras que el botón igual que permite a los usuarios compartir contenidos con todos sus amigos, el botón Enviar le permite enviar un mensaje privado a sólo unos pocos amigos.
El mensaje incluirá un enlace a la URL especificada en el botón de enviar, junto con un título, la imagen, y una breve descripción del enlace. Puede especificar lo que se muestra por el título, la imagen y la descripción mediante el uso de etiquetas meta Abrir Gráfico .
El botón Enviar requiere el SDK de JavaScript .
CÓDIGO
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="facebook.com/Nombre_de_usuario"></div>
COMPARTIR EN FACEBOOK
Compartir en FB
Suscribirse a:
Entradas (Atom)
