CSS onClick：在 Facebook 上分享图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17139272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onClick: share image on Facebook
提问by iGio90
I would like to setup an onClick function to an image on my new website that launch Facebook sharer.
我想在启动 Facebook 共享器的新网站上为图像设置 onClick 函数。
Here are some pieces of code that may help understand what I'm talking about
以下是一些可能有助于理解我在说什么的代码
<div id="mImageBox">
<img id='my_image' src='' width="auto" height="auto"/>
</div>
The image src is blank because it's injected by another JavaScript function by using "my_image"
图像 src 是空白的，因为它是由另一个 JavaScript 函数使用“my_image”注入的
so, I tried to setup the onClick function with this method:
因此，我尝试使用此方法设置 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>
The onClick function works well, however, it links to the page where the img is located and not the img itself!
onClick 函数运行良好，但是，它链接到 img 所在的页面而不是 img 本身！
Have you got any suggestion for me?
你对我有什么建议吗？
回答by Dani-Br
try this:
尝试这个：
<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>
You don't need to use <a> tag (surrounding the <img> tag) for case that JS disabled, because in that case the JS that should inject the srcattribute will not work also.
对于禁用 JS 的情况，您不需要使用 <a> 标记（围绕 <img> 标记），因为在这种情况下，应该注入src属性的 JS 也将不起作用。
回答by nativegrip
Just call below function and you can share Image with your Link and Text on Facebook.
只需调用下面的函数，您就可以在 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');
}
}
);
回答by Hannes
Since Facebooks Javascript API 2.9 is dead since last week the solution above doesn't work any more ( I took me half a day to find this out!!! ). In v2.10 the picture-parameter of FB.ui doesn't exist any more. But I found a workaround generating an individual URL parameter for each image so Facebook has to scrape Open Graph data for each shared image individually. I've shared my code in this postfor your reference.
由于 Facebook 的 Javascript API 2.9 自上周以来已失效，因此上述解决方案不再有效（我花了半天时间才发现这一点！！！）。在 v2.10 中，FB.ui 的图片参数不再存在。但我找到了一种为每个图像生成单独 URL 参数的解决方法，因此 Facebook 必须单独为每个共享图像抓取 Open Graph 数据。我在这篇文章中分享了我的代码供您参考。
