Adding FaceBook, Twitter and Google+1 to VP-ASP

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.

The only development hurdle in what would normally be a typical HTML/CSS website, was the need to incorporate a featured slider in the banner area that could be editable as well as show a slide that was tied to an expiration date.  This site uses a modified version of the Anything Slider with a PHP function that checks an external xml file.  In this external xml file are three date fields that are editable by the customer.  If the dates have not already passed then the slider shows.  This feature was important for the site as so many new manufacturer deals become available that it was necessary for the customer to show these and have these drop off from the site as soon as they have ended.

The photo galleries used throughout the website are a custom integration of the Cleaner Gallery by Justin Tadlock.  These galleries completely replace the way that WordPress normally handles image galleries and when used with a custom post template, outputs the clean thumbnails and slideshow you see throughout the site.

The owner also wanted to integrate an audio player into the site so we created a custom landing page in WordPress that held the player and then launched the rest of the site in a new window.  This was needed in order to keep the player running in the background.

• Custom “Welcome” page with a check in place to see if the visitor has “Liked” the page yet.  Once liked, the page reveals a monthly special.
• Custom blog feed from brackishwaters.com/blog that pulls in the 5 most recent posts to the blog.  Once added to the FaceBook page, this requires no further work as it constantly updates straight from the WordPress site.
• Custom portfolio page that pulls in my latest 6 projects I have added to my portfolio.  This is also self producing as it pulls this data straight from the site.

There are lot that can be done with these new iframe pages that FaceBook is allowing us to use.  The only requirements on the hosting is a secure SSL directory from which the content is coming from.

I hope you like the page and let all your friends know about Brackish Waters Design!

View Brackish Waters Design on FaceBook

The problem with this site was the following:

• IIS 7 Server
• URLs that not only contained querys but multiple querys with ampersands
• We need to redirect over 300 pages

Its the second point that seemed to be the major issue.  Now I eventually tackled this with a common web.config rewrite.  Because of the large number of links, I also broke out the web.config into two separate files, one for the redirect rules and the other for the rewritemaps.  If you don’t know what this is yet, a copy is coming below.

This is the current copy of the web.config we are using for the redirects and where it makes the call to the other file with the large number of pages that need to be detoured.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
    	<rewrite>
			<rules>
				<rule name="Redirect Category Pages" stopProcessing="true">
					<match url="^categories\.asp$" />
					<conditions>
						<add input="{QUERY_STRING}" pattern="id=([0-9]+)" />
						<add input="{CategoriesRedirects:{C:1}}" pattern="(.+)" />
					</conditions>
					<action type="Redirect" url="http://site.com/categories.asp?id={C:1}" appendQueryString="False" redirectType="Permanent" />
				</rule>
				<rule name="Redirect Products Pages" stopProcessing="true">
					<match url="^products\.asp$" />
					<conditions>
						<add input="{QUERY_STRING}" pattern="id=([0-9]+)&amp;cat=([^=&amp;]+)" />
						<add input="{ProductsRedirects:{C:1}}" pattern="(.+)" />
					</conditions>
					<action type="Redirect" url="http://site.com/products.asp?id={C:1}" appendQueryString="False" redirectType="Permanent" />
				</rule>
				<rule name="Redirect Detail Pages" stopProcessing="true">
					<match url="^detail\.asp$" />
					<conditions>
						<add input="{QUERY_STRING}" pattern="id=([0-9]+)" />
						<add input="{DetailRedirects:{C:1}}" pattern="(.+)" />
					</conditions>
					<action type="Redirect" url="http://site.com/detail.asp?id={C:1}" appendQueryString="False" redirectType="Permanent" />
				</rule>
			</rules>
    		<rewriteMaps configSource="rewritemaps.config" />
    	</rewrite>
    </system.webServer>
</configuration>

The key part for us was line 9 where, from what i understand, it identifies the ID in the URL as a integer, then when we go on to specify that ID later in the rewritemaps, it compares the visiting URL with the list in the rewritemaps and substitutes that with the new value we specify. See below for the example of the rewritemaps:

    		<rewriteMaps>
				<rewriteMap name="CategoriesRedirects">
					<add key="2" value="302&amp;cat=Category+New+Name" />
				</rewriteMap>
				<rewriteMap name="ProductsRedirects">
					<add key="24" value="324&amp;cat=Category+New+Name" />
				</rewriteMap>
				<rewriteMap name="DetailRedirects">
					<add key="26" value="670" />
				</rewriteMap>
    		</rewriteMaps>

The overall difficult part of this problem was the need to manually specify all of these redirects. We could not just setup a rule for the server to blindly redirect all links to say, new SEF URLs as that was not the goal of the project yet. It was a e-commerce site that was remaining on the same domain, being redesigned as well as completely reorganized. When it comes to a project like that, you can’t just say “Lets start with a blank slate” either as you jeopardize losing the page ranks you have accumulated for the years you have been online.

I run a separate include file for my home loop in WordPress which I will provide here but I will dump a bunch of the actions that you would not have.

        <div id="slideshow">
            <ul id="slider1">
 		<?php if (have_posts()) : ?>
         	<?php $recent = new WP_Query("cat=11&showposts=6");
			while($recent->have_posts()) : $recent->the_post();?>
                <li>
                    <article class="article">
                        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	                            <div class="entry-content">
    	                            <?php the_excerpt(); ?>
	                            </div>
                        </div>
                    </article>
	        </li>
		<?php endwhile; ?>
            <?php endif; ?>
	</ul>
        </div>

The javascript that contains the data to populate the panels is also located within this home-loop.php and is at the end of the file after the loop has closed.

<script type="text/javascript">
	$('#slider1').anythingSlider({
		navigationFormatter: function (i, panel) {
			return [
			<?php $recent = new WP_Query("cat=11&showposts=6");
				while($recent->have_posts()) : $recent->the_post();?>
			'<?php the_title(); ?>',
			<?php endwhile; ?>
			][i-1]
		},
		startStopped    : false,
		autoPlayLocked  : true,
		delay 			: 5000,
		resumeDelay     : 10000
	});
});
</script>

Its the specificity in the WP_Query that denotes what category you are using for the posts and how many panels you are showing. You still need to include the usual javascript for the slider such as jquery 1.6 and the slider.js from Chris’s site.