Hi Guys,
I spent a little while last night throwing this lot together & have seen some discussion around it, so I thought I'd share....
First here's what it does, then I'll tell you how to install it.
- It adds a Facebook 'Like' button (more here) to each of your product pages, you'll see an example on the product pages at http://www.3mselect.co.uk/.
- It adds the necessary og tags (more here) into the header of the page - this is to ensure that Facebook show the correct image for your product rather than guessing - which in my experience - it gets wrong - a lot.
- It also adds an optional rel-canonical tag for product & category pages - this has a useful SEO benefit - more here.
Here's an example of the tags it adds to your header :-
HTML Code:
<!-- start of BFG Facebook XML Package -->
<link rel="canonical" href="http://www.sitename.co.uk/p-123-my-great-product-name-here.aspx" />
<meta property="og:title" content="My Great Product Name Here" />
<meta property="og:type" content="product" />
<meta property="og:image" content="http://www.sitename.co.uk/images/Product/medium/123.jpg" />
<meta property="og:url" content="http://www.sitename.co.uk/p-123-my-great-product-name-here.aspx" />
<meta property="og:description" content="This is the first 250 characters of my really great product description, It's important to note that all html has been stripped out leaving just pure text." />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:admins" content="555221822" />
<link rel="image_src" href="http://www.sitename.co.uk/images/Product/medium/1466.jpg" />
<!-- end of BFG Facebook XML Package -->
Here's how to install it :-
1. Edit the <html> tag at the top of your template to look like the following :-
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
This is the bit I've added :-
xmlns
g="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"
2. Add the following just before the closing </head> section of your template :-
HTML Code:
<!-- start of BFG Facebook XML Package -->
(!XmlPackage Name="facebook"!)
<!-- end of BFG Facebook XML Package -->
3. Modify the stylesheet tag in your product xmlpackage to look like this :-
HTML Code:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf" xmlns:fb="http://www.facebook.com/2008/fbml">
This is the bit I've added :-
xmlns:fb="http://www.facebook.com/2008/fbml"
4. Add the following to your product xmlpackage whereever you want the Facebook Like button to appear (change en-GB to whatever your locale is - e.g. en-US - Also change the url to match your own, & modify the width if need be.) :-
HTML Code:
<xsl:param name="pLink" select="aspdnsf:ProductLink(ProductID, SEName, 0)" />
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_GB/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div style="width:450px">
<fb:like href="http://www.sitename.co.uk/{$pLink}" show_faces="false" width="450" font="verdana"></fb:like><br />
</div>
5. Finally, here's the xmlpackage - you'll need to save this as facebook.xml.config & upload it to your xmlpackages directory :-
HTML Code:
<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="BFGs Facebook / rel canonical package" debug="false" includeentityhelper="false" allowengine="true">
<query name="Products" rowElementName="Product">
<sql>
<![CDATA[
SELECT Name, Description FROM Product WHERE ProductID = @ProductID
]]>
</sql>
<queryparam paramname="@ProductID" paramtype="request" requestparamname="ProductID" sqlDataType="int" defvalue="0" validationpattern="^\d{1,10}$" />
</query>
<PackageTransform>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:template match="/">
<!-- start of edit this to show your domain - N.B. don't forget the slash at the end -->
<xsl:param name="site">http://www.sitename.co.uk/</xsl:param>
<!-- end of edit this to show your domain - N.B. don't forget the slash at the end -->
<!-- start of setting the canonical link for category & product pages -->
<xsl:param name="canonical">
<xsl:choose>
<xsl:when test="/root/System/PageName = 'showcategory.aspx' and boolean(/root/QueryString/pagenum)"><xsl:value-of select="$site"/>c-<xsl:value-of select="/root/QueryString/categoryid"/>-<xsl:value-of select="/root/QueryString/sename"/>.aspx?pagenum=<xsl:value-of select="/root/QueryString/pagenum"/></xsl:when>
<xsl:when test="/root/System/PageName = 'showcategory.aspx' and boolean(/root/QueryString/categoryid)"><xsl:value-of select="$site"/>c-<xsl:value-of select="/root/QueryString/categoryid"/>-<xsl:value-of select="/root/QueryString/sename"/>.aspx</xsl:when>
<xsl:when test="/root/System/PageName = 'showproduct.aspx' and boolean(/root/QueryString/productid)"><xsl:value-of select="$site"/>p-<xsl:value-of select="/root/QueryString/productid"/>-<xsl:value-of select="/root/QueryString/sename"/>.aspx</xsl:when>
<xsl:otherwise>0</xsl:otherwise>
</xsl:choose>
</xsl:param>
<!-- end of setting the canonical link for category & product pages -->
<!-- start of setting the image link for product pages -->
<xsl:param name="image_link">
<xsl:choose>
<xsl:when test="/root/System/PageName = 'showproduct.aspx' and boolean(/root/QueryString/productid)"><xsl:value-of select="$site"/>images/Product/medium/<xsl:value-of select="/root/QueryString/productid"/>.jpg</xsl:when>
<xsl:otherwise>0</xsl:otherwise>
</xsl:choose>
</xsl:param>
<!-- end of setting the image link for product pages -->
<!-- start of setting the product name for product pages -->
<xsl:param name="prod_name">
<xsl:choose>
<xsl:when test="boolean(/root/Products/Product/Name)"><xsl:value-of select="/root/Products/Product/Name"/></xsl:when>
<xsl:otherwise>0</xsl:otherwise>
</xsl:choose>
</xsl:param>
<!-- end of setting the product name for product pages -->
<!-- start of setting the product description for product pages (including stripping html tags) -->
<xsl:param name="ProductDesc" >
<xsl:value-of select="/root/Products/Product/Description" disable-output-escaping="yes" />
</xsl:param>
<xsl:variable name="pureText">
<xsl:call-template name="removeHtmlTags">
<xsl:with-param name="html" select="$ProductDesc"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="FBDesc" ><xsl:value-of select="substring($pureText, 0, 250)" /></xsl:variable>
<!-- end of setting the product description for product pages (including stripping html tags) -->
<!-- start of rel canonical DELETE THIS IF YOU DON'T WANT IT -->
<xsl:choose>
<xsl:when test="$canonical != 0">
<link rel="canonical" href="{$canonical}" />
</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
<!-- end of rel canonical DELETE THIS IF YOU DON'T WANT IT -->
<!-- start of og tags REMEMBER TO EDIT THE ADMIN ID TO MATCH YOUR OWN AND THE SITE NAME TOO-->
<xsl:choose>
<xsl:when test="$image_link != 0">
<meta property="og:title" content="{$prod_name}"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="{$image_link}"/>
<meta property="og:url" content="{$canonical}"/>
<meta property="og:description" content="{$FBDesc}"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="555221822"/>
<link rel="image_src" href="{$image_link}" />
</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
<!-- start of og tags REMEMBER TO EDIT THE ADMIN ID TO MATCH YOUR OWN AND THE SITE NAME TOO-->
</xsl:template>
<!-- start of template to strip html tags -->
<xsl:template name="removeHtmlTags">
<xsl:param name="html"/>
<xsl:choose>
<xsl:when test="contains($html, '<')">
<xsl:value-of select="substring-before($html, '<')"/>
<xsl:call-template name="removeHtmlTags">
<xsl:with-param name="html" select="substring-after($html, '>')"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$html"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<!-- end of template to strip html tags -->
</xsl:stylesheet>
</PackageTransform>
</package>
The xmlpackage is fairly well commented, but please shout if you have problems.
TTFN
BFG
xmlpackage to add Facebook 'Like' buttons & OG tags with bonus rel-canonical support
Reply With Quote
Originally Posted by BFG 9000
