javascript - significa - ¿Cómo se realiza la vista previa del enlace de Facebook?

que significa vista previa en facebook (4)

Cuando ingresas una URL en Facebook, aparece automáticamente la función "publicar un enlace". Con la mayoría de los sitios web, carga automáticamente una selección de imágenes que extrae de algún lugar de la página para ir junto con el enlace y la descripción. ¿alguien tiene una idea de cómo implementar esa misma característica para nuestro propio sitio sin ninguna API de FB, etc. solo JavaScript o JQuery?

Debido a restricciones de seguridad, JavaScript no puede cargar ninguna página desde ningún servidor. Facebook en realidad le pide a los servidores de Facebook información sobre esa página, y los servidores a su vez consultan la página para extraer la información. Usted también necesitará una implementación del lado del servidor de esto.

Aparte de eso, es bastante simple: utilice una biblioteca de cliente HTTP para su idioma de elección para conectarse a la URL proporcionada, luego use una biblioteca de análisis HTML para extraer la etiqueta del title , identifique una parte importante del texto en la etiqueta del body y extraiga las fuentes de etiquetas img que parecen ser las más apropiadas.

Una vez que su servidor puede extraer información sobre una página, es un ejercicio bastante simple llamarlo a través de AJAX.

Creo que los siguientes pasos están involucrados

Usando Javascript encuentre los enlaces en el texto escrito
De los enlaces encontrados, obtenga el último enlace en el texto (FB muestra solo el último enlace)
Usando AJAX envíe este detalle del enlace a una página del lado del servidor (PHP / ASP / JSP, etc.)
La página del lado del servidor obtiene los datos requeridos (desde metaetiquetas) incluyendo
- Título (Preferentemente Abrir gráfico og:title si falta en <title>
- Descripción (Preferiblemente Open graph og:description si falta de <meta name="description" ....
- Imágenes (Preferiblemente Abrir gráfico og:image si falta de <img src=....
En PHP puede obtener estos datos usando curl o file_get_contents y analizando los datos requeridos detallados anteriormente. No estoy seguro acerca de otro Idioma.
Muestra el resultado así encontrado en la solicitud AJAX.

Además, creo que FB almacena los datos, una vez encontrados, en la base de datos y las primeras consultas allí. Esto les ayuda a obtener un resultado más rápido y, por lo tanto, comparten el mismo artículo y les gusta generar la imagen y los detalles de los datos almacenados.

Necesitará Javascript para mostrar esta vista previa en tiempo de ejecución (mientras escribe en el área de texto). Sin embargo, si solo lo necesita después de publicar los datos, puede hacerlo con el lenguaje de servidor puro (puede evitar Javascript) y siguiendo los pasos anteriores simplemente elimine la llamada AJAX.

@Keshan.

Desarrollé una vista previa de Facebook Link con PHP y jQuery que está en mi sitio web. Eche un vistazo ... El código fuente es gratuito ... No publiqué todo el código aquí porque son muchos archivos ... Pero si prefiere que el código se publique aquí, dígamelo y lo publicaré.

Está disponible en Github https://github.com/LeonardoCardoso/Facebook-Link-Preview

Vista previa del enlace de Facebook - PHP + jQuery

Sorprendentemente, no hay tantos servicios haciendo esto. Como se publicó en el comentario anterior, su navegador no puede hacer esto sin un elemento de servidor.

Entonces, el flujo de trabajo es realmente esto:

Analiza el texto insertado para probar que es una URL válida
Gana ese valor de URL a través de AJAX a un servicio personalizado o hazlo tu mismo.
El servicio (el mío está escrito en .Net) carga la página en la memoria y la analiza con un analizador DOM. Uso el paquete HTML Agility, puedes usar AngleSharp, etc.
Necesita extraer los elementos meta del gráfico abierto con (típicamente) volver al metatítulo / descripción estándar y todo.
Empaque todo ese OG bondad y devuelva este modelo a través de AJAX
Coloque los valores devueltos en la pantalla como una vista previa.
Si es aceptado, escriba la lógica para insertar los valores en su base de datos

Si no está dispuesto a crear el objeto del servidor, hay servicios de terceros que pueden hacer los bits de recuperación:

http://unfurl.oroboro.com/

https://guteurls.de/

la mejor de las suertes.