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

Question

Cuando escribe 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?

Answer 1

Debido a restricciones de seguridad, JavaScript no puede cargar ninguna página desde ningún servidor. Facebook en realidad pregunta a los servidores de Facebook para obtener 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 en el servidor de esto.

Aparte de eso, es bastante simple: utilizar una biblioteca de cliente HTTP para el idioma que prefiera para conectarse a la dirección URL proporcionada, a continuación, utilizar un análisis de HTML en la biblioteca para extraer la etiqueta title, identificar una pieza significativa de texto en el body etiqueta, y extrae las fuentes de etiqueta img que parecen 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.

Answer 2

@Keshan.

Desarrollé una vista previa del enlace de Facebook 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

Facebook Link Preview - PHP + jQuery

Answer 3

Creo pasos siguientes forman parte

• uso de JavaScript encontrar los enlaces en el texto escrito
• A partir de los enlaces que se encuentran obtener el último eslabón en el texto (FB muestra solo para el último enlace)
• Usando AJAX envíe este enlace d etail a una página del lado del servidor (PHP/ASP/JSP, etc.)
• La página del lado del servidor recibe los datos necesarios (de los meta-tags) incluyendo
  • Título (De preferencia Open Graph og:title si falta en <title>
  • Descripción (gráfico Preferiblemente abierto og:description si falta a <meta name="description" ....
  • Imágenes (preferiblemente Open graph og:image si falta a <img src=....
• En PHP puede obtener Ts e datos ya sea usando curl o file_get_contents y analice 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.

Answer 4

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.

Por lo tanto, el flujo de trabajo es realmente esto:

1. analizar el texto insertado para probar que es una URL válida
2. Whiz ese valor URL a través de AJAX a un servicio a medida, o hágalo usted mismo.
3. 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, podría usar AngleSharp, etc.
4. Necesita extraer los meta elementos de gráfico abierto con (típicamente) recurrir al meta título/descripción estándar y todo.
5. Empaque todo ese OG bondad y devuelva este modelo a través de AJAX
6. Coloque los valores devueltos en la pantalla como una vista previa.
7. Si aceptó escribir la lógica para insertar los valores en su base de datos

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

http://unfurl.oroboro.com/

https://guteurls.de/

mejor de las suertes.