INICIO ::
Mostrando las entradas con la etiqueta PHP. Mostrar todas las entradas
Mostrando las entradas con la etiqueta PHP. Mostrar todas las entradas

Cómo determinar la Imagen para Facebook por defecto de una página

:: compartir en Facebook :: compartir en X (Twitter) ::


Me encontré con el problema de que necesitaba definir la imagen por defecto que mostraría Facebook al compartir el enlace de una página. Por ejemplo quería que al compartir la página de inicio del a Tienda de Meliwarén no se viera la cabecera, que además quedaba cortada, si no que una imagen más adecuada.

Investigué un poco y lo que hay que hacer es agregar en la cabecera del documento HTML una etiqueta como la siguiente:

<meta property="og:image" content="http://www.meliwaren.cl/tienda/imagenes/og_image.jpg" />

donde al parámetro content es la ruta absoluta donde se encuentra almacenada la imagen.

Por lo que pude además deducir el tamaño de la imagen debe ser por ejemplo de 524 x 275 pixeles. Esa es área útil si es que quieren incluir un logo por ejemplo o algún texto en la imagen.

En mi caso además como las tienda tiene páginas dinámicas con PHP y MySQL mi ideal era que si por ejemplo compartía la URL de un producto en especial, la imagen por defecto fuese una de la imágenes relacionadas con el producto, así que lo que tuve que hacer es antes de todas las etiquetas HTML es hacer una consulta a la base de datos y obtener una ruta absoluta de la imagen que quería mostrar y hacer liego mediante PHP escribir la etiqueta con la ruta de la imagen.

Por lo que investigué esta meta etiqueta junta a otras forma parte de lo que se conoce como Open Graphic Protocol y que tiene objetivo que las página conversen con las Redes Sociales, en particular Facebook.

En los enlaces de más abajo pueden ver más información Sobre el Open Graphic Protocol.

Referencias:

The Open Graph protocol
https://ogp.me/

6 comentarios en «¿Por qué debes saber qué son las meta etiquetas de Open Graph?»
https://neliosoftware.com/es/blog/debes-saber-que-son-las-meta-etiquetas-de-open-graph/

Hacer un buscador

:: compartir en Facebook :: compartir en X (Twitter) ::

// Se crea un indice para la búsqueda con los campos que creamos convenientes de la tabla:

ALTER TABLE articulos ADD FULLTEXT(titulo_articulo, texto_articulo);

// Suponiendo que la variable que recogemos por el formulario se llama "cadena"
// separamos las palabras que puedan existir en la variable cadena
$trozos=explode(" ",$cadena);
// contamos las palabras
$numero=count($trozos);
// si es una sola palabla hacemos una consulta simple
if ($numero==1)
{
   $consulta = "SELECT * FROM articulos WHERE titulo_articulo LIKE '%$cadena%' OR texto_articulo LIKE '%$cadena%'";
}
// si es mas de una palabra...
elseif($numero>1)
{
   $consulta = "SELECT * , MATCH (titulo_articulo, texto_articulo) AGAINST ('$cadena') AS puntuacion FROM articulos WHERE MATCH (titulo_articulo, texto_articulo) AGAINST ('$cadena') ORDER BY puntuacion DESC";
}

Y de ahí operamos con el arreglo devuelto por la consulta y los mostramos por pantalla