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:

<div class="my-image-container">
    <img src="http://mysite.com/image.jpg">
    <a href="#" class="fb-share-image">Share</a>');
</div>

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

window.fbAsyncInit = function() {
    FB.init({
        appId            : 'YOUR APP ID',
        status           : true,
        cookie           : true,
        version          : 'v2.10'                
    });
    
    $( '.fb-share-image' ).click(function(e){
        e.preventDefault();
        var image = $(this).siblings('img').attr('src');

        FB.ui(
                {
                    method: 'share',
                    href: $(location).attr('href') + '?og_img=' + image,
                },
                function (response) {

                }
            );
    })
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

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

// functions.php
add_filter('wpseo_opengraph_image',function( $img ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $_GET['og_img'];
    return $img;
});

add_filter('wpseo_opengraph_url',function( $url ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $url . '?og_img=' . $_GET['og_img'];
    return $url;
});

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.