Add a Facebook "like" and Google "+1" button to Magento and integrate them with Google Analytics

Let's start with adding the Facebook like button. On this page: https://developers.facebook.com/docs/reference/plugins/like/, you can create the button as you would like it to appear on your site. When you press "Get Code", you'll get 2 pieces of code.

First we have to add the JavaScript code. To do this, open your head.phtml page, which can be found here:
app/design/frontend/<your template>/<theme>/template/page/html/head.phtml

In this file, add the script, like so:

<script type="text/javascript">
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

After that, you can add the other part of the Facebook code in any of your pages, where you would like to have the button. If you want to have it in a CMS page, you can create a Custom Variable, by opening the admin part of your Magento shop and navigating to System -> Custom Variables. In there, create a new variable and insert the code in the Variable HTML Value.

(Your code may differ, depending on the type of button you want)

After you have created this Custom Variable, you can use it in your CMS pages, by inserting it.

To do this, place your cursor where you want the button to appear, click on the "{{v}}"-button in the task bar (see image above). In the pop-up that appears, select the Custom Variable you have just created.

To add a like, unlike and send event to your Google Analytics, again open your head.phtml:

app/design/frontend/<your template>/<theme>/template/page/html/head.phtml

and insert this code below the other code we just added:

<script type="text/javascript">

  window.fbAsyncInit = function() {

    FB.init({

    });




    try {

if (FB && FB.Event && FB.Event.subscribe) {

  FB.Event.subscribe('edge.create', function(targetUrl) {

_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);

  });

  FB.Event.subscribe('edge.remove', function(targetUrl) {

_gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);

  });

  FB.Event.subscribe('message.send', function(targetUrl) {

_gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);

  });

}

     } catch (e) {}

  }

</script>

You now have a Facebook like button which also registers in your Google Analytics!

Now for the Google +1 button. This one is easer than the Facebook Like button, because it automatically integrates with Analytics. To create your button, visit http://www.google.com/intl/en/webmasters/+1/button/index.html.

Again open your head.phtml:
app/design/frontend/<your template>/<theme>/template/page/html/head.phtml
and insert the javascript code:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Add the other part of the code:
<g:plusone annotation="inline"></g:plusone>
where you want the button to appear (your code may differ, depending on the style of button you want).
You can also add this code to your Facebook Like button Custom Variable, as described above, or create a new Custom Variable for it. After that, you can use it in your CMS pages too.

Congratulations! Now you have a Facebook Like and a Google +1 button in your shop, both of which can be tracked with Google Analytics. Have fun!