如何从自定义按钮触发Facebook按钮？

Question

我创建了一个自定义的Facebook按钮.

怎么做到当我点击按钮时,它会触发Facebook提供的类似按钮,如下所示？

Answer 1

根据facebook社交插件政策,第4点指出:

"不要掩盖或掩盖社交插件的元素."

您无法直接更改图像,因为它是由Facebook提供的.

Answer 2

Facebook按钮位于iFrame中,其源位于不同的域,即Facebook的域,因此您无法更改按钮,因为它受同源策略的保护.

此外,Facebook的政策禁止在使用Facebook的嵌入式内容时更改其按钮和徽标,例如社交按钮.

所以,你不能假设能够改变FB按钮,即使你可能会违反Facebook的服务条款.

但是......如果您仍然想要这样做,您可以使用原生Facebook按钮并在Facebook按钮的顶部或下方放置您自己的图像以伪造自定义按钮.

只有在使用CSS3指针事件时才能将图像置于顶部,这将使您的图像点击并且点击事件将"通过"您的图像并实际点击Facebook按钮.这仅适用于支持指针事件的较新浏览器.

另一种选择是将图像放在FB按钮后面,并将FB按钮的不透明度设置为零.

我自己已经多次使用过这个,并且在Facebook代码中稍微挖掘一下,您可以附加悬停事件和其他所有内容,使其看起来像一个自定义按钮.您必须找到要设置的元素opacity : 0.

从来没有花时间试图弄清楚如何使原始按钮的不同功能在自定义按钮上工作,但它可能是可能的.

我用javascript或jQuery trigger()实际触发FB按钮的所有尝试都失败了,但也许其他人已经想出如何做到这一点？

Answer 3

当您使用类似fb的类创建html元素时,facebook javascript SDK会在加载文档时使用like按钮进行转换.当用户单击自定义按钮时,您可以创建自定义元素并触发like按钮的单击事件.

例如 :

<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和浏览器中创建了类似按钮,不允许干预页面中的iframe.我认为在iframe中添加事件监听器不再可能了.

Answer 4

我认为 Facebook 竭尽全力确保人们无法触发“喜欢”按钮。这是为了防止脚本在有人访问该网站时自动单击“喜欢”按钮。

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