3

I've created a few sites with facebook like button in the footer.

However, the popup that appears after you like a page, is not visible, so I'd like to move it over the like button.

enter image description here

So that this wouldn't happen.

How could I target the html5 implemented like button?

<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>

And what css would I need to apply to it?

4 Answers4

4

Unfortunately you can't really get the popup to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but its probably way more of a headache than it's really worth for something like this.

However, if you just want the iframe opening above the edge of the window you could move the iframe around like this:

.fb_iframe_widget iframe {
    position:absolute;
    top:-165px;
    background:#fff; /* in your case you may want to add a white background */
}

Also you'll need to remove overflow:hidden from #footer.

You should end up with this:

enter image description here

I know it's not ideal, but given Facebook's lack of interest in being particularly developer friendly it is likely as close as you can get to what you're after.

Update:

Wrap the whole widget in a div and position the div where you had it to begin with. Then you can you use the following CSS to position the iframe.

.fb_iframe_widget iframe {
    position:absolute;
    top:-165px;
    background:#fff;
    right:10px;
}
@media (min-width:1200px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:-45px;
    }
}
@media (max-width:979px) and (min-width: 768px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:110px;
    }
}
@media (max-width:767px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:0px;
    }
}
Community
  • 1
  • 1
apaul
  • 16,092
  • 8
  • 47
  • 82
  • The CSS solution doesn't seem to work, on Chrome atleast. Facebook should really add this an option, the ability to **put like button popup over the button!** –  Jul 30 '13 at 19:02
  • @Christian I updated the code in my answer, sorry about the mix up. You may need to adjust the specific px count for your page but it should move the iframe above the edge of the window – apaul Jul 30 '13 at 23:00
  • @Christian I know it moves everything unfortunately it's probably as good as it gets till Facebook decides to redesign the widget. – apaul Jul 30 '13 at 23:39
  • I'd rather not use a position absolute solution, as it's a responsive site. –  Jul 30 '13 at 23:56
  • @Christian I know it is a pain, but if you change your mind you can readjust the position as needed in the media queries. – apaul Jul 31 '13 at 00:02
  • @Christian If it helps at all, on my page I wrapped the button in a div like `
    ` and then applied the CSS to the `.fb_iframe_widget iframe`
     – apaul Jul 31 '13 at 16:15
  • @Christian I got bored and played with it a little more, the needed media queries are in the update – apaul Aug 02 '13 at 01:54
  • Yep, but it still moves the whole like button. I don't want a compromise solution on this one, I just want to have the message box above the like button, on my way to message facebook about this then! –  Aug 05 '13 at 17:56
  • @Christian I definitely understand your frustration, Facebook could easily allow for a lot more customization. I went through a similar thing when I set it up on my page, I just wanted it on the right side rather than the left, and it was a huge pain. Give them hell! – apaul Aug 05 '13 at 18:01
  • I will. Hopefully, someday we can make it possible. Responsive like button would also be nice. –  Aug 05 '13 at 18:43
1

a) you should change your footer's height, it won't affect much your design, even your responsive options, it could be like this:

#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}

or... b) you can put the like button in your side bar without changing any css, i will look something like this:

http://puu.sh/3Srmq.png

Facundo Colombier
  • 3,487
  • 1
  • 34
  • 40
0

I have a compromise solution too.

After user clicked the like button, scroll window untill widget totally shows up by callback function.

Code looks like

FB.Event.subscribe('edge.create', function(response) {
    $('html, body').animate({
        scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
    }, 10);
});

Here is the fiddle.(I borrowed this instance, Somebody made it long time ago.)

Here is the screenshots. After clicked the like button, just before auto scroll. enter image description here

And this is the screen after auto scrolling finished. enter image description here

Please notice the last like button.

Edited : add the 170px offset .

Add screenshots.

Clxy
  • 505
  • 1
  • 5
  • 13
0

That's what worked out for me.

.wrap-parent {
   zoom: 1; //or your clearfix class
}

.wrap {
 overflow: visible;
}

The html will be something like 

<div class='wrap-parent>
  <div class='wrap'>
     <!-- button here -->
  </div>
</div>
Djonatan
  • 95
  • 11