简体   繁体   中英

Social media share buttons

On stackoverflow, down the left side of my post, there is 3 social media share buttons.

Is there a way to track if the person successfully shared with it?

I'm asking, because i track users who "like", "+1" and "tweet" to share pages, but right now I'm using the social buttons provided by the company's like facebook, gplus, twitter and they cause my site to load slow. And it also causes a problem if the user wants to re-share a page sometime down the road, because facebook already marks it as liked, and I'd prefer a way to share pages.

I've tried a few things with my current javascript knowledge and couldn't figure it out.

Do the following subscriptions

  • Facebook : subscribe to the edge.create event (http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/)

  • Twitter : put a callback on the onTweet parameter (https://dev.twitter.com/docs/anywhere/welcome#tweetbox)

  • Google+ : put a callback on the callback parameter (https://developers.google.com/+/plugins/+1button/)

Then in your callback functions, just AJAX whatever you want back to your server for it to store. :)

Happy Coding!

Put this in Header

<!-- For Facebook -->
<meta property="og:url" content="https://you-domain.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Site Title" />
<meta property="og:description" content="Site Description" />
<meta property="og:image" content="Image you want to set for posts" />
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
(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#xfbml=1" fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
</script>
<!-- facebook Script End -->


Here are the Series of Button (Facebook, Twitter, Google+, Pinterest, LinkedIn ) put where you want to show share buttons, then Design them from CSS


<!-- For Facebook -->
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=URL_you_want_to_Share">Facebook</a
<!-- For Twitter -->
<a data-size="large" href="https://twitter.com/intent/tweet?text=URL_you_want_to_Share">Twitter</a>
<!-- For Google+ -->
<a href="https://plus.google.com/share?url=<URL_you_want_to_Share" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google+</a>
<!-- For Pinterest -->
<a  href="https://www.pinterest.com/pin/create/button/?url=URL_you_want_to_Share" data-pin-custom="true">Pinterest</a>
<!-- For LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-url="URL_you_want_to_Share"></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM