Як я можу контролювати зображення у форматі Facebook? [зачинено]


13

У мене є блог з деякими публікаціями, і в кожному дописі є вбудована кнопка Facebook, як . Натискання кнопки відкриває діалогове вікно, щоб мої відвідувачі могли поділитися публікацією у Facebook із коментарем.

Однак при спільному використанні зображення, вибране Facebook, є загальним значком пошти, а не мініатюрою публікації.

Як я можу контролювати зображення, яке використовується під час обміну?


Цей сайт нещодавно зламали, мабуть ...
— MirroredFate

1
Ледве не питання Wordpress ...
— Kaaviar

Відповіді:


7

Зображення, яке використовується для обміну, взято з шматка коду в заголовку вашого сайту, який буде виглядати приблизно так:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Зазвичай він посилається на скріншот вашого сайту в темі. Якщо ви видалили код із заголовка файлу, а на single.php поклали його всередину циклу і зателефонували до мініатюрного зображення після публікації в елемент href, я вважаю, що він буде працювати. Так би виглядало приблизно так:

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

Це означає, що якщо у вас є кнопки на сторінках, у яких перераховано кілька публікацій, ви, мабуть, не матимете зображення. Якщо ви включили якийсь умовний код, який видалив його лише на single.php, тоді у вас буде нормальне зображення на будь-якій сторінці з декількома публікаціями та подібною кнопкою та мініатюрою повідомлення при використанні шаблону single.php. Таким кодом заголовка буде:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Тоді ви все одно будете використовувати код, щоб включити мініатюру повідомлення в single.php.


3
Це було позначено як можливо застаріле, будь ласка, поновіть свою відповідь (можливо, щось на кшталт "це було тоді, зараз це працює краще").
— Рарст

11

Зараз Facebook використовує протокол opengraph. Ви можете додавати зображення, використовуючи:

<meta property = "og: image" content = "http: // YOUR_IMAGE_URL" />

Додайте цей рядок до заголовка сторінки.

Ви також можете використовувати мій плагін, щоб зробити це автоматично.

Він просто виконує цю роботу і налаштування не потрібні.

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


5

Вам потрібно використовувати протокол відкритого графіку Facebook. Я не впевнений, чому прийнята відповідь не є однією з безлічі ОГ: відповіді (за які я проголосував), але це неправильно.

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

Ви можете налаштувати багато речей, включаючи назву, зображення, опис, категорію, останнє оновлення тощо ... якщо ви використовуєте Open Graph. Якщо ви використовуєте ці інші напіврозчини, вам не вистачає всієї картини.

Якби я не дотримувався протоколу OG за всю роботу, яку я виконував, мене звільнили б.


1

Якщо ви зробите наступне:

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

Ви побачите, що Wordpress виводить HTML, необхідний для відображення зображення, а не лише SRC, що саме ви хочете.

Робити щось на кшталт:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$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-адресу. Це, мабуть, довгий шлях і, можливо, може, але скоротити, але це, безумовно, вирішує проблему.

Сподіваюсь, це поставить вас на правильний шлях.

Метт.



0

Якщо ви хочете використовувати перше зображення вашої публікації як ескіз із запасним файлом на щось на зразок вашого логотипу, спробуйте мій плагін - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Пояснення для додавання Зображення запасного логотипу знаходиться на веб-сайті http://blog.ashfame.com/?p=888


0
<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Цей метод працює для "like": s, але пізніше, якщо ви хочете поділитися посиланням в журналі ур (напр.), Це зображення вибрано автоматично.

Без цього метатега ви можете вибрати з усіх зображень на пов'язаному сайті.

Хто-небудь знає будь-який спосіб зберегти статичний "подобається" образ, але все-таки змусити вас вибрати зображення під час спільного використання URL-адреси?


0

Гаразд, я написав трохи javascript, щоб заповнити зображення Meta og: зображення із зображенням на власний вибір. Це одноразовий хакер, який ви додаєте до свого заголовкового файлу.

У своєму дописі wordpress я додаю ідентифікатор "featured-image" (я знаю, що з пізнішим wordpress це вбудований, я перебуваю на старому).

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

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

<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);
});

Використовувати wp_enqueue_script()для завантаження Javascript у WordPress.
— фуксія

Це насправді працює? Я вже пробував щось подібне без успіху - налагоджувач Facebook не впізнає мого зображення. Я не думаю, що це розбір JavaScript.
— benedict_w
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.