I want to use fancybox in a facebook tab based page. In that page there are seperate pages loading in fancybox, but what is happening is I can not give width of that page more than 520px as my fancybox opens inside the facebook page so there is a scrollbars in my facebook page. Is there a way where I can load my fancybox as overlay on full page so there my new pages that are opening in fancybox can have more than 520px width.
Thanks in advance
No, you only have control over the space that Facebook gives to you in your iFrame. There are certain dialogs you can ask Facebook to display, see if one of them fits your needs.
Related
I am building a Facebook Page Tab. It links to a website that is being loaded into Facebook as an iFrame, following strictly along the lines of developing Facebook page tabs.
I notice though, on Facebook Stories (a tab from the Facebook fan page) they have a border around the loaded iframe.
It does not appear at the original source of the iframe, though. And I do not see an option for it in the Facebook Page Tab settings - it also appears to match the style/css of the facebook iframe.
My question is: How can I have a border surrounding an iframe loaded in another page (this instance, Facebook Page Tab) that does not appear at the original source of the webpage?
Thanks!
The Facebook stories tab you refer to doesn't have a border on the iframe. The border is set on the body with css.
If you check the source of the tab : https://www.facebookstories.com/tab/
You will see the border next to the scrollbar.
I hope this answers you question :)
I'm adding facebook login buttons to fancybox (version 1.3.4) modals (one for join, one for login). The facebook buttons all get instantiated when the page loads, but are hidden. After triggering the fancybox login modal, the facebook buttons get rewritten in the modal and load correctly the first time. However if you close the modal and then reload it a second or third time, there is no facebook login button. It's just blank. When I look at the inline html block
that fancybox based the modal on, the facebook button markup that was generated when the page initially loaded is gone...actually not completely gone, but the button code deep in the iframe is wiped out.
I've seen suggestions to iframe these facebook buttons, so I tried adding an iframe instead of the raw facebook button markup. Note that I am not using the iframe fancybox type and I can't currently do that. When I include <iframe src="/myfacebookbuttonpage"></iframe> in the modal section, again it loads correctly the first time and then after closing the modal, looking at the source I can see the iframe rewritten as <iframe src="about:blank"></iframe> and the innards of the iframe are blank.
Anyone have any idea what's going on here? Or is this attempt to include facebook login buttons in fancybox modals completely wrong for some reason?
It's a bug in fancybox v1.3.2+ when using inline iframes.
As a work around, you may edit the fancybox js file or apply the workaround in your custom fancybox script.
Go here for further instructions
I have a facebook application which lists a list of categories in an iframe in facebook page. In the old facebook view, it is fit to the width where the iframe width is 520px. But when the page is opened in the new Timeline view, it's width is still 520px.
Since the function FB.Canvas.setAutoResize() is now deprecated by Facebook, I tried using FB.Canvas.setAutoGrow(). But still, it is not working.
Can any one please suggest a solution to auto adjust the canvas in both facebook page with timeline installed and without that??
Thanks...in advance..
You need to change this in the settings of application:
I want resize the iframe height of my tab page. I am trying FB.Canvas.SetSize method, also I try with jQuery and javascript resize the iframe but don´t work.
My application is not a Canvas.It is a tab page so i think "FB.Canvas method should not work with tab page".
How could resize my tab page on facebook profile?
How could drop the iFrame scrollbars on tab page?
Excuse me I also need to know if I could modify the share button with a custom image.
Thanks in advance
Provide some code
Make sure you have the Canvas Height option is set to Settable under the App Advanced Settings
Use asynchronous Loading of your JS-SDK and put your FB.Canvas.setSize(); inside the fbAsyncInit function
Please note that the fbAsyncInit function may fire (and hence your FB.Canvas.setSize();) before all images of your page are loaded! which means actual height of page is not reached yet!
I'm basically creating a 520px wide welcome page for Facebook which I will upload onto the server and then Iframe it into a Facebook fan page. I'm doing this using HTML, CSS and JQuery rather than the old FBML method.
I've seen a lot of companies using an overlayed image to tease the user to 'like' the page. Once the user have liked the page, the content underneath is visible.
Examples:
https://www.facebook.com/redbull
https://www.facebook.com/smirnoffus
Red Bull - when the like button is triggered the transparent image is hidden to show content underneath
Smirnoff uses an image to give the illusion that the image is overlayed on top of the content. Somehow when the like button is triggered, the image is swapped for content.
Can anyone shed any light on how this can be acheived? I don't mind which one - Smirnoffus looks easier but might be a pain as everytime I update the content, I'll need to update image too.
When a user likes your Facebook fan page, Facebook will reload the whole page. You can then use server code to inspect the signed_request post parameter that they will send over. This question has an example code of how to detect if they liked the page in server side code.