Facebook button on website

HTML & CSS
1

Dear Sitepoint-users

I’m currently having an issue getting a Facebook-button on my website. I have the code and javascript from the developer-page from Facebook.
This is how it looks like:

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

<div class=“fb-like-box” data-href=“http://www.facebook.com/Binnenhuisinrichting.Mira.Zele” data-width=“100” data-height=“20” data-colorscheme=“dark” data-show-faces=“false” data-header=“true” data-stream=“false” data-show-border=“true”></div>

However, when I insert it into my site, I get nothing. I can see something “processing” because the cursor is spinning, but nothing seems to happen and nothing appears. The javascript seems to start something, but doesn’t succeed.
I tried putting in some text in the div:
<div class=“fb-like-box” data-href=“http://www.facebook.com/Binnenhuisinrichting.Mira.Zele” data-width=“100” data-height=“20” data-colorscheme=“dark” data-show-faces=“false” data-header=“true” data-stream=“false” data-show-border=“true”>TEST</div>, which does appear: . However no facebookbutton seems to appear.

I want it floating into the white area next to the logo, above the horizontal menu where the word “test” is from the image.
Can anybody help me out please what is going wrong? In attachment also the code from my index.html.

Thanks a lot in advance

Kind regards
Maxx-iT

2

Do you have a link to the page so we can try and and spot what’s wrong?

I didn’t see <div id=“fb-root”></div> in your index.html page although you have posted it above?

3

Here is the online version: http://www.mira-zele.be/. It appears the Facebook-link is now displayed afterall. I guess it’s only in the non-uploaded-version that he didn’t appear, lol…
So this has been solved :-).
Still have another question though: How can I get the button more in the white area of the header? Now it’s next to the horitzontal menu but I want it more on top. I have it set on float: right, but that doesn’t seem to do the trick. Any suggestions?

4

Hi,

Yes I was going to suggest you try it on a live version and not locally.

Still have another question though: How can I get the button more in the white area of the header? Now it’s next to the horitzontal menu but I want it more on top. I have it set on float: right, but that doesn’t seem to do the trick. Any suggestions?

You have 200px padding-top on your header for some reason and then to combat that you have dragged your logo up with a 200px negative top margin. I’m not sure why you are using the padding-top but I guess you may have a reason but therefore you will need to use the same negative margin method for the facebook button also.

e.g.


.fb-like-box {
    float: right;
 [B]   margin-top: -100px;[/B]
}
5

Thanks again!

Thanks for noticing the padding in the header and the logo… Didn’t know what the purpose was. I know I was having a lot of trouble getting the header right in different browsers and on mobile devices. That’s why I played a lot with different settings and stuff. I left the margin out of the logo and the padding out of the header and everything seems fine.
I think the facebookbutton is now placed ok aswell, without having to add a margin.