Add Facebook Like button to any page in Umbraco

I’ve been using Umbraco for quite a while now and recently got a request to add the Facebook like buttons to several sections on our sites. News, Home searches, Blogs, ect… We host like 20+ websites on one Umbraco install. So coming up with an XSLT macro that could be used across domains was not as easy as I had expected. Main problem being is that I quickly found out that the umbraco.library:NiceURL() doesn’t add the hostname of the site it’s being used. Then trying to google things like ‘umbraco xslt get hostname’ or ‘how to get hostname in umbraco’ and ‘get full url in umbraco xslt’ didn’t actually turn up anything. So after some other odd researching I found that I can simply request server variables in umbraco XSLT. In that I found umbraco.library:RequestServerVariables('HTTP_HOST'). Now I finally had everything I needed to get underway with the simple little macro to add the Facebook Like button on any page simply by a Macro in Umbraco. This can be added in the Content section to give access to your designers to add it to individual pages and also to the Templates to add it to sections of your site.

 

XSLT Snippet:

   1: <xsl:variable name="niceHost">

   2: http://<xsl:value-of select="umbraco.library:RequestServerVariables('HTTP_HOST')" />

   3: </xsl:variable> 

   4:  

   5: <xsl:variable name="niceURL">

   6: <xsl:value-of select="umbraco.library:NiceUrl($currentPage/@id)" />

   7: </xsl:variable>

   8: <iframe src="http://www.facebook.com/plugins/like.php?href={$niceHost}{$niceURL}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true">NoIframe</iframe> 

Posted in: facebook, umbraco, xslt