尝试自定义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来更改Social Plugins的外观，但是您有两个其他选择：

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