HowTo – “Google +1” extension for Magento

Embedding Google’s +1 button is pretty easy and straightforward. All it takes is to include 2 code snippets in your web page. One goes in the header of the page, and the other one goes to wherever where you want the +1 button to render. To do so all you need is to follow the official Google guideline outlined here.

With that in mind, let’s build us Magento extension, preferably the non-obtrusive one.

We will call our extension “GPlusOne” and place it under the “Inchoo” namespace. Let’s start by creating the /app/etc/modules/Inchoo_GPlusOne.xml file with the following content:

<?xml version="1.0"?>

Now we need to create second file, app/code/community/Inchoo/GPlusOne/etc/config.xml with the following content:

<?xml version="1.0"?>

As you can see we are declaring a new layout file here, called gplusone.xml which we will place under the app/design/frontend/default/default/layout/inchoo/gplusone.xml, with the following content:

<?xml version="1.0"?>
<layout version="1.0.0">
        <reference name="head">
            <block type="core/template" name="inchoo_gplusone_head" template="inchoo/gplusone_head.phtml" />
        <reference name="alert.urls">
            <block type="inchoo_gplusone/PlusButton" name="inchoo_gplusone" />

Carefully observing the gplusone.xml layout update shows that my layout is to “kick in” only on the product view page. Since embedding the Google +1 Button reguires two scripts to be loaded on page, I’m splitting them into two view files, app/design/frontend/default/default/template/inchoo/gplusone_head.phtml and app/design/frontend/default/default/template/inchoo/gplusone_button.phtml.

File app/design/frontend/default/default/template/inchoo/gplusone_head.phtml is loaded into the head area of HTML via ‘reference name=”head”‘ layout update, having the following content:

<script type="text/javascript" src=""></script>

While file app/design/frontend/default/default/template/inchoo/gplusone_button.phtml is loaded into the content area of the page, more specifically “alert.urls” block via ‘reference name=”alert.urls”. For more detailed understanding one should study the app/design/frontend/base/default/layout/catalog.xml file and its ‘‘ section. Content of gplusone_button.phtml is as follows:

<g:plusone <?php if($size = $this->getSize()) { echo ' size="'.$size.'"'; } ?>></g:plusone>

Which bring’s us to the final file needed to get this running, app/code/community/Inchoo/GPlusOne/Block/PlusButton.php with the following content:

class Inchoo_GPlusOne_Block_PlusButton extends Mage_Core_Block_Template
     * Constructor. Set template.
    protected function _construct()
    public function getSize() 
        //Here we can implement the code to read the config values for sizes
        return '';

If you look at the gplusone_button.phtml file you will see it has a call towards getSize() method from Inchoo_GPlusOne_Block_PlusButton class. At the moment, this method does nothing. It’s merely here for possible extension of this simple module. Given that Google +1 button supports various sizes (“small”, “medium”, “tall”, or no size definition for standard size) you can easily add some extra logic to this extension to have it read some config values that could be set from Magento admin.

The point of this article was not to give you a full blown extension ready to be used in instance, rather to show you the amount of effort needed to implement something as simple as Google +1 button in Magento the right way (not to say that this is the best possible way).

And here is the screenshot of the final result.

Hope someone finds it useful.


You made it all the way down here so you must have enjoyed this post! You may also like:

Adding Magento products to Google Merchant Center Toni Anicic
, | 127

Adding Magento products to Google Merchant Center

Magento & GWT “Googlebot found an extremely high number of URLs on your site” Toni Anicic
, | 2

Magento & GWT “Googlebot found an extremely high number of URLs on your site”

Social Connect Magento extension Marko Martinovic
Marko Martinovic, | 397

Social Connect Magento extension


  1. Good explanation. I’ll try it on my webshop. I also read your ‘Add Tweet-this’ article and you’ll probably have one about Facebook (still looking for it).
    Do you also have a all-in-one extension that will insert the G+, TweetThis and Like buttons?

  2. Hey
    I am hosting magento on cloud and the url is accessible public..I have followed the above steps.I am able to login but the button turns into red exclaimation mark!!

    Can anyone please tel me what s going wrong??


  3. Does this work on 1.5? Followed every step exactly to the dot on a new fresh install and the button doesn’t show up on product’s page. Please advice!!
    Thank guys!

  4. Thanks for tutorial. There is a problem, at least for me.
    alert.urls block are not touched with gplusone.xml layout update. However it works good after placing update layout code to local.xml.
    And as I’m trying to learn Magento, I would like to know what is the reason that layout update doesn’t work from module xml file. It seems that updates are trying to applied before alert.urls block initialized. Is it right?

  5. Informative layout about Magento…………….what you have shred! By the way I’m not fully understood by reading your full article. Would you please share with us effective video clip which is related with this post? Thanks 🙂

  6. For those who are totally strangers with programming, it’s a simple way using Magento UI. It’s true that the +1 can’t be inserted anywhere, but it can be inserted in page. If you are using Google Webmaster Tools, go to and after you configure as you want, you’ll find 2 parts of code which must be inserted in admin panel.

    The first one which said:

    <!-- Place this tag where you want the +1 button to render -->

    it should be inserted in any CMS page (e.g. home) in editor HTML mode.
    There is a bug in magento even in and if you return in WYSIWYG mode will delete that code.

    The second part which said:

    <!-- Place this tag after the last plusone tag -->

    Go to Configuration -> General -> Design -> Miscellaneous HTML and add that part here and save.

    You can see this implementation in my website:

    Have a nice day!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.