How we added the Facebook Like button to our blog
See how to easily add the Facebook Like button
The Facebook Like button allows you to connect your pages and share them on Facebook. Once the user clicks on the button, the message is posted on his news feed. Right to the button the counter of number of "likes" is shown. Users logged-in Facebook will also see the profile pictures of their friends who also liked the resource.
We decided to add the Facebook Like button below the detail of every blog post at DevNet site. The button can be added as a iframe or XFBML version. We used the simpler iframe version by adding the following code into the Selected item transformation
of the repeater
that shows the blog posts:
<iframe src="http://www.facebook.com/plugins/like.php?href=<%# Server.UrlEncode(GetAbsoluteUrl(GetDocumentUrl())) %>&&layout=standard&&show_faces=true&&width=450&&action=like&&colorscheme=light&quo&; scrolling=&quo&;no&quo&; frameborder=&quo&;0&quo&; allowTransparency=&quo&;true&quo&; style=&quo&;border:none; overflow:hidden;&quo&;&<&me>&
The highlited code gets dynamically the document URL - this method can be used for any document type within Kentico CMS so you might use the same code for adding the like button to your Articles, News, Photos or any other document types.
The whole iframe (or XFBML) code including different parameters (width, font, color) can be generated on this page:
For customizing the appearance on the news feed at Facebook it would be useful to add the following metadata to your documents too:
See the example below Karol's blog post on Deliver Now! Methodolgy.
og:title - The title of your page; if not specified, the
title element will be used.
og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
The following error might appear if a non-valid character (for example “–“) is used within the URL of the document: “The page at <URL> could not be reached”.
Workaround to this issue would be to add the character into the list of “Forbidden URL characters” within the Kentico CMS. Go to the SiteManager -> Settings -> URLs and SEO and add the character into the Forbidden URL characters field. Since then the character will be replaced by the value from “Forbidden characters replacement” field automatically, thus the issue will be solved.