How to add facebook want button on product page?

Question

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>

Answer 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');?>

Answer 2

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.