HowTo – “Google +1″ extension for Magento

Featured Image

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"?>
<config>
    <modules>
        <Inchoo_GPlusOne>
            <active>true</active>
            <codePool>community</codePool>
        </Inchoo_GPlusOne>
    </modules>
</config>

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

<?xml version="1.0"?>
<config>
    <modules>
        <Inchoo_GPlusOne>
            <version>1.0.0.0</version>
        </Inchoo_GPlusOne>
    </modules>
    <global>
        <blocks>
            <inchoo_gplusone>
                <class>Inchoo_GPlusOne_Block</class>
            </inchoo_gplusone>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <inchoo_gplusone>
                    <file>inchoo/gplusone.xml</file>
                </inchoo_gplusone>
            </updates>
        </layout>
    </frontend>
</config>

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">
    <catalog_product_view>
        <reference name="head">
            <block type="core/template" name="inchoo_gplusone_head" template="inchoo/gplusone_head.phtml" />
        </reference>
        <reference name="alert.urls">
            <block type="inchoo_gplusone/PlusButton" name="inchoo_gplusone" />
        </reference>
    </catalog_product_view>
</layout>

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="https://apis.google.com/js/plusone.js"></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:

<?php
class Inchoo_GPlusOne_Block_PlusButton extends Mage_Core_Block_Template
{
    /**
     * Constructor. Set template.
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('inchoo/gplusone_button.phtml');
    }
    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.

Cheers.

15
Top

Care to rate this post?

Author

Branko Ajzele

Ex Inchooer

Worked at Inchoo as a Backend Developer/CTO from 2008 to 2013

Other posts from this author

Discussion 15 Comments

Add Comment
  1. @Branko

    nice one, we could integrate it into up and coming G+ magento theme

  2. Looks like a great extension. Is it going to be available on Magento Connect? Will it work for Enterprise edition?

  3. Rhonda

    *like* :)

  4. 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 http://www.google.com/webmasters/+1/button/ 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.
    SAVE THAT PAGE IN HTML MODE!!!
    There is a bug in magento even in 1.5.1.0 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!

  5. Thanks for the extension Branko! Was just thinking of implementing google+ in Magento.

  6. 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 :)

  7. Seems some good extension!!! Really You’re a goddamn genius.

  8. Volodymyr

    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?

  9. kungfu

    Hey, can you provide the extension zip download?I found it didn’t work with magento16.

  10. Google plus buttons aren’t working on mobile devices, correct ??

  11. David

    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!

  12. kavya

    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??

    Thanks

  13. 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?
    Thanks

  14. Thanks for you explanation, i ll try it on my flower store.

    saludos

  15. SUR

    Thanks! this seems to be easy to integrate

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top