Good evening everybody!

I wanted to embed the Facebook-I-like Button to my website.

It is shold be a vey easy thing:

1) log in to facebook

2) create the code

3) add the code to the html code of the website

4) basta!

 

I do not know why, but it does not work. The code is:

 

<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/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

which allegedly should be at best add right at the opening <body> tag.

When I add it, I see an error in my html code. I am using microsoft expression web 4.

the error says:

all <script> tags must have type attribute

 

There is a second part of the code which as far I have understood I can add there where I want the facebook-button to appear, which is the follow:

 

<div class="fb-like" data-href="https://www.stepbystepsalsa.co.uk" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>

 

 

Also here a new error appears, which is:

 

In XHtml1.0 Transitional the attribute 'data-ref' is not permitted for the <div> tag

 

Just to try it out I added both parts of the code after the opening <body> tag of a page.

A part from the two errors described above, nothing happens.

 

Where is the problem? What am I doing wrongly?

I would be glad if someone coud help me with it.

Regards.

Edited December 9, 201312 yr by mattusch

It looks as though the code you've got it right.

 

Although I did notice that in the error it says 'data-ref' whereas in your code it's 'data-href'.

 

Can you confirm that the error is wrong and that you've actually got data-href in your code, as that's the correct one!

 

You're right though in that you just need to include that second part of code wherever you want the like button to appear.

 

The second error looks as if it's probably related to HTML5 incopatibilty.

 

Try adding this to the top of your HTML file -

 

<!DOCTYPE html>
 

Let us know how you get on!

It looks as though the code you've got it right.

 

Although I did notice that in the error it says 'data-ref' whereas in your code it's 'data-href'.

 

Can you confirm that the error is wrong and that you've actually got data-href in your code, as that's the correct one!

 

You're right though in that you just need to include that second part of code wherever you want the like button to appear.

 

The second error looks as if it's probably related to HTML5 incopatibilty.

 

Try adding this to the top of your HTML file -

 

<!DOCTYPE html>
 

Let us know how you get on!

Hi,

thanks for your answer.

I can't make it out. It does not work.

As I said the two errors I described in my above posting are still there.

 

1) all <script> tags must have type attribute

2) In XHtml1.0 Transitional the attribute 'data-href' is not permitted for the <div> tag

 

By the way, as far as 'data-ref' istead of 'data-ref', I just mispelled it otherwise the code is correct. It contains a 'data-href", but the error appears nevertheless.

 

You said, I should try to add

<!DOCTYPE html>

to the top of my html file. Well I did it though I supsected already that it wouldn't bring any change because in my html there is already the following:

 

<!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">

 

which is normally created automatically by the prog I am using (Microsoft Expression WEb 4) when I add a new empty html page to my project.

 

I really do not understand why it does not work.

When I click on preview, I do not see any button appearing in the browser. Just nothing. By the way, no wonder, if we consider that there are two errors in the code, according to what expression web 4 says.

Thanks.

I am now working with HTML5 but the facebook-code does not work nevertheless.

I have tried both to add the javascript right after the opening body-tag and in an external javascript sheet.

It just doesn't work.

I wonder why.

Many thanks.

You really see that I am still a beginner who needs to learn a lot of thing yet!

First off, I did not know jsfiddle.net. It is very useful.

As I used it and I saw that the code worked well, I suddenly realized that the reason why I did not see any button on the html site I tried to add the code was because, I still did not publish the content to my domain.

A preview with on the browser does not show the facebook button.

But why does for example an other similar function such as google-map which I was now thinking it works also only if you publish the content, DOES IT ACTUALLY WORK IN PREVIEW MODE TOO?

 

 

 

Anyway, the initial problem was that I was working with HTML1.0 transitional. It was just automatic pre-adjusted like that from microsoft expression web 4. In fact I did not know nothing about it.

 

I have a question about the code of the I like-facebook-button.

 

What if I want to write the java script in an external java sheet?

I mean, I assume I do not need the initial div:

 

<div id="fb-root"></div>

 

I can just add in a java sheet the following code withouth the tags <script></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_UK/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

 

 

and then add on those pages where I want the button to appear the followong div, which is just the second part of the code that facebook creates for you:

 

 

<div id="whatever name i like in order to give some css properties to the div" class="fb-like" data-href="https://www.google.co.uk" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

Am I correct?

If yes, just on the edgje of this posting, I was wondering why do I need the initial div:

<div id="fb-root"></div>

 

should I prefer to add the javascript code direct into the html code of every single pages on which I want the button to appear.

As I mentioned in another posting of mine, I have just started dealing with javascript language, which I find really interesting, and as far I have understood, often you need such a <div> or <p> because than the fuction of the javascript relates to this in order to work properly. But in this javascript code here, I do not see any relation with the div : <div id="fb-root"></div>, that is why I am wondering why we need to add it into the html code.

 

AS a beginner I hope to be allowed to ask question which might be silly for those who are experienced. I just want to learn.

Thanks you all.

Regards

Thanks!

I am still working on my website and I haven't really dealt with the facebook button at depth but I still do not undertand why is the

<div id="fb-root"></div> needed.

I believe you that it is needed. I was just wondering why.

Anyway, thanks for the explanation. You are right, I can use the class "fb-like" for style elements.

 

regards

I assume you got correct Facebook API .

I assume you got correct Facebook API .

What do you mean with API?