Facebook page tab custom dimensions

By -

Problem:
When creating a new page tab containing an iframe for a Facebook App, custom width/height is not allowed, creating unwanted scroll bars.

Solution:

Add this code to your body. Make sure the call to facebook javascript is https since some browsers will block non-https calls on a https URL (e.g. Google Chrome). 
 <script type="text/javascript">
 window.fbAsyncInit = function() {
 FB.Canvas.setSize();
 }
 // Do things that will sometimes call sizeChangeCallback()
 function sizeChangeCallback() {
 FB.Canvas.setSize();
 }
 </script>
 
 <div id="fb-root"></div>
 <script src="https://connect.facebook.net/en_US/all.js"></script>
 <script>
 FB.init({
 appId : 'PLACE_YOUR_APP_ID_HERE',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml : true // parse XFBML
 });
 </script>

Resources:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

http://stackoverflow.com/questions/4998519/setting-the-height-of-iframe-tabs-for-facebook-profile-pages

Comments

Post a Comment

Popular posts from this blog

Breaking down document locking in SharePoint

By -
Image
This is a topic I've been meaning to discuss in a while. We open, change and close documents almost every day, and sometimes we collaborate with other people at the same time on those documents. SharePoint brings all co-authoring features we need, straight out-of-the-box, but sometimes, there are problems. While things are starting to look better on the cloud side, the concept of document locking is still very much up-to-date and understanding how it works and what to do when things go wrong is crucial. In an article that has since disappeared the Microsoft Knowledge Base (but still available here ), Microsoft explains it best: When a document is opened by a client program, Windows SharePoint Services puts a write lock on the document on the server. The write lock times out after 10 minutes. Users cannot modify the document during the time when the document is locked. In a scenario where the program that opens the document unexpectedly quits or crashes and you try to open the do...
Read more

Document ID not being generated

By -
Image
Problem In a scenario where we have many document Content Types, we may want to enable Document ID - aka "Permanent Links" - which is a feature in SharePoint that assigns a specific ID for each document. That ID never changes even if the document is renamed or moved to another location. In this scenario, the Document ID field was being generated for some libraries/content types, but not others, which is a surprisingly common problem. Background There are several stages we need to go through to enable use this mechanism. Stage 1 We enable the feature in the Site Collection Features. Stage 2 Under Site Collection Administration > Document ID Settings, we need to enable the assignment and pick a prefix. The IDs use the format: PREFIX-LISTID-LISTITEMID ( ref ) Where: PREFIX: the preconfigured prefix for the site collection, which can be any set of numbers and letters between 4-12 characters LISTID: the property docid_msft_hier_listid of the list...
Read more

Working around X-Frame-Options for iframes

By -
Image
The problem: One of the first things we noticed after migrating to SharePoint 2013 was that our iframes have stopped working, giving the error: "Refused to display 'http://contoso/pages/home.aspx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." Quickly we could see that this is in fact a security mechanism to prevent click-jacking and others: "The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a frame or iframe. Sites can use this to avoid Clickjacking attacks, by ensuring that their content is not embedded into other sites." Soon we realized that, starting SharePoint 2013, an HTTP Module is adding the header " X-Frame-Options " by default, with the value " SAMEORIGIN ". This is effectively preventing the rendering of pages outside the scope of the current web application. The (attempted) solution: So what to do?...
Read more