Blog Developando » Facebook

Facebook, crear botón compartir con parámetros

David Otero — Mon, 20 Jan 2014 18:23:03 +0000

En este tutorial vamos a explicar como crear un botón de ‘Compartir en Facebook‘ al que le indicaremos los parámetros que queremos que se muestren en la ventana de Facebook, y posteriormente vamos a comfigurar las cabeceras de nuestra página para que sean mostradas en el muro de Facebook.

1.-Crear botón de compartir en Facebook

Vamos a empezar por el primer paso, que será tener el botón de compartir. Para ello vamos a crear la url a la que va a realizar la petición nuestro botón. La URL de dicho enlace tendrá el siguiente formato:

http://www.facebook.com/sharer.php?s=100&p[url]=url_contenido&p[title]=titulo_compartido&p[summary]=
descripcion&p[images][0]=thumbnail_image_url

Esta url estará formada por los siguientes parámetros:

Url de facebook con la que interactuar ‘http://www.facebook.com/sharer/sharer.php?‘
Parámetro con la url que se quiere compartir ‘p[url]‘
Parámetro con el título ‘p[title]‘
Url de la imagen que se utilizará como thumbnail ‘p[images][0]‘
Parámetro con un texto que resuma el contenido que se está compartiendo ‘p[summary]‘

Si unimos todos estos parámetros junto con la url principal de Facebook obtendremos que nuestro enlace para compartir el contenido al que apunta el parámetro ‘url‘ en Facebook sería el siguiente:

http://www.facebook.com/sharer.php?s=100&p[url]=http://developando.com?s=100&p[title]=Conoce+a+Developando&p[images][0]=http://developando.com/images/developandoLogo.jpeg&p[summary]=Desarrollo+web+y+movil

Haciendo clic sobre este enlace serás redirigido a Facebook y te dará la opción de compartir el contenido configurado abriéndose una nueva ventana de facebook para compartir el contenido configurado con el siguiente aspecto:

Con lo que se ha configurado hasta el momento, lo que hemos editado es la ventana de ‘compartir‘, el contenido que finalmente va a aparecer en Facebook será el obtenido de las etiquetas ‘meta og’ incluidas en la cabecera de la página a donde apunta la url que estamos compartiendo.

Problemas ‘Custom share button’ en dispositivos móviles

Es importante saber que en el móvil al acceder a la url que hemos creado anteriormente Facebook va a redirigirnos a la versión para móvil que será una url del tipo ‘http://m.facebook.com/…‘ y alguno de los parámetros configurados en la versión del móvil deben ser distintos y por tanto no funcionará correctamente.

Si queremos que el botón también funcione en el móvil, y no redirija a la url de la versión móvil, hay que añadir un nuevo parámetro a la url. Este parámetro es ‘m2w‘, si se lo añadimos a la url anterior podrás comprobar que ahora si accedes a ella desde un dispositivo móvil también funciona correctamente:

http://www.facebook.com/sharer.php?s=100&p[url]=http://developando.com?m2w&s=100&p[title]=Conoce+a+Developando&p[images][0]=http://developando.com/images/developandoLogo.jpeg&p[summary]=Desarrollo+web+y+movil

2.-Configurar etiquetas meta og con los parámetros a compartir

El último paso es añadir al menos las siguientes etiquetas ‘‘ en la cabecera de nuestro sitio web. Para ello editar el codigo fuente y añadir lo siguiente:

>
>
 property="og:url" content="http://developando.com" />
 property="og:title" content="Developando Web & Móvil" />
 property="og:description" content="Empresa encarga de desarrollar aplicaciones movil y web con calidad" />
 property="og:image" content="http://developando.com/images/developandoLogo.jpeg" />
>
>
>
>

Este sería el aspecto de la entrada que se incluiría en el muro de los usuarios de Facebook que compartan este contenido:

Contenido compartido Facebook

Cuando edites el código fuente de tu sitio web e incluyas estas etiquetas en la cabecera puede utlizar esta aplicación de Facebook para comprobar que tanto el tamaño de la imágen como el resto de parámetros están correctamente creados. El resultado de la comprobar la dirección de nuestro sitio web ‘http://developando.com’ muestra la siguiente información:

Facebook aplicación debug

