Как управлять изображением для кнопки "Нравится" Facebook?

Facebook теперь использует протокол OpenGraph. Вы можете добавить изображения с помощью:

<meta property="og:image" content="http://ВАША_ССЫЛКА_НА_ИЗОБРАЖЕНИЕ" />

Добавьте эту строку в заголовок вашей страницы.

Либо вы можете использовать мой плагин для автоматического выполнения этой задачи.

Он просто выполняет эту работу и не требует никаких настроек.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Вам необходимо использовать протокол Facebook Open Graph. Я не уверен, почему принятый ответ не относится к множеству ответов, связанных с OG: (за которые я проголосовал), но он является неправильным.

http://developers.facebook.com/docs/opengraph/

Используя Open Graph, вы можете настроить множество параметров, включая заголовок, изображение, описание, категорию, дату последнего обновления и т.д. Если вы используете другие полумеры, вы упускаете общую картину.

Если бы я не следовал протоколу OG во всех моих проектах для Facebook, меня бы уволили.

Если сделать следующее:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Вы обнаружите, что WordPress выводит HTML, необходимый для отображения изображения, а не только SRC, который вам действительно нужен.

Если сделать так:

<?php

// Изображение записи для Facebook Like
$feature_image = get_the_post_thumbnail($post->ID);

// Получаем источник изображения
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

вы получите только URL. Возможно, это длинный путь, и его можно сократить, но он точно решает проблему.

Надеюсь, это поможет вам найти правильное решение.

Мэтт.

Убедитесь, что вы проверили ваш URL здесь, если указанное изображение отображается некорректно:

http://developers.facebook.com/tools/lint/

Если вы хотите использовать первое изображение из вашей записи в качестве миниатюры с резервным вариантом, например, вашего логотипа, попробуйте мой плагин - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Объяснение по добавлению резервного изображения логотипа находится по адресу http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://ВАША_ССЫЛКА_НА_ИЗОБРАЖЕНИЕ" />

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

Без этого мета-тега вы можете выбирать из всех изображений на связанном сайте.

Кто-нибудь знает способ сохранить статичное изображение для "лайков", но при этом позволить выбирать изображение при публикации ссылки?

Хорошо, я написал немного JavaScript для заполнения мета-тега og:image выбранным мною изображением записи. Это одноразовый хак, который нужно добавить в файл заголовка.

В моей записи WordPress я добавляю ID "featured-image" к изображению (я знаю, что в более новых версиях WordPress это встроенная функция, но у меня старая версия).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Я создаю мета-тег для og:image с заглушкой, например, логотипом блога. Добавляю "id="meta-image" к тегу, например:

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Затем добавляю этот JavaScript в заголовок:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  

<script type="text/javascript">  
$(document).ready( function(){  
    var featured_image = $("#featured-image").attr("src");  
    $('meta[property="og:image"]').attr("content",featured_image);  
});  
</script>