Facebook connect in iframe- popups shows inside the iframe - facebook

I'm implementing Facebook connect for a website. The Facebook Connect code is inside an iframe. Everything works well but when Facebook is supposed to show a popup dialog (for example FB.Connect.showFeedDialog or FB.Connect.streamPublish) The popup shows inside the iframe.
Since its a small iframe window the popup is half hidden.
Any idea on how to solve it is very much appreciated.
Note: the FB login and logout popups do show well.

My window was too small to show the FB iframe properly, so I overrode the private _openFeedDialogIframe function to call the _openFeedDialogWindow:
var init = function()
{
FB.Connect.get_status().waitUntilReady(function(status)
{
FB.Connect._openFeedDialogIframe = function(b, a, f)
{
FB.Connect._openFeedDialogWindow(b, a, f);
};
});
};
FB.ensureInit(init);
This forces a popup every time an iframe is to be shown.

Related

How to detect if a hyperlink has been clicked in a WebView in Metro?

Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.

Facebook flash hiding not working on IE

I'm working on a FB canvas app using Flash with 3D graphics. I must embed my SWF with param wmode="direct".
According to FB documentation, when using wmode="direct", FB hides the flash object when displaying a popup/dialog (buy credits, chat, notifications, etc.) and after the popup close, it shows the flash again.
On Chrome and Firefox it works, but on IE, after the dialog closes I checked the flash element style and I saw that visibility=visible, but still the flash is still hidden!
I tried several approaches, all with same result:
Not using "hideFlashCallback" on FB.init (let FB do it
automatically)
Using "hideFlashCallback":
function onFlashHide(params) {
if (params.state == 'opened') {
hideFlash();
FB.Canvas.hideFlashElement(params.elem);
} else if (params.state == 'closed') {
showFlash();
FB.Canvas.showFlashElement(params.elem);
}
}
function hideFlash() {
$('#flashContent').css('visibility', 'hidden');
}
function showFlash() {
$('#flashContent').css('visibility', 'visible');
}
Thanks!
Roei
UPDATE:
Another reference to FB documentation: http://developers.facebook.com/docs/appsonfacebook/tutorial/#flash
I had the same problem with IE when calling the FB.ui functions. The Facebook dialog would open, but when closed Flash would not come back.
I found a trick which solves this. Before calling to the FB functions, use javascript to set focus to a different HTML element. After that, the Flash object became visible again when I was done with the Facebook dialog.
// IE9 has a problem where the Flash object won't regain
// focus if it has focus when the FB UI is called. To fix this,
// We'll redirect focus before the call.
var lFocus = document.getElementById('focus_target');
lFocus.focus();
Hope this helps.
Have you tried using display: none; and display:block instead of visibility: hidden and visibility: visible? In past projects I have noticed that IE sometimes has trouble with the visibility CSS property...

How to display the facebook request dialog inside our app page?

I'm using the facebook request dialog from http://developers.facebook.com/docs/reference/dialogs/requests/ and its working fine.
Now it displays a popup dialog window with the friends of my facebook account.
Now i tried to display the dialog inside my application page itself and i tried to change the display property to 'page' and also 'iframe' and it doesn't seems to be working..
I'm sure that i've initiated the fb using fb:init and it was working fine when i remove the 'display' property.
How can i do that?
Here's my code..
function newInvite(){
var receiverUserIds = FB.ui({
method : 'apprequests',
display: 'page',
//filters: ['app_non_users'],
message: 'Come on man checkout my new application',
},
function(receiverUserIds) {
//my own callback fun
}
);
}
I've a button for invoking this request and i'm calling this function using jquery as
$('#invite_frd').click(function(){
newInvite();
});
just find the below part in url
display=wap
and change it to
display=touch

How can I hide like button or div from Firefox?

I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps

Want to open FB.Connect.streamPublish in a popup

I have been trying to make the Publish Stream preview modal that appears when i click on Publish Button, to appear in a pop window instead of a javascript modal.
Here is how you might go:
1: Create a html page
2: Put all your FB publish stream code in above created page
3: Use the window.open with the path to above created page to it in popup window.
Example:
<a href="#" onclick="window.open('popup.html', 'win', 'toolbar=0, menubar=0'); return false;">
In the callback for your FB.ensureInit, add this:
FB.Connect.get_status().waitUntilReady(function(status)
{
FB.Connect._openFeedDialogIframe = function(b, a, f)
{
FB.Connect._openFeedDialogWindow(b, a, f);
};
});
This will cause the call to _openFeedDialogIframe to actually call _openFeedDialogWindow, so your feed dialog will be in a popup instead of in an iframe.
Good luck!