时间戳

首页 > 解决方案 > 如何在 Wordpress 帖子循环中使用自定义图像创建自定义 Facebook 共享链接

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

问题描述

我有一个 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>

但是，当弹出窗口显示时，它从不显示我传递给 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');

标签： javascriptphpwordpressfacebook

解决方案

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

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

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

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

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

推荐阅读