Adding The Open Graph Protocol to VP-ASP Product Detail Pages

Working with FaceBook and your e-commerce site can be a difficult animal at times, but getting it right means putting your products in front of potential customers.  We were working with a customer recently that wanted the big three in social media available as a shareable link on each of the product detail pages.  Normally this is a standard installation but FaceBook requires a bit more information than Twitter or Google+1 to get the right information to show up when shared.  For example, you can add a regular share link to a page but if the correct Open Graph meta tags are not used, FaceBook will try to find the right information on its own.  This can lead to incorrect product images, descriptions and titles.

In this case, we were working with VP-ASP as the e-commerce platform and out of the box, the newer version 7 does allow some social media integration.  However, this custom integration of only the big three and the fact the customer was using the 6.5 version of the software required us to make some modifications to incorporate the correct meta information.

There are five steps needed to accomplish this:

1. Modify the shopfileio.asp to include a new header file for the detail pages
2. Modify the shopheaders.asp file to add the new header file for the detail pages
3. Create and modify the new header file that will be used to display the detail pages
4. Modify the shopheaders.asp file to include specific open graph data that will be used in the new header file
5. Modify the product detail template to use the new header file

(All code locations below are approximate and may be different for your version of VP-ASP)

Step 1

We first need to add the new code that will be used to tell VP-ASP what is the name of the new file.  Around line 489 is a sub called ProcessKeyword.  Add a new case called PAGEHEADERDETAIL

Case "ADD_PAGEHEADERDETAIL"
Handle_PAGEHEADERDETAIL value, parsearray
rc=0

Then, around line 810, I added the Sub for this Handle:

Sub Handle_PageHeaderDetail (value, parsearray)
dim templatedisplay
templatedisplay=parsearray(ptemplatedisplay)
Value=""
If TemplateDisplay="No" then exit sub
ShopPageHeaderDetail
end sub

Step 2

Usually at the top of shopheaders.asp is where you will find the Subs for the includes that are used for the individual shoppage_header files.  Here is where we will tell VP-ASP the name of our new file we want to use on the product detail pages.  Right near the ShopPageHeader, I added the new Sub:

Sub ShopPageHeaderDetail
If getconfig("xaffheaders")="Yes" then
dim filename, affid, rc
affid=getsess("affid")
if affid<>"" then
filename="aff" & affid &"_header_detail.htm"
Shopspecialheader filename, rc
if rc=0 then exit sub
end if
end if
%>
<!-- #include file="shoppage_header_detail.htm" -->
<%
end sub

Step 3

The best thing to do here is make a copy of your existing shoppage_header.htm and rename it to the new shoppage_header_detail.htm so you don’t have to start from scratch.  At the top in the head section is where we are going to add three new open graph tags that FaceBook will use when your product is shared.  I’m going to show you what they look  like and then explain about it.

<meta name="description" property="og:description" content="<%shopdynamictitle "description"%>" />
<meta property="og:title" content="<%shopdynamictitle "title2"%>" />
<meta property="og:image" content="http://www.yourwebsite.com/<%shopdynamictitle "image"%>" />

By default, the original header should have the meta name description there, by simply adding the property tag for OG, this will ensure the description is sent to FaceBook.  The other two tags are new and both need to be added to shopheaders.asp before the content will populate with the correct data.  What we are doing is saying for VP-ASP to grab the product name(cname), product description(cdescription) and product image(extendedimage), and send this to FaceBook when shared.  You could also used other fields here and you will see where to declare them in the next part.

Step 4

Around line 184 of shopheaders.asp is the Sub SetupdynamicProduct.  Here is where we will get the data from the product and display it in the new meta tags.

sub SetupdynamicProduct  ( conn, catalogid)
setsess "dynamictitle",""
setsess "Dynamicdescription",""
setsess "Dynamickeywords",""

'New Addition for Title and Image
setsess "DynamicImage",""
setsess "Dynamictitle2",""
'End Addition

dim tempname,tempdesc,tempkeywords,tempimage,tempname2
on error resume next
dim sql, rs
If getconfig("xdynamictitle")<>"Yes" then
exit sub
end if
sql="select * from products where catalogid=" &    catalogid
set rs=conn.execute(sql)
' translate logic
if not rs.eof then
tempname=rs("cname")
tempname=translatelanguage(conn, "products", "cname","catalogid", catalogid, tempname)
tempname= Removehtmlheaders(tempname, "<br />")

tempdesc=rs("cdescription")
tempdesc=translatelanguage(conn, "products", "cdescription","catalogid", catalogid, tempdescription)
tempdesc=translatelanguage(conn, "products", "cdescription","catalogid", catalogid, tempdesc)
tempdesc= Removehtmlheaders(tempdesc, "<br />")
tempkeywords=rs("keywords")
tempkeywords=translatelanguage(conn, "products", "keywords","catalogid", catalogid, tempkeywords)
tempkeywords= Removehtmlheaders(tempkeywords, "<br />")

'New Additions for Title and Image
tempimage=rs("extendedimage")
tempimage=translatelanguage(conn, "products", "extendedimage","catalogid", catalogid, tempimage)
tempimage=Removehtmlheaders(tempimage, "<br />")
tempname2=rs("cname")
tempname2=translatelanguage(conn, "products", "cname","catalogid", catalogid, tempname2)
tempname2= Removehtmlheaders(tempname2, "<br />")
'End Addition

setsess "Dynamictitle",tempname
setsess "Dynamicdescription",tempdesc
setsess "Dynamickeywords",tempkeywords

'New Additions for Image and Title
setsess "Dynamicimage",tempimage
setsess "Dynamictitle2",tempname2
'End Addition

end if
closerecordset rs
end sub

Step 5

At the top of your tmp_product.htm is a call for the original shoppage_header.htm.  We want to replace that with our new detail header we added in the previous steps.  To do this, simpley replace the [ADD_PAGEHEADER] with [ADD_PAGEHEADERDETAIL].

Again, some of this data may be inconsistent with your version of VP-ASP because of customization I have already made to my version or you are running a newer or older version of the software, but hopefully this will lead you in the right direction to accurately displaying your products on FaceBook.