Build Your Own Website the Right Way, source code not working for Facebook Like Box

Get Started
1

Chapter 8 focuses on the use of social networking sites and how to implement their respective ‘like boxes’ and ‘follow me’ buttons into your new website. Unfortunately, the instructions for doing so seem no longer valid. I would have assumed an error on my part had it not been for the author’s own markup (downloaded from Sitepoint’s website) failing to work as well.

I decided to bite the bullet and try to continue with the rest of the code, but it seems that omitting the Facebook ‘Like Box’ markup means any following boxes are misalligned. PLEASE HELP!

2

Hi clintonoshea. Welcome to the forums. :slight_smile:

Are you saying that the Like code works but is just not aligned as you want it? If so, could you show us some example code of what you have (HTML and CSS) and indicate how you’d like it to display?

3

Thanks for the response. Ultimately, even the source code/markup that I downloaded from Sitepoint, ie. the markup that is used in the book ‘Build Your Own Website the Right Way Using HTML and CSS’ 3rd ed. isn’t working. On the example site written by the author, even that produces an little pink box stating “Could not retrieve ID for the specified page. Please verify correct href was passed in.” I myself followed the instructions to retrieve code from Facebook itself and embed it in my own attempt at the markup, but then nothing shows up at all on the webpage. I ran the author’s code downloaded from Sitepoint through a validator at w3, and it returned three errors stating the “scrolling, frameborder, and allowtransparency attributes on the iframe element are obsolete. Use CSS instead.” Is there an update for the code anywhere, or do you have any alternatives? Thanks loads in advance!

4

Here’s a screenshot of the example webpage, and the code is that downloaded from Sitepoint

5

iframes are pretty old hat anyway, so often don’t go down well with the validator, but they are still the preferred way for companies like Facebook to offer up their code, so we just have to live with that. I find it a bit odd that the code given to you by Facebook doesn’t show up at all. I’d suggest investigating that a bit more. Could you show us the code? The Libe button should just magically appear on your page when you paste in that code. If it doesn’t, there may be some screwy CSS going on to hide it.

6

Here’s the code from Facebook:

<iframe src=“//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbubbleunder1977&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80” scrolling=“no” frameborder=“0” style=“border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=“true”></iframe>

And here’s the HTML downloaded from Sitepoint, which includes the author Ian Lloyd’s iframe, ie. different URL to mine:

<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta charset=“utf-8” />
<link href=“style1.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>
<div id=“sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=“tagline”>
<p>Diving club for the south-west UK - let’s make a splash!</p>
</div>
</div> <!-- end of header div –>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“events.html”>Club Events</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
<li><a href=“gallery.html”>Image Gallery</a></li>
</ul>
</div> <!-- end of navigation div –>
<div id=“bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img class=“feature” src=“divers-circle.jpg” width=“200” height=“162”
alt=“A circle of divers practice their skills” /></p>
<iframe src=“http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBubble-Under%2F156732361048951%3Fsk%3Dwall&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height=427” scrolling=“no” frameborder=“0” style=“border:none; overflow:hidden; width:292px; height:427px;” allowTransparency=“true”></iframe>
<p>Glad you could drop in and share some air with us! You’ve passed
your underwater navigation skills and successfully found your way to
the start point - or in this case, our home page.</p>
<p>All details of the group’s diving activities, trips and so on will
be available from the various pages on this site but, in addition,
we’ve got a Facebook page! If you’re on Facebook, please do check
it out. All of the updates we post on Facebook will also appear here
in this little box here on the right (so, even if you’re not a
Facebook fan you can get to see our latest updates).</p>
</div> <!-- end of bodycontent div –>
</body>
</html>

And here’s the stylesheet, again downloaded from Sitepoint:

/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}

h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
}

h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right bottom;
}

h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}

li {
font-size: small;
list-style-type: none;
}

p {
font-size: small;
color: navy;
}

#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}

em {
text-transform: uppercase;
}

a {
font-weight: bold;
}

a:link {
color: black;
}

a:visited {
color: navy;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: aqua;
background-color: navy;
}

.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}

blockquote.fun {
font-style: italic;
}

#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}

h2, ul {
margin-top: 15px;
}

#header {
border-top: 3px solid #7da5d8;
}

img.feature {
float: right;
margin: 10px;
}

.galleryphoto {
padding-bottom: 10px;
border-bottom: 1px solid navy;
margin-bottom: 20px;
}

.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}

.galleryphoto p span {
font-weight: normal;
color: gray;
}

.galleryphoto img {
border: 15px solid white;
}

table.events {
border-collapse: collapse;
}

table.events th, table.events td {
padding: 4px;
border: 1px solid #000066;
}

table.events th {
font-size: x-small;
text-align: left;
background: #241374 url(backgrounds/header-bg.jpg);
color: #ffffff;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}

table.events td {
font-size: small;
background: #e2edff url(backgrounds/td.jpg) repeat-x top;
}

table.events caption {
color: #000066;
font-size: small;
font-weight: bold;
text-align: left;
padding-bottom: 5px;
}

form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}

form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}

form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
line-height: 150%;
}

form.contact label {
font-weight: bold;
font-size: small;
color: blue;
}

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

form.contact .buttonarea input {
background: navy;
color: white;
font-weight: bold;
padding: 5px;
border: 1px solid white;
}

form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: #0066FF;
}

/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured from the
top-left corner of the browser’s content display.
*/

#navigation, #bodycontent, #header {
position: absolute;
}

#navigation, #bodycontent {
top: 107px;
}

#bodycontent {
left: 200px;
}

#header {
width: 100%;
}

Thanks so much for your patience!

7

Hm, the Like code you first posts looks a bit off. Where did you get it? Did you try this page?

Getting a Like button should be very easy. Try this on your page, for example:


<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbubbleunder1977&amp;layout=standard&amp;show_faces=false&amp;action=like&amp;colorscheme=light"
        scrolling="no" frameborder="0"
        style="border:none; height:25px; width: 440px;"></iframe>