Siguiendo estos dos pasos ya podrás crear tu propio botón de Facebook, darle el estilo que quieras y compartir contenido en Facebook.

The post Facebook, crear botón compartir con parámetros appeared first on Blog Developando.

Añadir botón de compartir en Facebook en una página web

David Otero — Tue, 07 Jan 2014 10:38:12 +0000

En este tutorial vamos a explicar los pasos que hay que seguir para añadir a una página web un botón de ‘Compartir en Facebook‘.

Para añadir un botón de forma sencilla deberemos acceder a esta página de Facebook donde obtendremos el código que necesitamos incluir en nuestra página para obtener el botón de compartir. El enlace anterior nos lleva a un formulario como el siguiente que nos guiará en la creación del botón.

Crear botón compartir en Facebook

En esta página hay que rellenar dos campos para indicar:

‘URL to share‘: URL del contenido que se quiere compartir en Facebook
‘Width‘: ancho en ‘px’ que va a tener el widget que se incluirá en la página

Una vez rellenados estos campos podremos ver una previsualización de como quedará creado dicho botón.

El último campo que se puede modificar es el que se llama ‘Layout‘, y que será con el que indiquemos el estilo que tendrá el botón de compatir que se está creando. Las diferentes opciones son:

‘box_count‘: aparecerá el botón de compartir, icono de facebook y texto de ‘compartir’, y sobre él una cajita en la que se mostrará el número de veces que se ha compartido el link.
‘button_count‘: actua como el caso anterior, pero la cajita con el número de veces que se ha compartido aparece a la derecha del botón
‘button‘: únicamente aparece el botón, sin el contador de veces compartido.
‘icon_link‘: muestra un botón únicamente con el icono de Facebook, y seguido a este botón, pero ya fuera de él, un enlace con el texto ‘Compartir’
‘icon‘: únicamente se muestra un botón con el icono de Facebook, sin ningún texto ni enlace adicional.
‘link‘: en este caso no es muestra ningún icono, lo que se mostraría sería un enlace con el texto ‘Compartir en Facebook’.

Una vez indicados los campos y el estilo del nuevo botón de compartir en facebook debemos hacer click en el botón ‘Get Code‘. Al hacer esto aparecerá una nueva ventana en la que se debe diferenciar varias partes:

En la parte superior de indica cómo se va a generar el código del botón: html5, xhtml, iframe o url.
Seleccionar el ID de la aplicación creada en Facebook y que será la utilizada por el nuevo botón. En nuestro ejemplo hemos creado previamente una aplicación en Facebook llamada ‘Golf’

Luego aparece el código javascript que hay que añadir en la página para que se genere el botón.

<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=xxxxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));script>

Código que debemos incluir en el sitio de la página donde queramos que aparezca el botón de compartir en Facebook:
```
<div class="fb-share-button" data-href="http://developando.com/blog/" data-type="button_count"></div>
```
En este fragmente de código se pueden ver tres atributos que se utilizan para configurar el botón de Facebook:

Clase de botón ‘fb-share-button‘ al tratarse de un botón para compartir en Facebook.
Campo ‘data-href‘ que indica la URL que se va a compartir.
Campo ‘data-type indicando el estilo que va a tener el botón

Siguendo estos sencillos pasos podrás añadir crerar botones para compartir contenidos en Facebook desde tu sitio web.

The post Añadir botón de compartir en Facebook en una página web appeared first on Blog Developando.

Compartir automáticamente nuestros tweets en Twitter en el muro de Facebook

David Otero — Fri, 04 Oct 2013 15:00:49 +0000

Las redes sociales de Twitter y Facebook se pueden conectar entre sí para consequir que cada tweet que publiquemos en nuestra cuenta de Twitter sea publicado inmediatamente también en nuestro muro de Facebook.

En este tutorial vamos a explicar los pasos que hay que llevar a cabo para realizar esta tarea. Lo primero de todo será crear una cuenta de Facebook y otra de Twitter. Este tutorial empieza justo después de tener creadas las dos cuentas.

El primer paso será acceder a la configuración de la cuenta de Twitter que quiere conectar.

Acceso a la Configuración de la cuenta de Twitter

Para conectar Facebook y Twitter necesitamos acceder a la ventana de configuración de la cuenta de Twitter. Se puede acceder a esta ventana directamente desde Facebook o desde la cuenta Twitter.

