Registreren

Pages
- Building your application
- Advanced functions
  - Deployment
  - Branches
  - Security
  - Mail & spam
  - Standard urls
  - REST API
  - SSO
  - Social media
  - HTML Editor
- Hosting
- Miscellaneous

Facebook like button.

To add a facebook like button on a certain page you will have to add some facebook specific code to you html pages.

This example shows one way to put a facebook like button at your web page. There are several manners to accomplish this. We will only focus on one method here: Open Graph. All documentation about adding FB like buttons with OG can be found here http://developers.facebook.com/docs/reference/plugins/like/

We use a facebook application with app_id 210728585692282 and facebook Open Graph (OG).

Prepare HTML

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://ogp.me/ns/fb#">

Add OG meta data

To put a facebook like button we need first to extend your page with all the OG meta data. To direct a facebook like directly to the page you like just set the url to it as value of the meta property og:url.

<head>
    #set($url = "http://YOUR_DOMAIN")
    #set($url = "${url}$session.getRequest().getOriginalRequestURI()")
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="DOCUMENT_TITLE" />
<meta property="og:description" content="SHORT_DESCRIPTION" />
<meta property="og:image" content="http://YOUR_DOMAIN/images/SOME_IMAGE"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="${url}" />
<meta property="og:site_name" content="YOUR_DOMAIN" />
<meta property="fb:app_id" content="210728585692282" />
<title>
       $!document.getTitle()
</title>
    $document.getMetaTags()
    $document.getCSS()
    $document.getScripts()
</head>

Load facebook javascripts

Now the facebook javascripts must be loaded. These javascripts read the fb:og meta data properties.

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=210728585692282";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Display and position facebook button

To display the fb button some on your page a div tag is used. Here's an example. The properties of the <fb:like /> can be found at:http://developers.facebook.com/docs/reference/plugins/like/

<div style="position: absolute; left: 750px; top: 15px; height: 30px; width: 450px;">
<fb:like href="${url}" send="false" width="450" show_faces="false" font="" layout="button_count"></fb:like>
</div>

All together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://ogp.me/ns/fb#">

<head>
    #set($url = "http://YOUR_DOMAIN")
    #set($url = "${url}$session.getRequest().getOriginalRequestURI()")
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="DOCUMENT_TITLE" />
<meta property="og:description" content="SHORT_DESCRIPTION" />
<meta property="og:image" content="http://YOUR_DOMAIN/images/SOME_IMAGE"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="${url}" />
<meta property="og:site_name" content="YOUR_DOMAIN" />
<meta property="fb:app_id" content="210728585692282" />
<title>
       $!document.getTitle()
</title>
    $document.getMetaTags()
    $document.getCSS()
    $document.getScripts()
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=210728585692282";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


YOUR CONTENT
<div style="position: absolute; left: 750px; top: 15px; height: 30px; width: 450px;">
<fb:like href="${url}" send="false" width="450" show_faces="false" font="" layout="button_count"></fb:like>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:fb="http://ogp.me/ns/fb#">

<head>
   #set($url = "http://www.shantykoorhetroerom.nl")
   #set($url = "${url}$session.getRequest().getOriginalRequestURI()")

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Shanty koor het roer om" />
<meta property="og:description" content="Barneveldse shantykoor HET ROER OM" />
<meta property="og:image" content="http://www.shantykoorhetroerom.nl/images/HRO.gif"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="${url}" />
<meta property="og:site_name" content="shantykoorhetroerom.nl" />
##<meta property="fb:admins" content="matthijs.lambooy" />
<meta property="fb:app_id" content="210728585692282" />
<title>
   #if($document && $document.getRecord() && $document.getRecord().hasClazz("8765"))
       Het roer om - $document.getRecord().get("Titel")
   #else
       $!document.getTitle()
   #end
</title>
<meta name="keywords" content="free website templates, CSS templates, download HTML page, templatemo.com" />
<meta name="description" content="templatemo 004 - free CSS website template" />
<link href="/templatemo/templatemo_style.css" rel="stylesheet" type="text/css" />
   $document.getMetaTags()
    $document.getCSS()
   <link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

    $document.getScripts()
   $document.removeInfo()
   <script type="text/javascript" src="/engine/1.7/scriptaculous/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="/lightbox2.04/js/lightbox.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=210728585692282";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>