Question

完整网站实时查看： https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html# JSFiddle Snippet查看： http://jsfiddle.net/JWXrk/

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

enter image description here

以上是来自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.
}

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

3 个答案: