How to add facebook like to an InVision forums template

Adding facebook like to an InVision forums template turned out to be very easy, but it did take me over an hour to work out how. As a result I thought it best to share this code sample to save others hours of google’ing for the answer or banging their head against the table for as long as I did.

Initially I thought it would be as easy to add a short block of PHP to a template file so I tried to use:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']) ?>&amp;layout=standard&amp;show_faces=false&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"></iframe>

This would not save in the editor though, as you cannot access $_SERVER in this way within an InVision template, nor can you use php methods such as urlencode() in the template like that.

I then tried to add the url un-encoded to see if facebook like would work like that so I tried to use:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}&amp;layout=standard&amp;show_faces=false&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"></iframe>

Again this did not work. It was at this point that I went looking for how to mod an InVision template and add a php snippet into the code.

To add a snippet of PHP into an InVision template you can use

<php>
$my_var_name = some_function('foo bar monket');
</php>
{$my_var_name}

This was enough information to then work out that I could use add facebook like with

<php>
$facebook_like_href = urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
</php>
<iframe src="http://www.facebook.com/plugins/like.php?href={$facebook_like_href}&amp;layout=standard&amp;show_faces=false&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"></iframe>

You can see the code at work on the Official Michael Owen Online Forums by viewing any of the topics.

Leave a Reply

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