Last Updated: February 25, 2016
·
1.092K
· kadjar

Dynamic socials links ("Share this Page")

Social networks have been moving away from allowing pages to publish directly, with pre-pended information. Facebook is removing sharer.php, for example.

Here's the workaround I've come up with. For Facebook, you'll need to register a Facebook application in order for this to work. For Twitter, it seems that you have to have a hashtag for this to work properly. Not entirely certain why.

This example is jQuery dependent.

var socials = ['twitter', 'facebook', 'pinterest', 'email'],
    link = window.location.href,
    title = $('.title').text(),
    li;
for (var i = 0; i < socials.length; i++) {
  li = $('<li></li>')
  this.dom.items[socials[i]] = $('<a></a>')
    .addClass('socials-link '+socials[i])
    .attr('data-action', socials[i])
    .attr('target', '_blank');

  switch (socials[i]) {
    case 'facebook':
      this.dom.items[socials[i]].attr('href','https://www.facebook.com/dialog/feed?app_id=<<YOUR APP ID HERE>>&link='+link+'&redirect_uri=http://root-url.com');
      break;
    case 'twitter':
      this.dom.items[socials[i]].attr('href','https://twitter.com/intent/tweet?hashtags=<<your hash>>&original_referer='+'http://root-url.com'+'&related=<<name>>&tw_p=tweetbutton&url='+encodeURIComponent(link));
      break;
    case 'pinterest':
      this.dom.items[socials[i]].attr('href','http://pinterest.com/pin/create/button/?url'+link+'&amp;media='+postthumbsrc+'&amp;description='+title);
      break;
    case 'email':
      this.dom.items[socials[i]].attr({'href': 'mailto:?subject='+title+'&body='+link});
      break;
  }

  li.append(this.dom.items[socials[i]]);
  this.dom.parent.append(li);      
};