Facebook/Twitter/Google+ 自定义对话框和带计数器的按钮？

Question

全站实时查看： https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html# JSFiddle 片段视图： http://jsfiddle.net/JWXrk/

我想在我的页面上设置自定义分享功能。一旦有人分享了该页面，它将添加到每张图片的空白处的计数器中。

以上是来自 Google 的随机图片，用于展示示例。我希望能够自定义共享描述和图像，但是我不确定是否可以在没有 Facebook API 密钥的情况下进行设置？

它们只是与此时此刻样式的链接；

<div class="ImgWrap">
    <a class="MedBtn" href="#" id="Facebook-Australia" original-title="Click to share on Facebook"></a>
    <a class="MedBtn" href="#" id="Twitter-Australia" original-title="Click to share on Twitter"></a>
    <a class="MedBtn" href="#" id="GooglePluss-Australia" original-title="Click to share on Google+"></a>
</div>

我之所以只谈 Facebook，主要是因为对 Facebook 比较熟悉，虽然我想对 Tweet 和 Google+ 做类似的事情。

感谢您花时间跟进我的问题以及任何帮助和/或建议。

最好的问候，

提姆

Answer 1

有很多 jquery 插件已经完成了你需要的功能......

以http://sharrre.com/ 为例，如下所示：

http://sharrre.com/example1.html

您可以修改 CSS 以获得您想要的最终结果。希望这在某种程度上有所帮助。

Answer 2

这是一个小例子：

FB.ui({
    method: 'feed',
    name: '<TITLE>',
    link: '<YOUR_LINK>',
    picture: '<IMG_URL>',
    caption: '<CAPTION>',
    description: '<DESCRIPTION>',
    message: '<MESSAGES>'
    },
    function(response) {
        if (response && response.post_id) {
            $.ajax({ 
                type: 'POST',
                url: '<FILE.PHP>'
                data: {
                    // PAGE_DATA - The page id, or something which links the actual page and his share's count
                    postData: <PAGE_DATA>
                },
                dataType: 'json',
                success: function (response) {
                    if (response.error)
                        return false;
                    // As I said, you must adapt your HTML / CSS
                    var actualCount = $('.MedBtn.count[data-type="fb-share"]');
                    actualCount.text(parseInt(actualCount.text() + 1));
                };
            });
        }
    }
);

您可以在此处查看结果（示例）：http://jsfiddle.net/AeqQj/

Answer 3

您必须调整您的 HTML / CSS 以允许计数显示在白框中，无论如何，您可以在回调后递增它。

if (response && response.post_id) {
  // Add +1 to the actual count / update the count in DB.
}