Situation: I have a page with an iframe, which contains a form. But the iframe is longer than a screen page and the user has to scroll down to submit it. But it loads just the contents of the iframe, so it'll be scrolled by the same amount before submitting the page. I want to be at the top of the page. But since the user scrolled the facebook page and not the iframe, I cannot use scrollTo (not allowed for cross domain iframes).
Question: Is it possible submit the form to facebook to reload the entire page and still gives me access to the form data?
Not completely sure if this is what you're asking, but if it's an iframe app you can use FB.Canvas.scrollTo to control the main Facebook page position. You can either call it selectively or you can put code like this in the <head> section of every page:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript'>
window.onload=function() { FB.Canvas.scrollTo(0,0); }
</script>
That way every time you load a new page in your iframe, the main page will return to the top.
Related
I have successfully embedded the facebook page plugin in my page, now I am trying to make it so the plugin only scrolls on mobile when 2 fingers are used, much like the google maps iframe embed. Don't even know where to start!
<div class="fb-page" data-href="https://www.facebook.com/<?=$siteFacebook?>" data-small-header="false" data-height='+fbHeight+' data-tabs="timeline" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/<?=$siteFacebook?>" class="fb-xfbml-parse-ignore">
<?=$siteName?>
</blockquote>
</div>
where $siteFacebook is the id of my newsfeed
As misorude pointed out, it's not possible to interact with the elements of an iframe, so I took a different tack. I overlaid the facebook iframe with a transparent div thus blocking any interaction with the iframe. on hover a message was displayed in the transparent div saying to 'click or tap to interact' (this also displayed on first touch interaction). On clicking the div (or second touch) it dropped the z-index of the transparent div behind the facebook iframe allowing the user to interact with the facebook iframe.
Just thought I'd add my workaround solution in case it points someone in the right direction in the future.
I got the code for the Facebook share button code right from facebook, it is as this:
<div class="fb-share-button" data-href="http://example.com/item/sharefb/47"></div>
While on a regular page, it works fine. It renders it assyncrhonously and for each item on the page working great.
But inside a fancybox ajax call, the button simply won't work. Facebook API will not process it, and the div will not turn into facebook's iframe full of stuff.
Any hints?
You need to parse the button after opening the box:
FB.XFBML.parse();
Source: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");
As of today my social commenting plugin is getting cut off.
In my tab page settings I chose fluid for height.
I have my main div with height:100%
Then i have a script that I used to auto resize the page and show all the comments if you clicked show more. This was working fine yesterday.
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Here is a link to my tab page:
http://hostfb.com/files/2598/af1d87a797314ed16ec3db8b3f094c45f30f8cf3/
https://www.facebook.com/dewafelbakkers?sk=app_246342282051389
I need my page to extend to show ten comments and then extend more to show more comments if clicked.
Remove the fixed height of 500 on the div that wraps the plugin control (right about fb-root div).
I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>