SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Facebook button on website

    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: facebook test button.jpg. 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.Facebook button code index.txt

    Thanks a lot in advance

    Kind regards
    Maxx-iT

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .fb-like-box {
        float: right;
        margin-top: -100px;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •