Implementing social media "like" buttons: Everything you never wanted to know

So you client has asked you to implement a row of buttons to like the URL on Facebook, Twitter and Google+. Here are some things you should know about this.

0. Security considerations

Each "like" button is implemented by including a Javascript on your site. This means you are running fucking remote code on your page. You are giving Facebook, Twitter and Google+ full permission to e. g. copy user cookies. Check with your client if she is cool with that. Also note that if you're site is suggesting security by operating under HTTPS and you are still loading remote Javascript you are sort of full of shit Show archive.org snapshot .

Even if you are cool with injecting remote code into your Javascript you should add fine print for each social network to your privacy policy. Especially in Germany where black hat lawyers will sue you if you don't.

Alternatives:

• One alternative to adding like buttons is to create a profile for your product on Twitter, Facebook and Google+ and simply link to that. Users will see a like button there.

• If you want to promote many different URLs (e. g. news articles) you cannot make a profile for each of them. In this case you can use a vanilla HTML link to a prefilled "share" form on Twitter, Google+ and Facebook. Use the URL templates below and replace the UPPERCASE_TEXT with your custom values:

  Copyhttp://twitter.com/home?status=PREFILLED_TWEET_TEXT
  https://plus.google.com/share?url=URL_TO_SHARE
  http://www.facebook.com/sharer/sharer.php?s=100&p[url]=URL_TO_SHARE&p[images][0]=SNIPPET_IMAGE&p[title]=SNIPPET_TITLE&p[summary]=SNIPPET_DESCRIPTION
  

  Note that "sharing" is not the same as "liking" on Facebook and Google+. See below.

• You could also use social media buttons, but disable them by default.

  The rationale behind this is: Facebook, Google, Twitter, and similar will send information to their servers even when users do not interact with their buttons. This implies tracking the user just by visiting a page that uses them.

  If you want to offer your users a bit of extra privacy and avoid that, but keep the option of "like" buttons for those that want to use them, you can use a 2-step like button approach. Users will see a "switch" next to those buttons to enable the network. They only have to do it once, enabling/disabling will persist.

  You can use the socialshareprivacy Show archive.org snapshot jQuery plugin for that, or a fork on steroids called " Social Share Privacy Show archive.org snapshot ".

1. Implementing the buttons is straightforward

So you have decided to go ahead with the remote javascript. To implement the buttons, simply go to each of the following sites, fill out a short form and get a Javascript snippet to copy/paste into your HTML:

• Facebook like button Show archive.org snapshot
• Google +1 button Show archive.org snapshot
• Twitter buttons Show archive.org snapshot

Unfortunately just having the untuned buttons sit on your page is probably not what you want. There is more work to do. See below.

2. Like vs. share vs. other actions

You might not be aware that each social network offers multiple methods to interact with your content. While every network has the vanilla "like", "+1" or "tweet" button, there are also other actions like "share".

Use a "like" action if you are promoting content or products that lend themselves to fandom. But if you want to promote a technical or controversial article you probably want to offer users a way to "share" the article instead of "liking" it. This way you don't embarass your users by adding something like this to their timeline:

Death toll rises in Albenistan civil war -- Henning likes this!

Using share will show this much more appropriate snippet instead:

Henning has shared an article: Death toll rises in Albenistan civil war

3. Control how your content appears in the timeline

See Controlling how a shared website appears on social media feeds.

4. Styling

You can choose a few styling options when getting the code snippet from each social media site. After that, there is little you can do to customize the buttons.

One particularly annoying thing is that the buttons have ugly margins, making it hard to tuck them into your layout. E.g. if you have chosen a button that displays a bubble with the number of likes, they will reserve a huge margin on the right to display a like count with many digits.

5. Like buttons will slow down your site

Especially if you have many of these buttons on a single page, loading and running all that Javascript will slow down your site.

Consider using a Javascript plugin like Socialite Show archive.org snapshot that asynchronously loads the like button code after events that you define (e.g. when the user hovers over the button, or when the article is scrolled into view).

6. Test it!

There is so much that can go wrong with the buttons or how the share dialog popups interact with your layout. Always test with each social network.

Consider using a fake profile for this so you don't annoy your real life friends.