Opción 1: acceso a la configuración de Twitter desde Facebook

Accedemos a la página de Facebook, y en la barra de búsqueda superior de Facebook buscamos la aplicación ‘Twitter‘. Si accedemos a la aplicación de Twitter veremos una ventana como la siguiente:

Aplicación Twitter en Facebook

En esta ventana debemos hacer click en el botón amarillo que aparece en el medio que será el que nos redirija a la ventana de configuración del perfil de la cuenta de Twitter.

Opción 2: acceso directamente desde Twitter

Acceder directamente a la configuración de la cuenta desde la propia interfaz de Twitter. Para ello hacer click sobre el botón de herramientas que aparece en el menú superior de la ventana de Twitter, y luego en el submenú ‘Configuración‘ como se muestra en la siguiente imagen:

Configuración cuenta Twitter

Ventana de configuracion de Twitter

Una vez estamos en la ventana de configuración de nuestra cuenta de Twitter debemos ir a la opción ‘Perfil‘ en el menú de la izquierda. En la sección de la configuración que se muestra veremos un botón que nos permitirá conectarnos con Facebook:

Conectar Twitter con facebook

Haciendo click en el botón ‘Conectar con Facebook‘ iniciaremos el proceso. Lo primero que nos aparecerá será una ventana como la siguiente. En caso de no tener sesión abierta en Facebook, primero nos aparece una ventana solicitando usuario y contraseña. Si ya tenemos la sesión en Facebook abierta aparecerán las siguientes ventanas:

1.- Permitir a Twitter acceder a la información de nuestra cuenta en Facebook. Esto hay que aceptarlo ya que Twitter automáticamente publicará nuestros tweets en nuestro muro de Facebook:

Permitir a Twitter acceder a la configuración de la cuenta de Facebook

2.- Twitter podrá publicar contenidos en nuestro muro de Facebook, este paso se puede omitir o aceptar:

Publicar contenidos en el muro de Facebook

Finalmente, debemos indicar que permisos le vamos a conceder a Twitter sobre nuestra cuenta de Facebook, indicando que tweets queremos que se publiquen en el muro de Facebook:

Permisos otorgados a Twitter sobre la cuenta de Facebook

Siguiendo estos pasos, ya veremos publicados todos nuestros Tweets en nuestra cuenta de Facebook.

Esperamos que os resulte de utilidad este tutorial. Recordaros que podéis dejar vuestros comentarios, dudas o sugerencias.

The post Compartir automáticamente nuestros tweets en Twitter en el muro de Facebook appeared first on Blog Developando.

Crear una aplicación en Facebook

Delopando Web&Mobile — Wed, 02 Oct 2013 09:17:35 +0000

En este tutorial vamos a explicar los sencillos pasos que hay que realizar para crear una aplicación en Facebook.

Lo primero de todo es acceder a la página de desarrollo de Facebook desde donde poder gestionar las aplicaciones.

Puede acceder desde este enlace

Una vez en este página, pulsar el botón “+ Crear una nueva aplicación“. Tras pulsar el botón, nos aparecerá una nueva ventana donde deberemos introducir el nombre que tendrá la aplicación en Facebook:

Primera aplicación Facebook

Se deben rellenar los siguientes campos:

Nombre de la aplicación
App Namespace: identificador único de la aplicación que se utilizará para crear la url de acceso a la aplicación. En este caso sería https://apps.facebook.com/primeradevelopando
Categoría que indicará sobre que se basa nuestra aplicación

Tras darle a ‘Continuar‘ accederemos a la página de adminstración de la nueva aplicación creada:

Panel administración aplicación Facebook

En este panel de administración hay varias secciones diferenciadas:

Identificadores de la aplicación, son otorgados por Facebook para poder utilizar la aplicación desde el API de Facebook:
- AppId: identificador de la aplicación
- App Secret: clave secreta
Clave identificación aplicación Facebook
Información básica de la aplicación, donde se puede cambiar el nombre de la misma y la dirección de contacto del administrador de la aplicación de Facebook.
Sección donde configurar como se integra la aplicación con Facebook, desde donde se configuran los permisos que tendrá la aplicación.

En próximos tutoriales hablaremos de los permisos que tienen las aplicaciones de Facebook.

The post Crear una aplicación en Facebook appeared first on Blog Developando.