X-Cart:Adding Facebook Like button to your X-Cart store

From X-Cart 4 Classic
Revision as of 10:17, 8 December 2010 by Ivka (talk | contribs) (Adding the FB "Like" button to product details page)
Jump to: navigation, search

Facebook has recently announced their new “Like” button that can be added to any page. Adding a Facebook "Like" button can be done either with an iframe or using the Facebook JavaScript SDK and XFBML. Facebook provides Detailed Instructions on how to integrate the like button on your site.

Adding the FB "Like" button to product details page

You can easily embed the button and automate it in a product template. Here are the steps:

1. Use the FB iframe configuration tool to generate the code you want to display on any one page.

Here is an example of that iframe code:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.your_domain.com&amp;layout=standard&amp;
show_faces=true&amp;width=400&amp;action=like&amp;font=segoe+ui&amp;colorscheme=light" scrolling="no" frameborder="0"
allowTransparency="true" style="border:none; overflow:hidden;width:400px; height:80px"></iframe>

2. Paste this code into the customer/main/product.tpl template located in your X-Cart skin folder.

3. To automate the page URL for the button on each page, replace the page filename in the FB code with the Smarty tag {$php_url.url|escape:"url"}


<iframe src="http://www.facebook.com/plugins/like.php?href={$php_url.url|escape:"url"}&amp;layout=standard&amp;
show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true"
style="border:none; overflow:hidden; width:450px; height:80px"></iframe>

4. If you want to control the title of the page, the name of your website, and an image that is used, add the “meta” elements to the <head> region of your template. i.e.:

<meta property="og:title" content="{$product.producttitle|default:$product.product|escape}"/>
<meta property="og:site_name" content="Your Site Name"/>
<meta property="og:image" content="{$product.image_url|default:$product.tmbn_url}"/>

That’s it. The new Facebook Like button will now appear on all of your store's catalog pages.

Fb button 1.jpg

Adding multiple "Like" buttons to category page

[explain here]

Adding "Like" button to HTML catalog pages

[explain here]

See also