CODEWITHSUNDEEP
javascriptfacebookfacebook-javascript-sdksocial-networkingsharing
mr.incredible
mr.incredible

Reputation: 4225

Facebook javascript SDK share image issue

I want to make custom button for an image sharing via Facebook.

I've added JS SDK script at first:

<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Then I've added FB.ui function on button click:

$('.fb.btn').click(function() {
   // Open FB share popup
   FB.ui({
      method: 'share_open_graph',
      action_type: 'og.shares',
      action_properties: JSON.stringify({
            object: {
               'og:url': window.location.href,
               'og:title': 'My Title',
               'og:description': 'Some description here',
               'og:image': 'img url'
            }
      })
   },
   function (response) {
      // Action after response
   });
});

So, I want to specify link for the main page of my website as og:url.

Also I want to specify picture for sharing which is in images folder.

But FB.ui function ignores all og parameters except og:url. It takes website URL and pulls all parameters from the URL but not from specified params in FB.ui function. It doesn't show specified image inside shared link, it just gets any image from the main link (og:url). The same for title.

Why it takes all stuff from one page anyway despite that fact that I can specify these params separately?

I want to pass www.example.com as og:url, Hello World as og:title and www.example.com/images/hello.jpg as og:image.

How to use FB.ui function and pass exact the same params as I specified regardless to og:url page?

Upvotes: 1

Views: 1623

Answers (1)

mr.incredible
mr.incredible

Reputation: 4225

I figured out that it works for me only if I put static page with proper og: tags on my domain and then give a link for sharing right for this special page.

Make request for sharing link via Facebook example:

function share_fb(url) {
   window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url),'sharer','toolbar=0,status=0,width=1200,height=630', '_blank');
}

var shareLinkFB = 'www.example.com/page_for_fb_sharing.html';

share_fb(shareLinkFB);

Example page for sharing link ( www.example.com/page_for_fb_sharing.html ) on your server:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
   <meta property="og:title" content="My website title" />
   <meta property="og:description" content="Some description" />
   <meta property="og:caption" content="Also caption" />
   <meta property="og:image" content="www.example.com/images/sharing_image.png">
   <meta property="og:url" content="www.example.com/page_for_fb_sharing.html">

   <title>Playstation</title>
</head>
<body>
   <!-- just empty body -->
</body>
</html>

And now Facebook must show title and image properly in sharing message when you make request within share_fb function.

Also this page might be dynamic ( i.e. www.example.com/page_for_fb_sharing/{id} ) if you configure route on the backend but the main thing is to have identical URLs for og:url meta tag and for sharing link itself respectively otherwise Facebook will not find your sharing page and sharing link will be broken.

So that using this approach you can prepare a bunch of static pages and give different sharing links according to them or make dynamic page. Also you can put JS script in the body of this sharing page and make auto redirect to another page to have one sharing page especially for FB share rendering but dynamic for further redirect hit.

<script>window.location.replace('www.example.com/quiz_result.html?result={value}');</script>

There is no need to use FB SDK at all in this case.

Remove <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Upvotes: 0

Related Questions