Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Optimizando Websitespara Facebook

    Загружено:

    Ricardo Olvera Samano
    257 просмотров4 страницы
    Este documento explica cómo optimizar sitios web para Facebook utilizando el protocolo Open Graph. Open Graph permite convertir páginas web en objetos dentro del gráfico social de Facebook mediante la adición de metadatos en las etiquetas <meta>. Se requieren cuatro propiedades básicas y se recomienda agregar una descripción. También cubre cómo extender los metadatos y agregar el botón "Me gusta" de Facebook.

    Исходное описание:

    Оригинальное название

    OptimizandoWebsitesparaFacebook

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Este documento explica cómo optimizar sitios web para Facebook utilizando el protocolo Open Graph. Open Graph permite convertir páginas web en objetos dentro del gráfico social de Facebook mediante la adición de metadatos en las etiquetas <meta>. Se requieren cuatro propiedades básicas y se recomienda agregar una descripción. También cubre cómo extender los metadatos y agregar el botón "Me gusta" de Facebook.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    257 просмотров4 страницы

    Optimizando Websitespara Facebook

    Загружено:

    Ricardo Olvera Samano
    Este documento explica cómo optimizar sitios web para Facebook utilizando el protocolo Open Graph. Open Graph permite convertir páginas web en objetos dentro del gráfico social de Facebook mediante la adición de metadatos en las etiquetas <meta>. Se requieren cuatro propiedades básicas y se recomienda agregar una descripción. También cubre cómo extender los metadatos y agregar el botón "Me gusta" de Facebook.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    Optimizando Websites para Facebook con Open Graph

    El protocolo Open Graph fue originalmente creado por facebook. La versin inicial estubo basa en RDFa (o Resource Description Framework -in- attributes) que consiste en colocar etiquetas adicionales <meta> en el <head> de una pagina web, convirtiendose asi en un objeto en el social graph, en este caso, facebook. Se ah construido usando estandares abiertos en un esfuerzo para crear una web mas semantica --Getting Started Para comenzar a convertir nuestras paginas en objetos open graph, todo lo que necesitamos es agregar las respectivas etiquetas <meta> del protocolo open graph y el boton Me gusta. Se cubrira la incorporacin del boton Me gusta mas adelante ya que primero debemos trabajar en las <meta> tags que definen la pagina del objeto. Las tags son extremadamente simples de construir y lucen as: <meta property=og:title content=Rebirth Studio Website/> Podemos ver que esto es, por supuesto, una etiqueta <meta> vlida. Todo lo que estamos haciendo es usar un propiedad personalizada en el atributo property de la forma: og:property. Las propiedades en si mismas son definidas por el protocolo Open Graph y cubren muchas de las cosas que se necesitaran definir en la pgina web. El protocolo Open Graph requiere de 4 propiedades og:title og:type og:image og:url - El titulo del objeto (ej: Rebirth Studio Service) - El tipo de objeto que es (ej: articulo, pelicula, lugar, etc) - Una imagen para representar tu objeto - La URL canonica del objeto

    Hay un par de puntos importantes a considerar con estos requerimientos Type - Debe ser siempre un tipo de objeto vlido de la lista de tipos soportados http://developers.facebook.com/ docs/opengraph/#types Image - La imagn debe tener al menos 50 x 50 pixeles con un ratio mximo de 3:1 URL - Debe ser usado como un ID unico y permanente dentro del graph En el caso de un website se usa el typo article para cualquier URL que represente contenido - por ejemplo un post de algn blog, fotos, video, etc. No se debe usar el tipo website para ese proposito. El tipo website y blog estan diseados para representar un sitio web o un blog entero por ello suelen aparecer solo en la raiz del dominio. Si tenemos un objeto que no esta definido en ninguna de las categorias podemos especificar nuestro propio tipo. Este se presentara como el tipo: other en facebook, ellos se encargaran de monitorear los tipos mas usados para posteriormente definirlos en la lista oficial. Para definir nuestro propio tipo tenemos que definir nuestro propio namespace. Por ejemplo, si el sitio es moviecity.com y deseamos definir algunas urls de nuestro sitio como director debemos hacer algo similar a lo siguiente: <html xmlns:moviesite=http://www.moviesite.com/ns# > <head> .... <meta property=og:type content=moviesite:director/> Vale la pena sealar que se pueden proporcionar multiples tags og:image; Cuando alguin share o like la pagina web, se le dara la opcin de elegir con cual imagen se representar la pagina en su perfil/muro

    Adems de estos requisitos, Facebook ha ampliado la base de metadatos para aadir dos nuevos campos necesarios para conectar su pgina de Facebook: og:site_name - Un Humanamente legible nombre para el sitio web (ej: Rebirth::Studio) fb:admins or fb:app_id - Una lista separada por comas de ids de usuarios o aplicaciones de facebook Puede notarse que la ultima propiedad es prefijada con un fb en vez de og. Esto es debido a que se le permite a facebook vincular la pagina con el usuario o aplicacin que pueden administrar la pagina. Se pueden incluir ambos o descartarlos si no son aplicables. esto no lo termino de comprender al 100%, me explicas??? Facebook recomienda agregar otra propiedad, el tag description og:description - una breve (uno o 2 oraciones) descripcin de la pgina

    Incluir la propiedad description es una buena forma de dar al instante ese poquito mas de informacin extra acerca de la pagina. --Poniendo todo lo Basico A continuacin se presentara un ejemplo practicode alguna pagina personal que promociona mixes musicales
    1. 2. 3. 4. 5. 6. 7. 8. <!-- FACEBOOK OPEN GRAPH --> <meta property="og:title" content="Mike Mackay - House Warming Mix (May 2011)"/> <meta property="og:type" content="mix"/> <meta property="og:image" content="http://dj.mikemackay.co.uk/uploads/thumbnail.jpg"/> <meta property="og:url" content="http://dj.mikemackay.co.uk/mixes/"/> <meta property="og:site_name" content="Mike Mackay - Trance Mixes"/> <meta property="og:description" content="Length: 01:25:11; ..."/> <meta property="fb:admins" content="1387482420"/>

    Como puede apreciarse, resulta extremadamente sencillo agregar una pgina existente.

    Bsicamente esa es la forma de convertir un sitio web en un objeto de open graph. --Extendiendo la metadata Para algunas pginas, podriamos querer agregar datos acerca de la ubicacin de un caf, compaia u hotel. El protocolo Open Graph nos permite satisfacer esto creando tantas og:propiedades como podamos necesitar

    para proveernos contenido adicional acerca de nuestra pagina web. <contenido de una pagina web de algn caf en Inglaterra>
    1. 2. 3. 4. 5. 6. <meta <meta <meta <meta <meta <meta property="og:street-address" content="123 Any Street"/> property="og:city" content="London"/> property="og:postal-code" content="XY1 2ZZ"/> property="og:country-name" content="United Kingdom"/> property="og:email" content="bookings@myrestaurant.com"/> property="og:phone_number" content="02071234567"/>

    --Agregando el boton Me Gusta de Facebook La pieza final de puzzle es la habilidad que se le proporcionar a los usuarios para compartir o gustar nuestra pagina externa. Esencialmente hay 2 maneras de implementar los botones: XFBML e Iframe. La versin con XFBML es mas versatil pero requiere que carguemos el SDK en javascript de Facebook a la pgina. La versin en Iframe nos proporciona la funcionalidad bsica pero no nos deja ir mas alla en, por ejemplo, la escucha de eventos o redimencionado dinamico. Escojeremos el mtodo que mas se adecue a nuestra pgina.

    Una vez generado el cdigo lo incrustamos en nuestro sitio. & et voila! :) http://www.netmagazine.com/tutorials/optimise-your-website-facebook http://developers.facebook.com/docs/opengraph/

    http://ogp.me/

    Вам также может понравиться