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&;&&lt;&me&gt;&

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:
http://developers.facebook.com/docs/reference/plugins/like

For customizing the appearance on the news feed at Facebook it would be useful to add the following metadata to your documents too:
  • 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.
See the example below Karol's blog post on Deliver Now! Methodolgy.



UPDATED:

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. 

Share this article on   LinkedIn

Petr Passinger

Petr is the Senior Business Analyst, responsible for the mapping and optimization of the sales funnel and revenue cycle leveraging the Kentico Customer Experience Management solution for online marketing activities.

Comments

Petr Passinger commented on

Hi,

I understand the reasons why some companies blocks access to Facebook. In the same time, others try to take advantage of the rising importance of this social networking site. (Facebook already surpass Google in the visits in US)

We implement FB Like button simply to test if it will brings some value to site visitors and of course ourselves. By describing this easy implementation on our blog we want to help our clients who might find it useful to adapt quickly.

I just copied&pasted the code from the blog post to my local installation of Kentico CMS and it worked smoothly for me. However, if it gives you some error please don't hesitate to send the screenshot of the error to our support: support@kentico.com

Thank you, and I hope that I will be able to bring you some other hint which might be useful also for your work soon.

ctaleck IPAGlobal commented on

Just so you know, not everyone is jumping on the Facebook bandwagon. Our company blocks access to Facebook. The above code produces an error in the iframe provided.