При вводе URL-адреса в facebook автоматически появляется функция "отправить ссылку". С большинством веб-сайтов он автоматически загружает выбор изображений, которые он вытаскивает где-то на странице, чтобы идти по ссылке и описанию. кто-нибудь имеет представление о том, как реализовать эту же функцию для нашего собственного сайта без каких-либо FB API и т.д. просто javascript или JQuery?
Как происходит просмотр ссылок Facebook?
Ответ 1
Из-за ограничений безопасности JavaScript не может загружать любую страницу с любого сервера. Facebook фактически запрашивает на серверах Facebook информацию об этой странице, а серверы, в свою очередь, запрашивают страницу для извлечения информации. Вам также понадобится реализация на стороне сервера.
Кроме того, это довольно просто: используйте клиентскую библиотеку HTTP для выбранного вами языка для подключения к предоставленному URL-адресу, затем используйте библиотеку разбора HTML для извлечения тега title, определите значительную часть текста в тег body и извлеките тег img, которые кажутся наиболее подходящими.
Как только ваш сервер сможет извлечь информацию о странице, это довольно простое упражнение, чтобы вызвать его через AJAX.
Ответ 2
@Keshan.
Я разработал предварительный просмотр ссылок на Facebook с PHP и jQuery, который находится на моем веб-сайте. Взгляните... Исходный код бесплатный... Я не публиковал весь код здесь, потому что у них много файлов... Но если вы предпочитаете, чтобы код был опубликован здесь, скажите мне, и я отправлю.
Он доступен в Github https://github.com/LeonardoCardoso/Facebook-Link-Preview
Ответ 3
Я думаю, что следующие шаги:
- Использование Javascript для поиска ссылок в письменном тексте
- Из найденных ссылок получите последнюю ссылку в тексте (FB показывает только для последней ссылки)
- Используя AJAX, отправьте эту ссылку на серверную страницу (PHP/ASP/JSP и т.д.).
- Серверная страница получает требуемые данные (из метатегов), включая
- Заголовок (желательно открыть график
og:title, если отсутствует в<title> - Описание (желательно Открыть график
og:description, если отсутствует в<meta name="description" .... - Изображения (желательно Открыть график
og:image, если отсутствует<img src=....
- Заголовок (желательно открыть график
- В PHP вы можете получить эти данные либо с помощью
curl, либоfile_get_contentsи проанализировать требуемые данные, описанные выше. Не уверен относительно другого языка. - Показать результат, найденный в запросе AJAX.
Кроме того, я думаю, что FB хранит данные, найденные в базе данных и 1-й запросы там. Это помогает им получить более быстрый результат, и, следовательно, одна и та же статья поделилась и понравилась генерировать изображение и данные из сохраненных данных.
Вам понадобится Javascript, чтобы показать этот предварительный просмотр во время выполнения (в то время как вы пишете в текстовом поле). Однако, если вам нужно только после публикации данных, это может быть сделано с использованием чистого сервера (вы можете избежать javascript), и после выполнения вышеуказанных шагов просто удалите вызов AJAX.
Ответ 4
Удивительно, что многие службы там делают это. Как отмечал предыдущий комментатор, ваш браузер не может сделать это без элемента сервера.
Итак, рабочий процесс действительно таков:
- Разберите вставленный текст, чтобы проверить его действительный URL
- Внесите этот URL-адрес через AJAX в услугу на заказ или просмотрите ее.
- Служба (моя написана на .Net) загружает страницу в память и анализирует ее с помощью анализатора DOM. Я использую пакет гибкости HTML, который вы могли бы использовать AngleSharp и т.д.
- Вам необходимо извлечь метатеги Open Graph с (как правило), вернуться к стандартному Meta Title/Description et all.
- Упакуйте все, что нужно для OG, и верните эту модель через AJAX
- Поместите возвращаемые значения на экран в виде предварительного просмотра.
- Если принято, напишите логику, чтобы вставить значения в ваш DB
Если вы не занимаетесь созданием объекта сервера, есть сторонние службы, которые могут выполнять бит поиска:
Желаем удачи.