Кастомная кнопка поделиться Facebook с настраиваемым заголовком, URL и изображением в WordPress

Question

Кастомная кнопка поделиться Facebook с настраиваемым заголовком, URL и изображением в WordPress

27 авг. 2014 г., 10:12:56

Просмотры: 40.4K

Голосов: 1

На странице всех моих постов есть кнопка поделиться (через плагин AddThis).

Когда я нажимаю поделиться в Facebook, он берет URL и заголовок, но показывает какие-то другие изображения. Вот пример.

Я попытался сделать кастомную кнопку поделиться, код которой приведен ниже, но при нажатии ничего не происходит.

<?php
    $title = the_title();
    $url = the_permalink();
    $summary = urlencode('Пользовательское сообщение, которое описывает содержимое вашей вкладки, или просто простое сообщение, призывающее людей проверить вашу вкладку.');
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
?>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">
        Поделиться на странице Facebook!
    </a>

Я также добавил теги Open Graph в мой header.php между тегами <head>:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />

Все посты с моего сайта должны быть доступны для публикации на Facebook и Twitter с их URL, заголовком, изображениями и описанием. Вот рабочая ссылка для примера.

user3209031

121

кастомизация facebook

Все ответы на вопрос

Как насчет использования переменной u для передачи вашего URL и позволить Facebook получить содержимое с помощью тегов Opengraph?

Например, вот так:

<a onClick="window.open('http://www.facebook.com/sharer.php?u=<?php echo $url; ?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">Кастомная кнопка "Поделиться на Facebook"!</a>

Carlos Faria

487

27 авг. 2014 г. 10:29:40

Комментарии

эй, спасибо, пожалуйста, проверьте мою обновленную ссылку для примера.. я имею в виду сайт, который использует такие функции

user3209031

27 авг. 2014 г. 10:32:01

эй, как вы сказали, я сделал это.. но все еще не работает, пожалуйста, проверьте демо-ссылку

user3209031

27 авг. 2014 г. 10:36:09

user3209031 121 · Accepted Answer · 2014-08-27T13:29:59Z

После долгих поисков туда-сюда я нашел решение для вышеуказанной проблемы:

Заменил вышеуказанный мета-тег на следующий:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );  ?>

<?php if($image[0] != "" ){ ?>

<meta property="og:image" content="<?php echo $image[0]; ?>"  >

<?php } else { ?>

<meta property="og:image" content="logo.png"  >

<?php } ?>


<meta property="og:image:width" content="3523" >

<meta property="og:image:height" content="2372" >

<meta property="og:url" content="<?php echo the_permalink(); ?>"  >

<meta property="og:title" content="<?php echo the_title(); ?>"  > 

<meta property="og:site_name" content="Thefansworld" />

<meta property="og:description" content="" >  

<meta property="fb:app_id" content="3668661019" >

<meta property="fb:admins" content="" >

 <?php endwhile; wp_reset_query(); ?>

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

Когда Facebook получает веб-страницу по URL, он кэширует ее содержимое для последующего использования. Это означает, что если Facebook один раз получил данные с вашего сайта, а затем ваш сайт изменился (например, изменились теги og:image), Facebook не изменит изображение, так как у него уже есть закэшированные данные.

Попробуйте посетить страницу Facebook Debugger и посмотрите, что Facebook "видит". Использование этого инструмента заставляет Facebook обновить данные для данного URL. Это лучший способ отладки.

Когда вы убедитесь, что Facebook "видит" правильные теги og:image, убедитесь, что изображения в og:image имеют правильные минимальные ширину/высоту (все это объяснено в Facebook Debugger).

Facebook не будет использовать изображение из og:image, если оно не соответствует критериям Facebook. Я настоятельно рекомендую этот инструмент при любых проблемах с контентом вашего сайта на Facebook.

Надеюсь, это поможет кому-то. И если я где-то ошибаюсь, пожалуйста, дайте мне знать :)