Hola Amig@s después de días y muchas horas de desesperación buscando en foros y páginas de internet que no te ofrecen soluciones reales creo que he dado con la solución o al menos a mi me ha funcionado, por ello deseo compartirlo con todos vosotros.
Mi problema era que al compartir fotografías e imágenes en facebook, ya sea a través de un servicio externo como pudiera ser Hootsuite, ésta salía publicada con la cabecera de mi banner en Blogger, o incluso cualquier fotografía que estaba expuesta en la website.
Pues después de innumerables pruebas he conseguido que se vea la imagen de cada post individual espero que os sirvan estos consejos.
Solución Problemas Imágenes en Facebook
Solución de Problemas al Publicar Imágenes en Facebook
• Mejor consejo: Elimina la imagen de la cabecera del blog, y así se acabará prácticamente todos los problemas. Si deseas conservarla sigue leyendo, puede que ésto te ayude.
• Primero mira si tienes 2 imágenes iguales (como fue mi caso) ya sea en el banner y en un javascript. Si es así, te aconsejo eliminar una o cambiarla por otra para no reforzar esa imagen, ya que será destacada para Facebook, es decir que le dará prioridad ante las demás que pudieras tener en el blog.
• En segundo lugar asegúrate que la primera imagen de tu post tenga un tamaño superior a 200px * 200 px porque a Facebook no le gustan las fotos tan pequeñas, lo recomendable es que sea rectágulares y superiores a 600 px. Así que intenta poner este tamaño a partir de ahora en tus post, y que no estén pixeladas, es decir que se vean claritas y sin arrugas porque se verán muy mal a la hora de que sean publicadas.
• En tercer lugar debes entrar en “plantilla”, y buscar “.header-outer {” ahora agrega el código que está más abajo:
.header-outer {
background: $() no-repeat;
_background-image: none;
background: url(http://3.bp.blogspot.com/-F28ftHhUTQM/VWsHAIAZ_CI/AAAAAAAAskk/sFlme_uGeZU/s1600/RECETAS_DE_COCINA_BANNER_min.png) no-repeat top left;
background-position: 12px 12px;
margin: 5px 0;
padding: 185px 15px 8px 13px; (En 185 cambia el tamaño como mejor le venga a tu blog)
Importante: Si no encuentras .header-outer, entonces busca #header { ya que las nuevas plantillas como las Responsive vienen nombradas de esta forma.
• Cuarto y último paso: Habría que eliminar el widget de la cabecera para que no se vea el título y la descripción del blog, porque puede que no te guste así, ya que los banners diseñados por ti mismo, como norma general ya le habrás incluido esos datos. Como Blogger lo trae por defecto no podrás eliminarlo de forma fácil a través del panel “Diseño”, así que vamos a ver de forma fácil como eliminarlo.
Entra en Plantilla. Da a “Ctrl + F” para activar el buscador, y busca el widget que contenga el título y la descripción, para hacerlo más sencillo teclea el título de tu blog, o al menos alguna palabra clave, por ejemplo, tu blog se llama “Tutoriales Web”, pues con teclear “tutoriales” deberías de llegar a la zona en cuestión. Recuerda que debes hacer estos cambios que te diré en la zona de widget. Ahora mira donde pone “true” eso significa que está fijado y no puede borrar el widget en diseño. Cambiálo a “false”. A continuación, ve a diseño y borra el widget.
Ya está todo, así que tan sólo quedaría hacer la prueba en Facebook, entra aquí introduce una url de tu blog y haz la prueba. En esta página de Facebook limpiarás la antigua fotografía que tenía esta red social fijada para tu blog, así que desde ahí puedes hacer las pruebas pertinentes e inspeccionar si tu imagen individual de cada post se ve correctamente. Cada cambio es instantáneo, da al botón de la derecha primero y posteriormente al de la izquierda. Suerte.
Espero que te haya gustado este tutorial, y si lo ves útil compártelo para que más personas como tú y yo que tengan este mismo problema, se ahorre horas de búsqueda en internet. El tiempo es oro.
Copyright © Lidia M.Y. / Foto Por Cortesía: Clipart
Red de Blogs “Grupo LM”
