CODEWITHSUNDEEP
cssfacebookfacebook-likefacebook-javascript-sdk
user1537415
user1537415

Reputation:

Like button - make popup appear over the box

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?

Upvotes: 3

Views: 5384

Answers (4)

Djonatan
Djonatan

Reputation: 95

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>

Upvotes: 0

apaul
apaul

Reputation: 16170

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;
    }
}

Upvotes: 4

Clxy
Clxy

Reputation: 525

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.

Upvotes: 0

Facundo Colombier
Facundo Colombier

Reputation: 3640

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

Upvotes: 1

Related Questions