2

Full Site Live View: https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html# JSFiddle Snippet View: http://jsfiddle.net/JWXrk/

I would like to set up a custom share feature on my page. Once someone has shared the page, it will add to the counter in the white space of each image.

enter image description here

The above is a random image from Google to show an example. I would like to be able to customize the share description and the image, however I am not sure if I am able to set this up without a Facebook API key?

They are simply links with styles at this moment in time;

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

The reason why I have only spoken mainly about Facebook is due to being more familiar with Facebook, although I would like to do the similar with the Tweet and Google+.

Thank you for any time spent in following up my question and for any help and/or advice.

Best Regards,

Tim

4

3 回答 3

2

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

http://sharrre.com/例如，它看起来像这样：

http://sharrre.com/example1.html

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

于 2013-03-31T17:49:46.220 回答
1

这是一个小例子：

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/

于 2013-03-31T18:42:17.183 回答
0

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

if (response && response.post_id) {
  // Add +1 to the actual count / update the count in DB.
}
于 2013-03-31T17:54:14.623 回答