0

We have dynamic "achievements" for users logged in to our web site via facebook, and we want to allow them to post to facebook. Some of the achievements will use the small square but we want others to have a large rectangle image.

We also need to be able to detect when they have posted.

We successfully used the https://www.facebook.com/sharer.php however it no longer uses the "redirect_uri" so we cannot detect when a user posts.

Next we successfully integrated the https://www.facebook.com/dialog/feed? but, according to facebook the ability to specify 'picture', 'name' and 'description' will no longer work after July 17 2017 - https://developers.facebook.com/docs/sharing/reference/feed-dialog

I found this post Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results which can solve the problem of being able to create the share dialog dynamically. However, using a large image 1200 x 630 still renders a small square.

Here is the code:

FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    appId: myapid,
    action_properties: JSON.stringify({
        object : {
            'og:url': 'http://ww.mywebpage.com', // your url to share
            'og:title': 'My Title',
            'og:description': 'My Description',
            'og:image': 'http://ww.mywebpage.com/myimage.gif',
            'og:image:type':'image/gif',
            'og:image:width':'1200',
            'og:image:height':'630'
        }
    })
});

The above works, but the image is always the square.

I've seen a suggestion to remove the apid, but that didn't work.

I have also tried using the debug to re-scrape the image etc but that doesn't work either.

user3473534
  • 131
  • 1
  • 10

1 Answers1

0

I wasn't able to get the share_open_graph to work but I did find this helpful page: https://forums.coronalabs.com/topic/53740-tutorial-how-to-customize-the-facebook-share-dialog-using-dynamic-meta-tags/

You'd basically use the regular share with get vals in the href to a custom page on your site:

FB.ui({
    method: 'share',
    href: 'http://mywebsite/custom.php?t=' + title + '&d=' + desc + '&i='+image

});

Then in http://mywebsite/custom.php you populate the meta properties with the get vals:

<html>
<head>
<title>Your Website Title</title>
<meta property="og:url"           content="<?= "http://". $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" />
<meta property="og:type"         content="website" />
<meta property="fb:app_id"       content="123456" />
<meta property="og:title"        content="<?php echo $_GET['t'];?>" />
<meta property="og:description"  content="<?php echo $_GET['d'];?>" />
<meta property="og:image"        content="<?php echo $_GET['i'];?>" />
</head>

Now if the image is a large rectangle, it's displayed that way, and if it's a square, it's a square.

user3473534
  • 131
  • 1
  • 10