Facebook 分享按钮 CSS 不适用答案

【问题标题】：Facebook share button CSS not applyingFacebook 分享按钮 CSS 不适用
【发布时间】：2017-12-15 15:48:42
【问题描述】：

我正在使用 Facebook API 来确保我的网站可以通过按钮共享。

此时，共享功能运行良好，但由于某种原因，它只显示按钮（“共享”）内的文本，而不是我想要显示的蓝色漂亮按钮。

这是它的样子（“Partager”在法语中的意思是“分享”）：

Facebook share debugger 给我发回“206”响应，表示一切正常。

有趣的部分：有时按钮可以正常显示，但我刷新页面后就无法使用了！

这是我所做的：

HTML，在<head> 标签中：

<meta property="og:url"           content="https://www.mywebsite.com" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="My Title" />
<meta property="og:description"   content="My description" />
<meta property="og:image"         content="https://www.mywebsite.com/img/shareFB.jpg" />
<meta property="fb:app_id"        content="[MY_APP_ID_WHICH_IS_A_NUMBER]"/>

HTML，在<body>declaration 之后：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function(){
    FB.init({
      appId            : '155741968487477',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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 = 'https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.11&appId=[MY_APP_ID_WHICH_IS_A_NUMBER]';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

HTML，我希望按钮显示的位置：

<div class="fb-share-button" data-href="https://www.mywebsite.com" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mywebsite.com%2F&amp;src=sdkpreparse">share</a></div>

【问题讨论】：

也许试着把它做成一个按钮，而不是一个div？
来自 Facebook 的教程：
your-domain.com/your-page.html" data-layout="button_count">
。格式应该由 CSS 类进行，这是我的问题。
哇哈哈等一下，为什么里面有？只需将文本放在 div 之间！
我也试过了，还是不行。实际上我不想要一个“计数”按钮，所以我在上一条评论中给你的代码与我无关。这样做：
developers.facebook.com/docs/plugins" data-layout="button" data-size="large" data-mobile-iframe="true">facebook.com/sharer/…>
“格式应该由 CSS 类生成，这是我的问题。” - 不，不是。首先，除了文档中为此目的描述的选项之外，您不应该更改任何社交插件的外观和感觉。其次，您不能使用 CSS 对其进行格式化，因为它们在来自不同来源的 iframe 内呈现，而您完全没有访问这些来源。如果您想使用自己的按钮，请制作您自己的按钮，并通过href 或点击通过FB.ui 调用分享或订阅对话框

【解决方案1】：

你在使用虚拟 dom 吗？我遇到了同样的问题，当我在确切的页面中使用 react-helmet 添加脚本标签作为共享按钮时，然后出现了对脚本的网络请求。

<Helmet>
        <meta property="og:url"           content={WEBSITE_URL} />
        <meta property="og:type"          content="website" />
        <meta property="og:title"         content={META_TITLE} />
        <meta property="og:description"   content={META_DESCRIPTION} />
        <meta property="og:image"         content={`${WEBSITE_URL}/casino.jpg`} />
        <meta name="twitter:url"          content={WEBSITE_URL}/>
        <meta name="twitter:title"        content={META_TITLE}/>
        <meta name="twitter:description"  content={META_DESCRIPTION}/>
        <meta name="twitter:image"        content={`${WEBSITE_URL}/casino.jpg`} />
        <div id="fb-root"></div>
    <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
    <script src="https://platform.twitter.com/widgets.js"></script>
</Helmet>
        <a class="twitter-share-button"
            url={WEBSITE_URL}
            href={getURLWithQueryParams({text: "I just won on Clover Casino!"}, "https://twitter.com/")}>
            Tweet
          </a>

          <div class="fb-share-button" 
          data-size="large"

            data-href={TEMP_WEBSITE_URL_WITH_DOMAIN}
            data-layout="button" data-size="small">
            <a
              href={getURLWithQueryParams({u: WEBSITE_URL}, "https://www.facebook.com/sharer/sharer.php")}
              class="fb-xfbml-parse-ignore">
              share
            </a>
          </div>

【讨论】：