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 = "http://theoryapp.com/";
$eurl = urlencode($url);       // http%3A%2F%2Ftheoryapp.com%2F

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftheoryapp.com&layout=button_count&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

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.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></p> <div class="g-plusone" data-size="medium" data-annotation="none"></div> <p>

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" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);" 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.

Tweet

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.

<a href="http://www.pinterest.com/pin/create/button/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.pinterest.com']);" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

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:

• Facebook Like button
• Google PlusOne button
• Twitter Tweet share button
• Pinterest PinIt button

Comments

comments