使用Facebook share_open_graph进行矩形图像的动态对话,而不是方形

时间:2017-05-26 15:50:15

标签: javascript facebook facebook-graph-api

我们拥有充满活力的成就"对于通过Facebook登录我们网站的用户,我们希望允许他们发布到Facebook。一些成就将使用小方块,但我们希望其他人有一个大的矩形图像。

我们还需要能够检测他们何时发布。

我们成功使用了https://www.facebook.com/sharer.php,但它不再使用" redirect_uri"所以我们无法检测用户何时发帖。

接下来我们成功整合了https://www.facebook.com/dialog/feed?但是,根据Facebook的说法,能够指定'图片,' name'和'描述' 2017年7月17日之后将不再有效 - https://developers.facebook.com/docs/sharing/reference/feed-dialog

我发现这篇文章Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results可以解决能够动态创建共享对话框的问题。但是,使用1200 x 630的大图像仍会呈现一个小方块。

以下是代码:

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

上述作品,但图像始终是正方形。

我已经看到了移除apid的建议,但这没有用。

我也尝试使用调试来重新扫描图像等,但这也不起作用。

1 个答案:

答案 0 :(得分:0)

我无法让share_open_graph工作,但我确实找到了这个有用的页面:https://forums.coronalabs.com/topic/53740-tutorial-how-to-customize-the-facebook-share-dialog-using-dynamic-meta-tags/

您基本上将常规共享与href中的获取值一起使用到您网站上的自定义页面:

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

});

然后在http://mywebsite/custom.php中使用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>

现在,如果图像是一个大矩形,它会以这种方式显示,如果它是一个正方形,那么它就是一个正方形。