Adding VPASP ecommerce store to Facebook

We’ve been using VPASP ecommerce software for a number of years, it is open source and uses active server pages (asp) as its software language, this language is very mature and hence knowledge is widely available.

With the emergence of social media and Facebook becoming the dominant social media channel we were looking at how to increase our presence in this channel, if you read the facebook integration help sections it all seems quite daughting whereas in fact it is quite simple to get a very basic integration up and running, here is how we did it.

We subscribe to the .NET magazine, an excellent publication that has a lot of useful snippets; one of these from the Feb 2011 edition covered how to integrate a web page with Facebook, following this guide we worked out that the simplist way to achieve putting our store on facebook was to use the iframe integration.

Facebook use the term Canvas instead of iframe and hence once you register for app development you would set up your apps canvas page to point to your desired store URL.

I should state at this point that we use the deluxe version 7 of VPASP (with service pac applied) and hence have access to all of VPASP’s facilities so lesser versions may restrict this capability and we have not tested any to see if they will.

You cannot merely use an iframe to display your current store front as the iframe on facebook is limited to 758 pixels wide at a maximum and you would end up with users having to use scroll bars to see the entire page width, a very poor user experience.

Our solution to this was to copy the entire web site to a sub directory, set up an additional store in VPASP configuration and use the default 2 column layout that comes with Version 7.

This almost worked ‘straight out of the box’ however the width was just over so we then adjust the #wrap width in this sub-directory to be 740px wide in CSS (file:layout.css of the relevant template folder being used). With this set up we used the URL to this sub directory as the Canvas page URL and set the status within the apps directory to live.

The additional benefit of using a sub-directory is your SSL certificates will remain valid thus allow the complete checkout cycle to be available to be managed in the Facebook page.

I must stress this is a basic integration, I’m working on the autocheckout side of it to see if we can take user details for auto filling in the address details/email etc. The site may need a further tweak also as to embed the site into a page (fan page etc.) you are limited to a width of 520pixels

I’ve added a Robots.txt file to exclude all spidering as effectively the site would be virtually the same as your main site so to avoid duplication issues it’s easyiest  to exclude the facebook site.

Leave a Reply

Your email address will not be published. Required fields are marked *