如何触发Facebook像button从自定义button？

我创build了一个自定义的Facebookbutton。

如何做到这一点，当我点击button，它会触发像Facebook提供的像button一样的button？

Answer 1

根据facebook社交插件的政策 4点说：

“不要模糊或掩盖社交插件的元素。”

您不能直接更改图片，因为它是由Facebook提供的。

Answer 2

Facebookbutton位于iFrame中，其源位于Facebook的不同域，因此您不能更改该button，因为它受同源策略的保护。

此外， Facebook的政策禁止在使用Facebook上的embedded式内容（如社交button）时更改其button和徽标。

所以，你不可能改变FBbutton，即使你可以这样做，将违反Facebook的服务条款。

但是，如果你仍然想这样做，你可以使用原生Facebookbutton，并在Facebook上方或下方放置自己的图像来伪造自定义button。

只有使用CSS3指针事件才能将图片放置在顶部，这将使您的图片点击，点击事件将“透过”您的图片，实际上点击Facebookbutton。 这只适用于支持指针事件的新型浏览器。

另一种select是将图像放在FBbutton后面，并将FBbutton的不透明度设置为零。

我已经使用了几次自己，并在Facebook代码中挖掘一下，你可以附加hover事件和其他一切，使它看起来像一个自定义button。 你将不得不find什么元素来设置opacity : 0 。

从来没有花费任何时间试图弄清楚如何使自定义button上的原始button的不同function工作，但它可能是可能的。

我所有尝试用javascript或jQuery trigger（）实际触发FBbutton都失败了，但也许别人已经想出了如何做到这一点？

Answer 3

当你用类似fb的类创build一个html元素时，facebook javascript SDK在文档加载时用类似button将其转换。 当用户点击自定义button时，您可以创build自定义元素并触发类似button的点击事件。

例如 ：

 <input type="button" id="mycustombutton" value="Like"> <div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> 

jQuery代码：

 $("#mycustombutton").click(function(){ $(".fb-like").find("a.connect_widget_like_button").click(); // You can look elements in facebook like button with firebug or developer tools. }); 

更新

Facebook SDK一直在iframe中创build类似button，浏览器不允许干预页面中的iframe。 我认为添加事件监听器元素在iframe不可能了。

Answer 4

我认为，Facebook会竭尽全力确保用户无法触发“赞”button。 这是为了防止脚本在有人访问网站时自动点击“赞”button。

您可以使用CSS来覆盖它的样式，并显示您的图像。

Answer 5

这是不允许的，因为它会导致欺诈。 试想一下，如果您每次点击networking上的图片，都不知道它是否是实际的图片，或者是否会导致类似情况，并显示在您的FB Feed中。 这将是灾难性的。

如果您确实想要合法执行此操作，则需要创build应用程序，并在用户访问您的网站时授权该应用程序。 这将打开一个popup窗口，用户同意让应用访问他的FB账户。 一旦完成，您可以通过服务器端脚本代表用户发送类似的请求。 换句话说，这是不值得的。

另一方面，如果你只是想得到一个网页的相似数，然后显示它，你可以通过"http://graph.facebook.com/#{url}"的请求来完成。一个JSON有效载荷与喜欢的数量。 在jQuery中，它将是：

$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });

Answer 6

你可以将你的button覆盖在Facebook的button之上，并使用css来隐藏Facebookbutton。 不知道这个的合法性。

Answer 7

你可以尝试触发一个像这样的Ajax请求

 FB.api( 'me/og.likes', 'post', { object: "http://samples.ogp.me/226075010839791" }, function(response) { // handle the response } ); 

https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes

Answer 8

http://sharingbuttons.io/允许;社交媒体分享button没有JavaScript （不像一个喜欢在问题的button…）。 对于Facebook，它只是使用这样的链接：

  <a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackoverflow, you have to cmd + click to open the link in a new window.