• Home
  • WordPress
  • Set custom image in FB.ui Facebook Share Dialog in v2.10+

Set custom image in FB.ui Facebook Share Dialog in v2.10+

Since Facebook Javascript API removed the picture parameter in v2.10 and 2.9 was shut down on July 17 2017 there’s no easy way to share an image with a link back to your page.

Facebook will always use your og:image no matter what you provide in FB.ui parameters.

Share an image with Javascript API 2.10

Here is my workaround:

  • I append the desired image as an URL parameter
  • Then I use filters from WordPress SEO by Yoast to write the Open Graph meta data according to the URL parameter
  • Facebook detect’s each of the URLs as individual page so it has to scrape each one individually

Here is my HTML Code: a wrapper containing the image and a share button:

In my Javascript code I simply get the page url and the image url ans put them together with URL parameter og_img

Facebook gets a separate URL for each of my images now.

The next step ist to customize the Open Graph data according to the URL parameter. I use WP SEO by Yoast but you could also output the OG data manually.

Add this to your functions.php

Note: You should not use a share-counter on this page because when each image has its own URL your base URL share counter wont increase.

 

3 thoughts on “Set custom image in FB.ui Facebook Share Dialog in v2.10+”

  1. Have you tried setting image width and height?

    those action_properties don’t seem to be respected;(

    ‘og:image:width’: ‘1200’,
    ‘og:image:height’: ‘622’

Leave a Reply

Your email address will not be published. Required fields are marked *