OXIDwiki

Tutorials/Adding Facebook Share and Like buttons to OXID eShop

From OXIDwiki

Jump to: navigation, search

Social networking is all the rage these days. And if you'd like to link your OXID shop up to the largest social network on the Web, it's quite easy! This article shows you how to easily add Facebook "Share" and "Like" buttons to your product pages, both with and without XFBML.

At the end of this tutorial, you should have product pages that look something like this:


Fb buttons example.jpg


Contents

Without XFBML

To add Facebook buttons to pages without XFBML, you need a few additional lines of code in your product details pages. Example of adding "Share" and "Like" buttons to details page:


"Share" button code:

<a name="fb_share" type="button_count" share_url="[{$product->getLink()}]"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

 Result:Share.jpg

This code assigns the URL of the product page to the parameter "share_url", which will be shared on facebook. To obtain the product link, use a method call like "$product->getLink()".
More options on creating "Share" buttons can be found at http://developers.facebook.com/docs/reference/plugins/like.


"Like" button code: 

<iframe src="http://www.facebook.com/plugins/like.php?href=[{$product->getLink()|oxescape}]&amp;layout=standard&amp;show_faces=false&amp;width=250&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:25px"></iframe>

Result:Fb like button.jpg
A "Like" button will be inserted on a page using an iframe. The URL to the product page is assigned in the same way as previously ie. using "$product->getLink()". Also, you can define the width and height of the iframe for greater control.

More options on creating "Like" buttons can be found at http://www.facebook.com/facebook-widgets/share.php.


With XFBML

Facebook uses XFBML as a way for you to incorporate FBML (Facebook Markup Language, an extension to HTML) into an HTML page. Using XFBML provides an easy way to incorporate Facebook Connect features into a site.

The first step is to connect the OXID shop site to Facebook using Facebook Connect. This includes several steps:

  1. Creating an application for the site on Facebook.com
  2. Getting an Application ID
  3. Adding XFBML support to existing site

These steps are discussed in detail in this tutorial on how to add Facebook Connect to existing sites. Once you've completed this task, it is very simple to add "Like" and "Share" buttons.

"Like" button code:

<fb:like href="YOUR_URL_HERE" layout="standard" show_faces="false" width="250" action="like" colorscheme="light"></fb:like>

You can read documentation about the "Like" button at http://developers.facebook.com/docs/reference/plugins/like


"Share" button code:

<fb:share-button href="YOUR_URL_HERE" type="box_count"></fb:share-button>

You can read documentation about the "Share" button here: http://wiki.developers.facebook.com/index.php/Fb:share-button_%28XFBML%29


Remember that you must replace the text YOUR_URL_HERE in the above code with a link to the product page:

[{$product->getLink()}]


And that's all there is to it! Here is a list of other facebook plugins which can be easly added to your site. Have fun!

Facebook Integration Coming in OXID eShop 4.4.0

The next major release of OXID eShop, version 4.4.0, will ship with an awesome integration of Facebook into the Open Source eCommerce system.

Watch a screencast of the prototype implementation

Personal tools