facebook-sharer - 制作我自己的自定义 Facebook 分享按钮

Question

在 HTML/CSS 编码方面，我相当(低于)平均水平。我的 Javascript 知识处于复制和粘贴级别。这是我的问题:

我想制作自己的 Facebook 分享按钮!以前用 sharer.php 很简单，但恐怕它会被弃用。所以我想用我自己的链接触发分享对话框，而不是使用 Facebook 自己丑陋的分享按钮插件。

我已经阅读了有关 Facebook 开发者共享对话框的页面。但我不明白如何/在何处使用代码片段。老实说我什么都不懂。什么都没有!

为简单起见，假设我有自己的按钮 (button.jpg)，我希望此按钮打开 Facebook 共享对话框以共享页面 URL ( http://example.com )。我有 meta Open Graph 标签。我该怎么做？

Answer 1

sharer.php 没有被弃用(至少不再被弃用)，您可以毫无问题地使用它。

无论如何，Share Button 很容易实现。您只需加载/初始化 JavaScript SDK 并在点击时调用 FB.ui。

JavaScript SDK:https://developers.facebook.com/docs/javascript/quickstart/v2.3

共享对话框:https://developers.facebook.com/docs/sharing/reference/share-dialog

例如:

<script>
    function onClick() {
        FB.ui({
            method: 'share',
            href: 'https://www.your-url.com',
        });
    }

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

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