Geek Answers Handbook

Facebook Like and Send cut popup

I am using a Facebook application that displays as a tab on a fan page.

The application has a product details page, which has, like plugins and comments.

The problem is that when you click on submit buttons, etc. the departure dialog box (the window that appears after clicking the button) is trimmed with the left edge of the iframe (the application has the right to the left language).

From the point of view of graphic design, the button layout cannot be changed, and scroll bars are not allowed. The application should have a width of 520 pixels, no more and no less.

Is it possible to control the position of the popup to prevent it from clipping? Is there any other way to prevent clipping?

I searched for similar questions here without success.

+7
source share
2 answers

Because these buttons include the HTML structure on your page, they are styled using CSS. This way you can move pop-up dialogs using CSS.

Some code

If you take a closer look at the pop-ups presented by facebook, you will see that some styles are attached to them: Facebook Styles

The only thing you need to do now is move this popup using CSS to the correct position.

For example: if you want to completely hide the comment popup of a similar button, you can simply use this CSS:

.fb_edge_comment_widget.fb_iframe_widget { display: none; }

If you want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget , since the element properties (set by JavaScript) override your CSS. You should use span one element below:

 .fb_edge_comment_widget.fb_iframe_widget > span{ right: 300px; }

This code will move the popup window 300 pixels to the left:

Moved by 300px

This is not the prettiest solution (note that the small arrow at the top of the window now indicates nothing), but it works.

Full test code:

 <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .fb_edge_comment_widget.fb_iframe_widget > span{ right: 300px; } #wrap { width: 650px; margin: 0 auto; } </style> </head> <body> <div id="wrap"> <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/de_DE/all.js#xfbml=1&appId=336384849737745"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div> </div> </body> </html>
+6
source

This is not an exact answer to your question. It seems you cannot control the popup at all. I was happy to completely get rid of the popup by placing the code of my fb button in a div that was only as high as the button and setting the overflow: hidden. Then the popup is not visible at all.

 <div class="fb-wrap"> <div class="fb-like" data-href="http://www.facebook.com/YOURURL="false" data-width="200" data-show-faces="false" data-colorscheme="dark"></div></div> <style> .fb-wrap { height: 36px; overflow: hidden; } </style>
0
source

More articles:


All Articles