How to insert a Facebook Plugin into your web page

 This article is written specifically for the Facebook Like button, so the size of the rectangle is the size of the Like Button by default when the widget is added. Similar steps will also work for the other Facebook widgets.

To display your widget when you preview your web page, draw a rectangle that is 450px wide by 25px high.

Then drag drop the Facebook widget into the page from the Designs Gallery and customise the Like button. Click 'Get Code' and copy the contents of the 2nd box containing the code. Click Cancel in the browser window.

Click the rectangle you've drawn and go to Utilities -> Web Properties -> Placeholder tab and click HTML Code (body). Paste the code you've copied here then click OK.

Next, click HTML Code (head) button in the Placeholder tab. Copy the lines of code below and paste it into the dialog box in Web Designer.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  var fb_host = (("https:" == document.location.protocol) ? "https:" : "http:");
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src =  ""+ fb_host + "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Tick the 'Regenerate placeholder image' option in the Placeholder tab and click OK.

Now preview the page and the Facebook button will display.