Як я можу контролювати зображення у форматі 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.