-1

I want to show Facebook want & own button (basically the Facebook Like button in a different skin) on product page. How to do that?

I saw this code snippet but wasn't sure where to put it:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo Mage::helper('core/url')->getCurrentUrl();?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="display:block; clear:both; border:none; overflow:hidden; width:450px; height:61px"></iframe>
2
  • 2
    Have you tried anything or are you looking for a complete solution for free from here? Nov 14, 2013 at 7:49
  • 1
    First try in Google. It has lot of extensions / tutorials how to achieve this.
    – Sukeshini
    Nov 14, 2013 at 8:07

2 Answers 2

1

Honestly I never worked with the want button and I don't know what its code looks like so if you can provide a link to the page of the button that would be great but for now I'll assume it's a small piece of HTML code you need to embed.

first thing we'll need to do is make a template (PHTML file) in the active template directory where we can put the code in. So let's create this file in the directory app/design/frontend/[package]/[template]/template/catalog/product/. If the catalog/product directory isn't create yet please do so.

Now create a file in this directory called fbwantown.phtml or whatever you want to call it and add the embed code for these buttons.

After this we'll add the template to the product page by adding it in the layout XML. Go to your templates layout file and open/create the local.xml adding the following

<?xml version="1.0"?>
<layout version="0.1.0">
    [...]
    <catalog_product_view translate="label">
        <reference name="product.info">
            <block type="core/template" name="fbwantown" template="catalog/product/fbwantown.phtml"/>
        </reference>
    </catalog_product_view>
    [...]
</layout>

Here we're adding a block to the product page with as block class the default Mage_Core_Block_Template and as template our newly created phtml file.

All we need to do now is go into the file catalog/product/view.phtml (if it doesn't exist in your template directory then copy it from the base/default template) and add the following piece of PHP where we want to display the button

<?php echo $this->getChildHtml('fbwantown');?>
0

Another alternative is to use an existing plugin such as the one offered at http://wantbutton.com/code.html

To implement simply add the following to your product detail page template.

<script>
(function() {
        var _w = document.createElement("script"); _w.type = "text/javascript"; _w.async = true;
        _w.src = "http://button.wanttt.com/button/script/";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_w, s);
})();
</script>
<a href="http://wanttt.com/want/initial_popup/"
data-merchant_name="ESCAPED_MERCHANT_NAME"
data-title="ESCAPED_PRODUCT_NAME"
data-price="PRODUCT_PRICE"
data-image_url="HIGH_RESOLUTION_PRODUCT_IMAGE_URL"
data-count="true"
data-style="wb1" data-page_source="PRODUCT" class="wantButton"></a>

The code may be placed anywhere in the of the HTML of the template.

For performance reasons you may choose to put the script tag at the end of the body, but the anchor tag should go wherever you want the button. Even if you use multiple buttons on one page, you only need to include the script tag once.

The parameters for the integrated button are:

  • data-merchant_name: name of the merchant, this will be the same for all products
  • data-title: name of the product
  • data-price: price of the product without any currency indicator
  • data-image_url: URL of the picture of the product
  • data-style: ‘wb1’, ‘wb2’, ‘wb3’, ‘wbtall' See http://wantbutton.com/code.html
  • data-count: ‘true’ or ‘false’ indicates whether to show the count to the right of the button

All parameter values should be escaped and must not contain quotes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.