Facebook 'Send' window goes off-screen on mobile phones. « Support Forum | Kriesi.at

Support Forum » Propulsion

Facebook 'Send' window goes off-screen on mobile phones.

4 posts from 3 voices

Started 5 months ago by Brodersen
Latest reply from Nick
This topic is not a support question

Tags:

Brodersen
Member

Hi Support.

I'm using the official Facebook plugin:
http://wordpress.org/extend/plugins/facebook/

This is the site I'm working on:
http://www.xotc.dk

login: guest
password: xotc123

This is the issue (notice popup box under facebook 'Send' button goes off-screen to the left):
http://postimage.org/image/6ugn4e8u5/

NOTE: This problem only occurs when view on a mobile (tried both iPhone 4S and on a Windows phone), but it's very important that the site is also useable on a mobile. It looks fine enough in a web browser, and stays in its position even when the browser windown is narrowed.
(The facebook pop-up input box is however still too large).

I tried a lot of things in css, but nothing seemed to work or just made the Send button disappear.

Posted 5 months ago #
Devin
Moderator
Hi Brodersen,

It looks like quite a few people are having the same issue. The only thing I can think of is just moving the button over so that when the pop up appears its visible.

So you can Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
.fb-social-plugin.fb-send.fb_edge_widget_with_comment.fb_iframe_widget {
float: right;
}
```
Other than that, it may take an update from Facebook on the plugin to allow for control of which side the pop up appears on or something like that.

Regards,

Devin
Posted 5 months ago #
Brodersen
Member
Thanks for the suggestion, but sadly it didn't change anything.

The best solution I've tried so far is this:
```
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
    left: -45px !important;
}
```
This temporary solution moves the pop-up box to a somewhat centered position under the Send button, which makes it accessible on the mobile.

This is how it looks like on an iPhone (notice it's still too a bit too wide for mobile):

Horizontal view on iPhone:

Same page viewed in a PC browser:

The small arrow on top of the popup is now no longer aligned with the Send button (due to my css). Notice how it switches position to be on the left or right side of the popup, depending on where it's viewed (mobile or PC browser).

(I tried it on a Lumina 920 as well, but gave the same issue as iPhone)
Posted 5 months ago #
Nick
Moderator
Hi,

Take the password off your page for a few minutes and run the urls through here https://developers.facebook.com/tools/debug and you will get some good feedback about problems. !important

I was playing with Like button on the main page . The code below should take care of the like button

Try this please
```
.fbpdl {
width: 300px;
}
```
The send message button is more difficult but i think this will not be bad, at least on my emulator it looks ok
```
iframe {
width: 359px !important;
right: 24px !important;
}
```
There probably will be problem with the 2nd piece of css but the iframe ha a random ID number.

There are problems with the plugin. Throws errors all over the place. Just because facebook put their name on it , doesn't mean the freelance programmers who made it for them have special access and are informed of all the changes.

You have similar warning and errors that i remember another person had experiencing similar problems.
```
FB.getLoginStatus() called before calling FB.init(). 

Unsafe JavaScript attempt to access frame with URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=17#channel=f18b415&origin=http%3A%2F%2Fwww.xotc.dk&channel_path=%2Fwp-content%2Fplugins%2Ffacebook%2Fchannel.php%3Ffb_xd_fragment%23xd_sig%3Df271b7494%26 from frame with URL https://www.facebook.com/plugins/like.php?api_key&locale=da_DK&sdk=joey&ref=shortcode&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D17%23cb%3Df14dd0b3b%26origin%3Dhttp%253A%252F%252Fwww.xotc.dk%252Ff18b415%26domain%3Dwww.xotc.dk%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.xotc.dk%2Freserver%2F&node_type=link&width=300&layout=standard&colorscheme=dark&show_faces=true&send=true&extended_social_context=false. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.
```
There is a good chance that the css will not work because its against facebook TOS to modify their code. Check the facebook debug tool!

Thanks,

Nick
Posted 5 months ago #