pyshchyk-o/custom_social_media_share_buttons.md

Facebook

source: https://developers.facebook.com/docs/reference/dialogs/feed/

Init facebook api javascript object as described here https://developers.facebook.com/docs/reference/javascript/ create a share dialog with

FB.ui({
  method: 'feed',
  link: 'https://developers.facebook.com/docs/reference/dialogs/',
  picture: 'http://fbrell.com/f8.jpg',
  name: 'Facebook Dialogs',
  caption: 'Reference Documentation',
  description: 'Using Dialogs to interact with people.'
}, function(response){});

Twitter

source: https://dev.twitter.com/docs/tweet-button

put the custom tweet text into the data-text attribute of your a.twitter-share-button tag


<a href="https://twitter.com/share" class="twitter-share-button" data-text="{_tweet_content_}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Xing

source: https://dev.xing.com/plugins/share_button/

<div data-counter="top" data-type="XING/Share" data-url="{_url_to_share_}"></div>
<script>
  ;(function (d, s) {
    var x = d.createElement(s),
      s = d.getElementsByTagName(s)[0];
      x.src = "https://www.xing-share.com/js/external/share.js";
      s.parentNode.insertBefore(x, s);
  })(document, "script");
</script>

Linked in

source: https://developer.linkedin.com/plugins/share-plugin-generator

<script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
</script>
<script type="IN/Share" data-url="{_url_to_share_}" data-counter="top"></script>

Google+

source: https://developers.google.com/+/web/share/

<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-href="asdasd.de"></div>

<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>