9

我想在我的新网站上为启动 Facebook 共享器的图像设置 onClick 功能。

这里有一些代码可以帮助理解我在说什么

<div id="mImageBox">
<img id='my_image' src='' width="auto" height="auto"/>
</div>

图像 src 是空白的，因为它是由另一个 JavaScript 函数使用“my_image”注入的

所以，我尝试使用这种方法设置 onClick 函数：

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>

<div id="mImageBox">
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank"><img id='my_image' src='' width="auto" height="auto"/></a>
</div>

onClick 函数运行良好，但是，它链接到 img 所在的页面，而不是 img 本身！

你对我有什么建议吗？

4

3 回答 3

15

尝试这个： 

<div id="mImageBox">
<img id='my_image' src='' alt='' width="auto" height="auto" onclick="fbs_click(this)"/>
</div>

<script>
     function fbs_click(TheImg) {
     u=TheImg.src;
     // t=document.title;
    t=TheImg.getAttribute('alt');
    window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>

对于 JS 禁用的情况，您不需要使用 <a> 标签（围绕 <img> 标签），因为在这种情况下，应该注入src属性的 JS 也将不起作用。

于 2013-06-17T01:31:39.610 回答
13

只需调用以下函数，您就可以在 Facebook 上与您的链接和文本共享图像。

function sharefbimage() {
    FB.init({ appId: `your appid`, status: true, cookie: true });
    FB.ui(
    {
        method: `share`,
        name: 'Facebook Dialogs',
        href: $(location).attr('href'),
        link: 'https://developers.facebook.com/docs/dialogs/',
        picture: 'your image url',
        caption: 'Ishelf Book',
        description: 'your description'
    },
    function (response) {
        if (response && response.post_id) {
            alert('success');
        } else {
            alert('error');
        }
    }
);
于 2015-09-10T10:42:05.183 回答
0

由于自上周以来 Facebook 的 Javascript API 2.9 已失效，因此上述解决方案不再起作用（我花了半天时间才发现这一点！！！）。在 v2.10 中，FB.ui 的图片参数不再存在。但是我找到了一种解决方法，可以为每个图像生成一个单独的 URL 参数，因此 Facebook 必须单独为每个共享图像抓取 Open Graph 数据。我在这篇文章中分享了我的代码供您参考。

于 2017-07-23T07:53:29.383 回答