Question 166052 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I create custom FB share links w/ custom images in WordPress post loops?

I have a wordpress page that displays a list of posts within a specific category. My client wants to a "Share to facebook" button next to each post listed on the page so that users can share the post to facebook.

I have built out a custom link for this button in the WordPress loop:

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

However, when the popup window displays, it never shows the custom image, title etc that I pass to sharer.php. It just pulls the logo from the website as the image for the post.

Is there a possible way to tell sharer.php to display a custom image with the post, instead of pulling the logo from the website?

Here is my full code for the loop (using a shortcode):

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');
Tags:

2

Answers


  1. 0

    It’s not possible to pass an image directly to the share popup. Facebook will fetch the page the link references to and analyzes the page for any images to use. It seems that it defaults to the usage of your logo.

    But it is possible to set the data for each specific page or post based on Open Graph meta tags. These tags can be placed inside the <head> tag of a page. With these tags you can define your own title, description, images, .etc. Whenever the page with the tags is shared, the data from these meta tags are used for presentation.

    The snippet below uses the wp_head hook to output a og:title, og:description, og:url, and og:image meta tags inside the <head> of each post that has the Memorial category. (If you want this for all pages, remove the if statement).

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

    The result should now be that the shared post shows the post thumbnail instead of the logo.

    Login or Signup to reply.
  2. 0

    You can use this facebook open graph debugger tool to confirm that your changes are working as desired. (Note, you need to login to your facebook account to use it.)

    Facebook og debug tool

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search