Last Updated: February 25, 2016
·
1.345K
· 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);      
};

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside