Facebook send button flyout

Question

I am working on FB Send button and implementing it on a new site. The problem is the flyout that FB display on the click of Send button is below the Send button. Can anyone let me know how can we set the "flyout" (dialog that appears on clicking the send button) can be customized to be displayed above the send button and not below it.

Thanks in advance!

Answer 1

I too wanted to add this button to the right of the page, had problems moving the iframe so that is was visible so instead decided to open the send button in a dialog window. http://developers.facebook.com/blog/post/514/

You will need to use the JS SDK to do this, and also provide a button or a link that will trigger the send dialog to open. Here is some example code to make a link look like a send button

HTML

<a class="fb-send-button"><i></i><span>Send</span></a>

CSS

.fb-send-button {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  color: #3b5998;
  -moz-outline-style: none;
  text-decoration: none;
  background: #eceef5;
  border: 1px solid #cad4e7;
  display: inline-block;
  padding: 4px 5px;
  white-space: nowrap;
  padding: 2px 5px;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 11px;
}
.fb-send-button:hover {
  border-color: #9dacce;
  text-decoration: none;
  color: #3b5998;
}
.fb-send-button span {
  line-height: 14px;
  line-height: 13px;
}
.fb-send-button i, .fb-send-button img {
  float: left;
  height: 14px;
  margin-right: 3px;
  width: 14px;
}
.fb-send-button i {
  background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);
  background-position: -1px -47px;
}

Javascript

FB.ui({
    method: 'send',
    name: 'Facebook Dialogs',
    link: 'https://developers.facebook.com/docs/reference/dialogs/'
});

You will need to already have the Javascript SDK loaded on your page, and will need to either put the above JS in the anchor tag in an on click attribute, or preferably adding it using your own Javascript.

Answer 2

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):
http://s16.postimage.org/3xeep2uo5/foto_1.png

Same page viewed in a PC browser:
http://s16.postimage.org/nukby1dj9/xotc_browser.png

Notice 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)

Answer 3

This Facebook plugin doesn't allow you to specify a custom css file like some of the older ones do so it will be pretty tough to change the appearance aside from messing with the iFrame style/size. Your css changes won't apply to the iframe content Facebook renders because it is hosted on a different site so cross-domain restrictions will apply.

Answer 4

I had the same problem and used the following to solve this problem:

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
    left: -290px !important;
}

Try to play with left, top, right, bottom values as you want it to be placed.