如何在 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調試工具

如何在 Wordpress 后循環中使用自定義圖像創建自定義 Facebook 共享鏈接

問題描述

2 個解決方案

解決方案1
0 2021-05-21 20:45:27

解決方案2
0 2021-05-21 20:53:05

如何在 Wordpress 后循環中使用自定義圖像創建自定義 Facebook 共享鏈接

問題描述

2 個解決方案

解決方案1 0 2021-05-21 20:45:27

解決方案2 0 2021-05-21 20:53:05

解決方案1
0 2021-05-21 20:45:27

解決方案2
0 2021-05-21 20:53:05