尝试自定义 Facebook 分享按钮时出错

Question

我想自定义一个 facebook 分享按钮，然后我尝试了这个：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v6.0"></script>


<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

但这会生成一个我无法自定义的按钮，我已经有一个具有 css 效果的 facebook 图标。然后我用我的图标试试这个：

<div id="fb-share-button">

    <a href="#" target="_blank" class="Facebook">
        <div class="inside">
            <i class="fa-facebook" style="color:#848484;font-size:16px;width:44px;height:44px;-webkit-border-radius: 50% 50% 50% 50%;-moz-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;line-height:44px;border-width:1px; border-style:solid;border-color:#848484;text-align:center;"></i>
            <div class="desc">Facebook</div>
        </div>
    </a>
</div>

<script>

var fbButton = document.getElementById('fb-share-button');
var url = window.location.href;

fbButton.addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + url,
        'facebook-share-dialog',
        'width=800,height=600'
    );
    return false;
});

</script>

这有效，但问题是它会在我的浏览器上生成关于弹出窗口的警告：

我该怎么做才能避免出现该警告？谢谢。

Answer 1

您不应该通过 CSS 更改社交插件的外观，但您有 2 个其他选项：

使用FB.ui Share Dialog
使用sharer.php

Answer 2

答案是在 facebook 上注册一个应用程序：https://developers.facebook.com/apps/ 创建您的应用程序以获取应用程序 ID。也不要忘记在您的设置中添加您的主域。然后将此代码复制到您的站点：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'XXXXXXXXX',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v6.0'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/de_DE/sdk.js"></script>

<script>
    $("#fb-share-button a").click(function(e){
        e.preventDefault();
        var url = window.location.href;

        FB.ui({
            method: 'share',
            href: url,
        }, function(response){});
    });
</script>

html:

<div id="fb-share-button">

    <a href="#" target="_blank" class="Facebook">
        <div class="inside">
            <i class="fa-facebook" style="color:#848484;font-size:16px;width:44px;height:44px;-webkit-border-radius: 50% 50% 50% 50%;-moz-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;line-height:44px;border-width:1px; border-style:solid;border-color:#848484;text-align:center;"></i>
            <div class="desc">Facebook</div>
        </div>
    </a>
</div>

尝试自定义 Facebook 分享按钮时出错

error while trying to customize a facebook share button

javascript

facebook

facebook-javascript-sdk