Add Social Buttons: Facebook, Google, Twitter, Pinterest

There are many services online providing all-in-one widgets for social sharing, such as AddThis, ShareThis, etc. However, it is better to build your own one:

You don’t want to show your web traffic to others.
Too many sharing buttons are useless.
It’s enough to have Facebook Like, Twitter Tweet, Google PlusOne and Pinterest PinIt.
It is simple and easy, as we show below.

Facebook Like Button

The following code uses iframe to embed a Facebook Like button. We use the URL “http://theoryapp.com/” in the examples. We need to encode this URL so it can be used in query strings for social sharing URLs. The PHP function urlencode does this dynamically.

$url = &quot;http://theoryapp.com/&quot;;
$eurl = urlencode($url);       // http%3A%2F%2Ftheoryapp.com%2F

The result is shown below. For details see the facebook document.

Google PlusOne Button

The following code embeds a Google +1 button. To use it, just replace the URL part with your own one.

The result is shown below. For details see the google document.

Twitter Tweet Button

The following code embeds a Twitter Tweet share button for the current page.

<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">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>

The result is shown below. For details see the twitter document.

Pinterest PinIt Button

The following code embeds a Pinterest PinIt button for the current page. Note that the page must have some image to be pinned.

The result is shown below. For details see the pinterest document.

Summary

It seems Facebook Like button requires a “href” parameter for the web page to be liked. For the other buttons, by default, they use the URL for the current page where the button is showing, although you can customize the URL by adding parameters.

The official documents:

Comments

comments