Диалоговое окно Facebook не показывает предварительный просмотр изображения при первой публикации страницы

Пожалуйста, прочитайте весь пост, прежде чем пометить его как дубликат Facebook. Изображение общего ресурса не появляется в первый раз или связанные с ним вопросы.

Я создаю динамическую страницу (с уникальным URL и изображением), которую пользователи могут поделиться на Facebook с помощью диалога.

Согласно https://developers.facebook.com/docs/sharing/best-practices Facebook необходимо очистить URL-адрес в og: image, прежде чем он сможет отобразить его в диалоге общего доступа.
Это можно сделать либо с помощью отладчика совместного использования, либо установив метатеги og: image: width и og: image: height на странице, к которой предоставлен общий доступ.

Так как сайт, который я создаю, потенциально может получить много уникальных страниц и изображений, я не хочу, чтобы хакеры вместе программно вызывали отладчик sharer (или sharer.php с уникальными URL), чтобы сделать эту работу. Поэтому я пытаюсь использовать метатеги og: image: width и og: image: height.

К сожалению, я не смог сделать эту работу.
При первой публикации страницы на ней не отображается изображение, указанное в og: image. Второй раз это делает.

Я создал два демо-файла для этого:


http://beerco.de/fbgifshare/urls_without_ts.php этой странице есть следующие метатеги и код fb.ui:

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif"
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_without_ts.php'
    }, function(response){
        console.log(response);
    });

Это всегда будет работать (после первоначального общего ресурса), поскольку href, который является общим, и og: image являются статическими.


http://beerco.de/fbgifshare/urls_with_ts.php этой странице всегда будет уникальный URL-адрес и изображение:

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_with_ts.php?ts=1484855521'
    }, function(response){
        console.log(response);
    });

В диалоговом окне "Поделиться" не отображается предварительный просмотр изображения при первом открытии диалогового окна канала, но оно может отображаться при повторной попытке (без перезагрузки страницы), поскольку Facebook затем удалил изображение.

Если я обновлю страницу и попытаюсь снова поделиться, предварительный просмотр не будет отображаться, поскольку URL-адреса получили новую метку времени.

Я что-то здесь упустил или документация на Facebook не так?
Мне нужен предварительный просмотр изображения, когда пользователь впервые делится страницей.
Каков наилучший способ достичь этого?

Причина, по которой URL-адрес изображения указывается в og: image и og: url, заключается в том, что я хочу, чтобы анимированный GIF-файл воспроизводился на Facebook в режиме "inline" (как это делает giphy), когда страница открыта для общего доступа.

Пожалуйста, просмотрите исходный код двух демо-файлов, чтобы увидеть все теги OG и код FB.ui.

Вся помощь приветствуется!

0 ответов

Другие вопросы по тегам