如何在 Wordpress 后循环中使用自定义图像创建自定义 Facebook 共享链接

Question

我有一个 wordpress 页面，该页面显示特定类别中的帖子列表。 我的客户希望在页面上列出的每个帖子旁边都有一个“分享到 facebook”按钮，以便用户可以将帖子分享到 facebook。

我在 Wordpress 循环中为这个按钮构建了一个自定义链接：

 <a title="Share this on Facebook!" style="color:#4267B2;" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[url]=<?php echo $url ?>&p[images][0]=<?php echo $img ?>&p[title]=<?php echo $name ?>&p[summary]=<?php the_excerpt() ?>">Share on Facebook</a>

但是，当弹出 window 显示时，它从不显示我传递给 sharer.php 的自定义图像、标题等。 它只是从网站上提取徽标作为帖子的图像。

有没有办法告诉 sharer.php 在帖子中显示自定义图像，而不是从网站上提取徽标？

这是我的完整循环代码（使用简码）：

function memorial_page() {
ob_start();
?>
<div class="staff-page">
    <?php
    $args = array(
        'category_name' => 'Memorial',
        'posts_per_page' => '-1',
        'order' => 'ASC'
    );
    $loop = new WP_Query($args);
    if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post();
    $id = get_the_ID();
    $img = get_the_post_thumbnail_url($id);
    $name = get_the_title();
    $url = get_the_permalink( $id );
    //$totalurl = urlencode ($url.'?img='.$img);
    //$totalurl = $url.'?img='.$img
    ?>
    <div class="staff-card" id="staff-<?php echo $id ?>">
        <img src="<?php echo $img ?>" alt="<?php echo $name ?>">
        <h3><a href="<?php echo $url ?>"><?php echo $name ?></a></h3>
        <p><?php the_content() ?></p>
        <a title="Share this on Facebook!" style="color:#4267B2;" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[url]=<?php echo $url ?>&p[images][0]=<?php echo $img ?>&p[title]=<?php echo $name ?>&p[summary]=<?php the_excerpt() ?>">Share on Facebook</a>
    </div>
<?php endwhile; endif ?>
</div>
<?php
return ob_get_clean();
 }
add_shortcode('memorial_page','memorial_page');

Answer 1

无法将图像直接传递到共享弹出窗口。 Facebook 将获取链接引用的页面并分析该页面以供任何图像使用。 它似乎默认使用您的徽标。

但是可以根据Open Graph元标记为每个特定页面或帖子设置数据。 这些标签可以放在页面的<head>标签内。 使用这些标签，您可以定义自己的标题、描述、图像等。 每当共享带有标签的页面时，来自这些元标签的数据将用于展示。

下面的代码片段使用wp_head钩子连接到 output og:title ， og:description ， og:url和og:image元标记在每个具有Memorial类别的帖子的<head>内。 （如果您希望所有页面都使用此功能，请删除if语句）。

add_action('wp_head' function() {
  if (!is_category('Memorial')) {
    return;
  }

  $og_meta_properties = [
    'title'       => esc_html__(get_the_title()),
    'description' => esc_html__(get_the_excerpt()),
    'url'         => get_the_permalink(),
    'image'       => get_the_post_thumbnail_url()
  ];

  foreach($og_meta_properties as $property => $content) {
    echo "<meta property=\"og:{$property}\" content=\"{$content}\" />";
  }
}, 10);

结果现在应该是共享帖子显示帖子缩略图而不是徽标。

Answer 2

您可以使用此 facebook 打开图形调试器工具来确认您的更改是否按预期工作。 （注意，您需要登录您的 facebook 帐户才能使用它。）

Facebook og调试工具