Facebook не показывает изображение из метатегов с открытым графиком - PullRequest
Новая
       14

Facebook не показывает изображение из метатегов с открытым графиком

13 голосов
/ 11 января 2012

Я пытаюсь встроить кнопку общего доступа Facebook в сайт моего работодателя, заголовок, URL, описание / вступление отображаются корректно, однако изображение не прикрепляется.Когда открывается диалоговое окно «Поделиться», контейнер изображений мерцает, а затем исчезает, как будто Facebook пытается обработать изображения, но не удается.

Я использую og: image и ссылку, чтобы попытаться указатьизображение, которое будет использоваться для общих ссылок: 

<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />

Это изображение работало (оно масштабировалось надлежащим образом), но больше не работает, я также безуспешно пробовал другие изображения различного размера и формата.

Вот открытые метатеги, которые я использую в заголовке: 

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article" xmlns:og="http://ogp.me/ns#">
  <head>    
    <meta property="og:type" content="landing page" />
    <meta property="og:title" content="Social Media Test Page" />
    <meta property="og:description" content="This is a page for testing the behavior of social media buttons..." />
    <meta property="og:image" content="/images/logo_white_150px.png" />
    <link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:url" content="<%=shortUrl%>" />
    <meta property="og:site_name" content="site name" />
    <meta property="og:medium" content="mult" />
  </head>

Вот код JavaScript, который я использую в начале тела: 

  <body>
    <script type="text/javascript">
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>
  ...

Ивот как я использую кнопку: 

  <div class="left" style="text-align: center;">
    <a name="fb_share" type="button" share_url="<%=shortUrl%>">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  </div>

Любая помощь очень ценится, заранее спасибо
Крис.

Ответы [ 3 ]

1 голос
/ 06 января 2016

Если все в порядке с полученным результатом, попробуйте получить новую информацию об отходах, используя Facebook Debugger .

Это потому, что Facebook использует свой собственный кеш для og: data.

0 голосов
/ 28 декабря 2016

По моему опыту:

  • Все URL должны быть абсолютными (даже значение og: image)
  • Если ваше изображение подается одинаково по https, вы должны добавить og:Мета-свойство image: secure_url с абсолютным URL-адресом (если вы обслуживаете все только через https, вы можете пропустить это)
  • Добавьте также метаданные og: image: width и og: image: height

Перенаправление основного URL очень сложно, вы должны быть абсолютно уверены, что ваш контент правильно (и полностью) извлечен, для сложного динамического контента я часто заканчиваю тем, что выполняю обнаружение в .htaccess для обслуживания контента, соответствующего сканеру FB, следующим образом: 

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/[0-9]
RewriteRule ^(.*)$ OG_GENERATOR_SCRIPT_HERE.php [L,QSA]
0 голосов
/ 11 января 2012

Не видя вывода HTML из вашего кода, я мог только догадываться о проблеме. Не используйте относительный URL-адрес, такой как <%=shortUrl%>, но обязательно используйте полный URL-адрес .... то, что имеет http (s): // на нем.

Также, http://developers.facebook.com/docs/share/ говорит, что эта кнопка общего доступа устарела. Пожалуйста, переключитесь на использование кнопки «Мне нравится»: http://developers.facebook.com/docs/reference/plugins/like/

...