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

Question

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

如何点击按钮，它会触发Facebook提供的类似按钮，如下所示？

Answer 1

根据社交插件的facebook policy第4点说明：

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

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

Answer 2

Facebook按钮位于iFrame中，其源位于不同的域，即Facebook的域名，因此您无法更改按钮，因为它受same-origin policy.

的保护

此外，Facebook’s policy禁止在使用Facebook的嵌入式内容时更改按钮和徽标，例如社交按钮。

所以，你不能想要改变FB按钮，即使你可能会违反Facebook的服务条款。

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

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

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

我自己已经多次使用过这种方法，只需在Facebook代码中进行一些挖掘，就可以附加悬停事件和其他所有内容，使其看起来像一个自定义按钮。您必须找到要设置opacity : 0的元素。

从未花费任何时间试图弄清楚如何使原始按钮的不同功能在自定义按钮上工作，但它可能是可能的。

我用javascript或jQuery触发器（）实际触发FB按钮的所有尝试都失败了，但是也许其他人已经想出怎么做了？

Answer 3

当您使用类似fb的类创建html元素时，facebook javascript SDK会在加载文档时使用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

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

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

另一方面，如果你想获得一个页面的相同数量并显示它你想要的，你可以通过"http://graph.facebook.com/#{url}"的请求来这样做，这将返回一个带有喜欢的数量的JSON有效载荷。在jQuery中它将是：

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

Answer 5

我认为facebook经过不遗余力的确保人们无法触发＆＃34; Like＆＃34;按钮。这是为了防止脚本自动点击＆＃34; Like＆＃34;有人访问网站时按钮。

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

Answer 6

您可以将按钮叠加在Facebook之类的按钮上，然后使用css隐藏Facebook按钮。 但是不确定这是否合法。

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/允许社交媒体共享按钮完全没有javascript （不像问题中那样的按钮......）。对于Facebook，它只使用这样的链接：

＆＃13;

＆＃13;

    <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. 

＆＃13;

＆＃13;

＆＃13;

使用您自己的CSS自定义它，并且为了模仿分享按钮，只需在弹出窗口中打开网址而不是目标=＆＃34; _blank＆＃34;。