Copyright © Roddy McKay - 2011 - All Rights Reserved

Next Page

Facebook Like Box, Like Button, Comments, Live Stream etc...

[2] Enter the required info and click the “get Code” button.

Find out how to get your website found by the Search Engines and keep the visitors coming back using Website Marketing.

[4] In the first section of the code, change the line marked in red...

js.src="//connect.facebook.net/      ... to...

js.src="http://connect.facebook.net/    ... and click “Apply”.

[3]  Select the HTML5 option, copy both sections of the code and paste them into an HTML Snippet on the desired web page. NOTE: Click “Apply” each time you paste a section.

<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="http://connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Thanks to Cyclosaurus for pointing out this error in the FB code.

Changing The Background Color

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Facebook Button</title>

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

</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="http://connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<style type="text/css">

.fb-like {

    background: #E9E9E9;

    padding: 0;

    }

</style>

<div class="fb-like" data-href="http://www.ezmacwebdesign.com" data-send="true" data-width="550" data-show-faces="false" data-action="recommend" data-font="verdana" ></div>

</body>

</html>

[1] Click the Facebook icon to get to the Like Button page....

[2]

[3]

If the text isn’t visible due to your choice of page color, the back-ground can be changed using CSS.

The color shown below is #E9E9E9 and should work with darker colored pages.

Open a suitable editor such as Text Edit.app. Copy the code below and paste it in.

Change the background color, marked in blue, to the hex color number of your choice.

Substitute your own URL for the one marked in red.

Save this file as - facebook-button.html - and upload it to the root folder on your server. The URL to this file should be...


http://www.your-domain-name.com/facebook-button.html


Enter this URL in the  iframe code shown below and then copy and paste it into an HTML Snippet on the page where you want the button...


<iframe src="URL to the file" style="height:60px;width:700px;border:none"></iframe>


You can adjust the height and width of the iframe if necessary.