Facebook like button in news articles

[frankmanl]

How to implement the Facebook like button in your news items, with Facebook displaying a correct link, title and description?
I've been struggling quite a while with this, but now found some solution. It's still not perfect, but already a lot better.
Facebook uses the URL and the <title> tag of the page where the like button is positioned. It also uses the <meta name="description"> tag when available. When that <meta> tag is not available, it seems to use the content of the page (sometimes).

1) The Facebook like button code
Put the Facebook code in your news template, e.g. directly after the entry title in the detail template.

Code: Select all

<h3 id="NewsPostDetailTitle">{$entry->title|cms_escape:htmlall}</h3>
{* start FACEBOOK CODE *}
<__iframe src="http://www.facebook.com/plugins/like.php?href={$entry->canonical}&layout=standard&show_faces=true&width=450&action=like&font&colorscheme=dark&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:450px; height:70px;" allowTransparency="true"></__iframe>
{* end FACEBOOK CODE *}

Now when a visitor visits a news item the like button is displayed.

2) The correct URL
Mind the link that is used in the code: href={$entry->canonical}& etc. On your Facebook page this generates the correct URL, which points directly to the news item.
Of course you may adjust the parameters as you like.

3) The correct title
improved method, 11 Sep 2011
The title Facebook displays is the content of the <title> tag of the page your news item is on, but you'ld prefer to show the title of your news item. Therefore we have to replace the <title> tag.
At the bottom of your (news) detail template put these lines:

Code: Select all

{* set alternative title *}
{assign var='alt_title' value=$entry->title}

In the page template you can now simply replace the standard <title> tag:

Code: Select all

{* replace title by alternative title if possible *}
{if isset($alt_title)}
<title>{sitename} - {$alt_title}</title>
{else}
<title>{sitename} - {title}</title>
{/if}

4) The correct description
Facebook uses the <meta name="description"> tag. So if you set that tag for your whole site, including your-news-detailpage, Facebook will always display the global description of your site, not a description of the news item that was liked.
I solved this in a hardly elegant way. First of all I removed the <meta name="description"> tag from the Global Metadata (Site Admin > General Settings).
Then in my default page template I added the <meta name="description"> tag:

Code: Select all

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
<meta name="description" content="this is the global description of my website" />

but not in my news page template.
Result is that all pages of the website have a <meta name="description"> tag, except for the news detail page. This is the weakest part of my solution: Facebook will sometimes show the first lines of the news item, sometimes it won't. I can't explain why.
But at least it does not show the global description of my site.

5) The correct image
I did not check for the behavior of images in a news item.

Improvements on this method are highly appreciated!

Frank

[pixelita]

Do you have a link to look at? I am going to need this functionality in an upcoming CMSMS project myself.

[frankmanl]

@pixelita
Have a look at http://www.deschavuit.nl/nieuws
A website in development but the functionality works.

frank

[fn002449]

I had the same problem and wanted to implement your solution. But it didn't work for me. So I tought about why FB didn't post the right link. It seems that facebook can not handle *.html in the url... what I did is strip .html from the url and give it as a parameter back into the normal facebook tag. See it for yourself.

Code: Select all

In the template:
{cgfb_like href=$entry->canonical|replace:'.html':''}

now it works... simple workaround.