Open Graph Facebook Reparando el error de 72x72 Open Graph Facebook Reparando el error de 72x72
Open Graph Facebook Reparando el error de 72x72
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 13
  1. #1
    Registro
    17-febrero-2012
    Ubicación
    Colombia.
    Mensajes
    1.781
    Open Graph Facebook Reparando el error de 72x72
    Hola Forobetanos.

    Para los que usamos blogger desde hace ya tiempo tenemos el problema que al compartir una entrada de blogger en Facebook no selecciona la imagen correcta pues Blogger tiene un error(Que no han querido solucionar ) pues automáticamente se selecciona la primera imagen que tiene la entrada y la asigna en el meta og:image pero queda muy pequeña (72x72). Facebook no admite imágenes tan pequeñas por ello no la toma en cuenta.

    Ejemplo:

    <meta content='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' property='og:image'/>

    Después de pensar por varias horas he logrado solucionar este problema momentáneamente:

    1. Agregar en la entrada una imagen que tenga ancho mayor o igual a 200px, pues facebook solo acepta imágenes que tengan un ancho de 200px.
      'http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/'s200-c/default.png
    2. Agregar el siguiente código debajo del <head> de tu plantilla.


    Código:
    <meta property='og:title' expr:content='data:blog.pageTitle'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta property='og:type' content='article'/>
    <b:else/>
      <meta property='og:type' content='website'/>
    </b:if>
    <meta property='og:url' expr:content='data:blog.canonicalUrl'/>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <meta content='http://3.bp.blogspot.com/-Tu3Djy4FAUY/U9GfnhIOzlI/AAAAAAAAARs/Ium4uoaVdcY/s200-c/click-here.png' property='og:image'/>
    </b:if>
    <b:else/>
    <meta content='CAMBIAR BANNER DE TU WEB' property='og:image'/>
    </b:if>
    
    <b:if cond='data:blog.metaDescription'>
      <meta property='og:description' expr:content='data:blog.metaDescription'/>
    <b:else/>
      <meta property='og:description' content='SI NO EXISTE LA DESCRIPCIÓN PUEDES CAMBIARLA'/>
    </b:if>
    <meta property='og:site_name' expr:content='data:blog.title'/>
    Como funciona:

    Simple:

    Código:
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    Esto lo que hace es buscar el enlace de la imagen SI EXISTE en la entrada y lo agrega a la etiqueta meta! por ello decía del tamaño de la imagen!!!!
    <b:else/>

    Código:
    <meta content='http://3.bp.blogspot.com/-Tu3Djy4FAUY/U9GfnhIOzlI/AAAAAAAAARs/Ium4uoaVdcY/s200-c/click-here.png' property='og:image'/>
    Esto lo que hace es remplazar la imagen del meta SI NO EXISTE LA IMAGEN EN LA ENTRADA, pueden cambiarla por la que quieran en este caso les coloque esta (Mayor o igual de 200px):
    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.
    </b:if>

    RESULTADO:

    Si agregan el código y hacen correctamente el simple paso que les coloque obtendrán lo siguiente al compartir una entrada:

    SI EXISTE LA IMAGEN:

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.
    SI NO EXISTE LA IMAGEN:

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.
    COMPROBAR LOS CAMBIOS:
    Utiliza la siguiente herramienta de Facebook para comprobar si funciono, solo pega el enlace de tu entrada.

    https://developers.facebook.com/tools/debug/og/object/

    Saludos cualquier duda pregunten amigos...

    Pd: He actualizado el código con la opción de agregar banner web de tu web cambiando "CAMBIAR BANNER DE TU WEB" por la url de tu logo de tu web, es decir cuando alguien comparta directamente el home de tu web en facebook: mi-web.com, se vea el logo y su respectiva descripción.
    Última edición por Andres128; 23-ene-2015 a las 00:21

  2. #2
    Registro
    04-enero-2013
    Ubicación
    Playzeta.com | Banco de Imágenes Gratis
    Mensajes
    819
    Muy buen tutorial, lo he seguido y funciona.

  3. #3
    muchas gracias

  4. #4
    Registro
    29-junio-2011
    Ubicación
    Asturias
    Mensajes
    1.286
    Genial, gracias

  5. #5
    Registro
    17-febrero-2012
    Ubicación
    Colombia.
    Mensajes
    1.781
    Me alegra que les haya funcionado, cualquier cosa me avisan o me preguntan

  6. #6
    Registro
    01-octubre-2014
    Ubicación
    Rep. Dom
    Edad
    29
    Mensajes
    171
    Gracias por la explicacion, hace unos dias tenia esa inquietud, lo pondre en practica

  7. #7
    Disculpa Andres128 pero no me funciona no se si puedes darme una ayuda algo mas personalizada si puedes

  8. #8
    me salvaste, excelente

  9. bueno bueno, bien el tutorial muchas gracias

  10. #10
    Open Graph Facebook Reparando el error de 72x72
    Hola Andres128 Me puedes ayudar por fas

    Personalmente no quiero que salga el nombre del blog, solamente que salga el titulo de la entrada, en esta parte:

    Código:
    <meta property='og:title' expr:content='data:blog.pageTitle'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta property='og:type' content='article'/>
    <b:else/>
      <meta property='og:type' content='website'/>
    </b:if>
    Si le elimino la parte de "blog" en "data:blog.pageTitle" y tambien en "data:blog.pageType", sería suficiente para que solamente salga el titulo de la entrada al compartir en lugar de nombre del blog+titulo del articulo ¿..?, quedando asi:

    Código:
    <meta property='og:title' expr:content='data:pageTitle'/>
    <b:if cond='data:pageType == &quot;item&quot;'>
      <meta property='og:type' content='article'/>
    <b:else/>
      <meta property='og:type' content='website'/>
    </b:if>
    <meta property='og:url' expr:content='data:blog.canonicalUrl'/>
    ¿O lo estaría jodiendo todo?

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. ¿Qué es el Open Graph Tags ?
    Hola ... estoy probando distintos plugins para autopublicar entradas de mi sitio web al muro de facebook y para agregar la casilla de comentarios de...
    Respuestas: 4
    Último mensaje: 09-ago-2014
  2. Regalo Hermosa plantilla para frases o chistes Open Graph Correcto para facebook
    Bueno como les menciono sobre la plantilla el open graph funciona bien pueden probar acá https://developers.facebook.com/tools/debug/og/object les...
    Respuestas: 25
    Último mensaje: 16-dic-2013
  3. Error 404 Open Graph, dejaron de funcionar las entradas...
    Buenas tardes, A ver si alguien puede echarme un cable, veréis desde hace ya una semana, cuando intento compartir mis entradas en Facebook me sale...
    Respuestas: 6
    Último mensaje: 11-jul-2013
  4. Error 404 Open Graph, dejaron de funcionar las entradas...
    Buenos días, A ver si alguien puede echarme un cable, veréis desde hace ya una semana, cuando intento compartir mis entradas en Facebook me sale un...
    Respuestas: 0
    Último mensaje: 27-jun-2013
  5. Facebook Open Graph META Tags
    Hola 2 preguntas . se puede convinar este codigo <meta property="og:description" name="description" content="Descripcion" /> y si alguien a...
    Respuestas: 2
    Último mensaje: 20-feb-2013

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •