如何更改Facebook分享按钮的样式？ [英] How to change the style of the Facebook share button?

问题描述

我知道之前曾有人问过这个问题，但是答案要么过时（谈论iframe），要么是错误的（不允许更改它），要么是令人困惑。

I know this question has been asked before, but the answer is either outdated (talking about iframes), wrong (not allowed to change it), or confusing.

从头至尾，您如何更改Facebook共享按钮的样式？

Once and for all, how do you change the style of the Facebook share button?

将其代码粘贴到我的网站中会产生尺寸和大小不一的丑陋外观错误的语言。

Pasting their code into my site produces some ugly looking thing of the wrong size and in the wrong language.

我希望它看起来像我网站上的其他按钮，并且我希望它上面的文字像我说的那样。即使它不是我使用的确切文字，也应至少使用正确的语言，例如Twitter按钮。

I want it to look like the other buttons on my site, and I want the text on it to be what I say it should be. Even if it can't be the exact text I use, it should at least be in the right language, like the Twitter button.

在Facebook网站上的开发人员指南中，我找到了以下报价：

Browsing the dev guide on Facebook's site I found the following quote:

如果您的网站不需要按钮即可打开共享对话框或 Facebook
提供的按钮不适合您的网站设计，还提供了网络共享对话框
用于共享链接。

If your website doesn't need a button to open share dialog or Facebook provided button doesn't fit into your website design, Web Share Dialog is also provided for sharing links.

不过，网络共享对话框是我所读过的最令人困惑的内容。它给出了零实际指导，并带有一堆令人困惑的语句。

However, the Web Share Dialog is the most confusing thing I've ever read about. It gives zero actual guidance and comes with a bunch of confusing statements.

共享对话框使人们能够发布单个$ b $有关他们的时间线的故事，朋友的时间线，一组或在Messenger上的私人
消息中。这不需要Facebook登录名或任何
扩展权限，因此这是在
网络上启用共享的最简单方法。

The Share dialog gives people the ability to publish an individual story to their timeline, a friend's timeline, a group, or in a private message on Messenger. This does not require Facebook Login or any extended permissions, so it is the easiest way to enable sharing on the web.

什么？没有Facebook帐户的人可以在时间表上分享内容吗？他们甚至没有时间表...

What? People without Facebook accounts can share things on their timeline? They don't even have a timeline...

使用FB.ui函数和共享方法$ b $触发共享对话框共享链接的b参数。

Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link.

我不知道它是什么，他们也不解释。

I have no idea what it is and they don't explain it.

这种情况不断发生，我从字面上理解什么都没有，而且我不是一些愚蠢的Wordpress博客作者。

This goes on and on, and I literally understand NOTHING and I'm not some stupid Wordpress blogger.

可以有人请解释一下由于Facebook拒绝而怎么做？

编辑：我已经了解到了Facebook Javascript SKD，但它要求 app_id 。

I've gotten as far as using the Facebook Javascript SKD now, but it requests an app_id.

其页面上显示的是 app_id 是：

您应用的唯一标识符。必需。

Your app's unique identifier. Required.

但是我不是在开发应用。我正在制作一个网页...

But I'm not making an app. I'm making a webpage...

推荐答案

首先，请忽略那些说您无法更改Facebook股份布局的人按钮。它被允许，并且很多站点都这样做。

First, ignore people who say you can't change the layout of Facebook's share button. It is allowed and a lot of sites do it.

也请忽略文档，因为它们无用，只会使您感到困惑。他们的代码段是错误的，也是他们的常见问题解答。

Also, ignore the docs because they are useless and will only confuse you. Their code snippets are wrong, and so is their FAQ.

尽管Facebook的文档声称存在其他问题，但您绝对需要创建一个 Facebook应用程序，就像开发人员/管理页面，您可以在其中编辑一些设置（并给Facebook提供您的电话号码）。

Despite Facebook's docs claiming otherwise, you absolutely need to create a "Facebook App", which is like an developer/admin page where you can edit some settings (and give Facebook your phone number).

然后，您需要在页面上初始化JavaScript SDK（不要忘记添加您从Javascript应用程序页面到 appId ）中的实际应用程序ID：

Then you need to initialize the JavaScript SDK on your page (don't forget to add your actual app id from your Javascript App page into the appId):

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

然后您可以使用所需的任何按钮，例如：

And then you can use whatever button you want, like this:

<button class="ui facebook button">Share</button>

要使其在单击时执行某些操作，请使用常规的JS或jQuery事件监听器：

To get it do something when you click on it, use regular JS or jQuery event listener:

<script>
    $(".ui.facebook.button").click(function() {
        FB.ui({
            method: 'share',
            href: 'your-webpage.html',
}, function(response){});
    })
</script>

这仅适用于正确的网页，不适用于本地。

This will only work on the correct webpage, not locally.

然后，您需要使共享页面显示正确的图像和文本。这是一个不同的主题，根据您使用的平台，它的范围从简单到令人生厌。搜索适合您情况的说明。

Then you need to make the share page show the correct image and text. This is a different topic and it can range from easy to quite annoying depending on what platform you're working with. Search for instructions that fit your case.

这篇关于如何更改Facebook分享按钮的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！