I play some of the games on facebook and I was wondering if there is a way for me to create a simple HTML file with the game in an IFRAME. Ive been tinkering with it and can't seem to get it to display correctly and facebook breaks out of the frame after a bit.
You probably can't. In the end, there is nothing that can stop Facebook (or any site for that matter) from putting this in the top of a JavaScript file that is used on the page:
if (top!=self) {
top.location.replace(document.location);
}
As a matter of fact, that's exactly what StackOverflow does to prevent it's content from being presented in an IFRAME element.
Also, it's very likely that you are violating some sort of Terms of Service, a license, or something of that nature by trying to do that.
Related
I am trying to build a Facebook app that generates a tab that includes a page's wall complete with "post to wall" dialog below some content. So far the only app that I know that does that is Bandpage (for example http://www.facebook.com/beyonce ).
It turns down that rendering a wall this way in an iframe is not trivial. Here are some of the approaches I've researched:
Using curl to scrape a wall: not only is this an ugly solution, but Facebook protects against that.
Using Social Plugins ( http://developers.facebook.com/docs/plugins/ ): Like Box (http://developers.facebook.com/docs/reference/plugins/like-box/) renders a wall, and with "faces" and "header" options turned off + Autoresize js call it almost looks like what I want, but does not include a comment field and the look of the box can't be customized.
Using Graph API it's easy to get the wall's feed in JSON, but then rendering and styling it is a nightmare - there must be a simpler way.
Using fb:wall - this is deprecated and will be turned off in a few months, but it's not even working as a stopgap. Or does it?
Using fb:fan which supposedly takes a css stylesheet.
So - it seems possible to render the wall in a tab since Bandpage is doing it, but how?
This might possibly help you overcome your problem in #3 :
Using Graph API it's easy to get the wall's feed in JSON, but then
rendering and styling it is a nightmare - there must be a simpler way.
Trying to "recreate" the look and feel of any good implementation is a hard task. The following link might assist you with styling your own elements to look like facebook elements.
http://ckrack.github.com/fbootstrapp/
Fbootstrapp is a toolkit designed to kickstart development of facebook
iframe apps in both relevant sizes. It includes base CSS and HTML for
typography, forms, buttons, tables, grids, navigation, and more,
styled in the typical facebook look and feel.
Here are a few examples of the styling :
(source: softpedia-static.com)
Notification boxes
(source: softpedia-static.com)
Form Elements
(source: softpedia-static.com)
In closing I would like to bring to attention the ever nearing deprecation of FBML. We as facebook developers are solely responsible for keeping up-to-date with the changes that 3rd party API's, on which we base our development, make to their systems. There are no alternatives to FBML, only new (and in many cases) better ways to display/extract data from facebook's servers.
A great place to keep updated on changes and new features would be the Facebook Developers Blog and the Facebook Developers Roadmap.
I have successfully setup an iFrame based App using the Javascript SDK, and we are trying to enable it on a Page Tab.
It seems Facebook has changed some things lately, because the app breaks when added to the Page Tab. I even went as far as making sure that all external scripts were included in the main index.php file, and that the body tags were taken out.
No, I'm trying to find out if it is even possible to use methods such as the stream.publish within a Profile Tab at all.
It seems like it isn't. As far as I can tell, you can no longer use any social methods on the Profile Tab.
Here were two related articles on the subject:
insidefacebook.com/2010/08/19/facebook-moving-toward-iframes-over-fbml-for-canvas-apps-and-page-tabs/
-and-
developers.facebook.com/roadmap
If anyone can confirm or deny this, it would be a huge help. The Facebook docs are just all over the place.
Here's a link to the working App Canvas as it stands now: http://apps.facebook.com/votetesting/
I know that on tab pages, you cannot do any JS until the user clicks on something first. Maybe that is the problem.
-Roozbeh
Im trying to understand how to learn reading the source of a facebook fan page. So far, I can only get the layout displayed while viewing the source.
Here is an example: If you go here:
http://www.facebook.com/pages/See-oho-nieps-YothG-RRofiLe/106340746065367#!/pages/Milton-Keynes-United-Kingdom/IF-MR-BEAN-WAS-IN-AVATAR-HE-WOULD-LOOK-LIKE-THIS/302690570115
That canvas page requires you to be a fan of the page. This is done with:
content here
My question is, why cant I find the FB:visible code in the source of that page? I would be grateful for any guidance!
I believe it's because the FBML is interpreted server side, so if it output the markup their parser would have to be Javascript based, causing a greater risk to security (?) and slowing the process down entirely.
I'm not too familiar with it though, I must be honest.
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.
I'm currently developing a Facebook application which will eventually end up on a Facebook Page. The problem is that I don't know how to remove the box header (handle?) with the application name and the close-button.
I've seen other applications on Pages being able to remove the header. Look at Apples Page here: http://www.facebook.com/home.php#/pages/Apple-Students/11147074409
Is it because they use an IFrame? I've tried that as well but I still need to call setFBML and embed an IFrame inside it.
I think you're right about the IFrame in the Apple page. It looks like the entire left column is a single IFrame. Still, it's not clear how they managed to get rid of the handle bar. Now I'm curious too...
Is is possible that Apple paid facebook to remove the header you are talking about?
Maybe it's a special case and they have a special API/UI for people who are willing to give them cash money?
I wrote a Facebook application a while back and I do not believe it has what you are calling a box header on it: http://apps.facebook.com/photoisland/. The application is configured to run entirely in an IFrame and I am not using FBML at all.
I've finally found out how to get an IFrame without a header just like Apple does.
You have to sign a special deal with Facebook to get it... however this deal doesn't come cheap so it's out of question for most companies. :(