Build Your Own Website The Right Way Using HTML & CSS - facebook like code issues

Hi,

I’m going through the 3rd Edition of Build Your Own Website The Right Way Using HTML & CSS and having a good time of it. However, I am having issues with the facebook like box and twitter button coding.

Both sites have changed a bit since this book came out. Here are the issues that I’m having.

The facebook code from the book looks this:

I cannot find the same kind of “like” button on facebook as depicted in the book - I could only find a “badge” that you could embed into your site. This is the code that I’m getting from facebook:

The twitter button code is different as well. Here is the code for that:

This is the result in the preview window:

I cannot figure out what the issue is here and would appreciate any help.

Thank you.

Hi andrea63. Welcome to the forums. :slight_smile:

Yes, things like this tend to change a lot. The important thing is to look at what code ends up on the page. (Those add-ons tend to pull in their own masses of code that differs from what you actually paste into the template.) Once you see what’s actually in the rendered code (such as an <iframe> or whatever) you can target it with CSS and place it where you want.

The best way to see what code you are actually dealing with is to right click on an element (like the Facebook widget) and choose Inspect Element (if using Chrome or Firefox). A panel opens at the bottom of the screen and shows the code that the browser sees. It’s harder for us to help, because presumably the site isn’t online. Perhaps you could take a screen shot of what’s in the inspector at the bottom of the screen.

Attached is a screenshot of the inspector in firefox: