How to modify facebook canvas page? - facebook

I am making a game with Unity3d for facebook.
Is it possible to add anything else but the unity3d binary on the facebook canvas? Like background image, external advertisement banner etc. ?
Earlier there were more options, but nowadays you can only set you .unity3d file in the settings.
There are very limited options in facebook developer pages for modifying your canvas page, so I guess the page modification has to be done somewhere else?
I also tried Unity´s own webPlayerTemplate but that does nothing.

Facebook canvas is just an iFrame meaning what ever you put in the web page of the game will be displayed in there.
You can add anything by editing the html page that comes as output from the webplayer build. Easy solution to try opening the html page in dreamweaver or similar and start adding elements and see if it comes in the output. Be cautious there are chances that the html content gets rendered behind the game.
PS: one problem with untiy's web player build it that it always gets rendered above the html contents in the page.

Thank you for your answer!
I forgot to mention this:
When making a game on facebook without "facebook SDK for Unity" you can set the canvas as a webpage.
Then the canvas can be modified with the html. I tried that and it works just fine.
But when your app is using facebook SDK you can only include .unity3d file URL and the html file is completely ignored.
PS: after some more studies it seems you can inject html commands with Application.ExternalEval()
basicly anywhere inside your unity project by:
string injection = "lines to be executed on your canvas page";
Application.ExternalEval(injection);

Related

Facebook application (Static HTML)

I'm trying to create a landing page on facebook with the Static HTML application, but the image does not appear in IE8 show only at 9 and other browsers like Chrome and Firefox.
The application link is: https://www.facebook.com/hyundainic/app_128953167177144.
Yet another application that looks like:
https://www.facebook.com/SomosEskimo/app_367456286664440.
This if displayed in all browsers, except that technically I do not know if it's the same.
I'm editing the html / css and occupy absolute and relative positioning, I thought that this could affect and remove it, but the problem persists forever.
Can someone help me with this?
I think the issue is probably that you are using an absolute, non-SSL URL for the image source, and the links you posted to the app use SSL. If you leave the protocol off (example: "//whatever.com/myimage.jpg" instead of "http://whatever" or "https://whatever") the browser will use https when needed.
However, it looks like your image doesn't work over SSL:
https://hyundai.com.ni/img/quickservice-fb.jpg?id=3
You can try viewing your app using http:// and confirm it displays ok in all targeted browsers to see if this is really your issue.

<fb:comment> tag not working properly

I have a GWT app and Im trying to put fb social plugin comment in side of my page. However I have the folowing problem.
If I put the tag in my .html it works perfect, but If I put id dynamically (like with an HTML widjet), It does not work. It just does not display anything.
Can anyone help me? Im having this problem in general, not only with the fb:comment tag.
Note: If I use the iframe implementation of, for example, "fb:like", it works perfect.
My understanding of facebook's api is that it loads your content, and parses out the tags in the fb namespace, replacing them before the actual content is drawn for the user. In contrast, none of the GWT compiled code (or indeed any Javascript code) gets a chance to make changes to the dom until the page has loaded in the browser fully, after facebook has made the changes it needs to.
My advice: Put the fb namespaced tags on the initial page, but perhaps wrap them in a div and mark them as display:none. Then you can grab them from your GWT code and wrap them up in a widget, only to be displayed when you are ready.

How To stream.publish Within a Profile Tab

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

How can I "lock" facebook into an iFrame?

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.

Just can't seem to fetch the mobile Gmail html, what is wrong?

I'm trying to cache the mobile Gmail webpage because UIWebView does not cache the content itself (mobile safari does, but not UIWebView).
I tried the methods listed here Reading HTML content from a UIWebView basically saving the html either directly from URLRequest or from UIWebView itself. When I try to put the html saved back into UIWebView it is not the same page!
This is the page that I want to save
alt text http://img39.imageshack.us/img39/5679/screenshot20090830at123.png
This is the page that the html saved will display
alt text http://img39.imageshack.us/img39/8734/screenshot20090830at122.png
If you're loading using loadData:MIMEType:textEncodingName:baseURL: make sure you're setting baseURL correctly - that way, the WebView will know where to look for relative stylesheets and so on.
Edit: For example, if I was saving this page, I'd set the base URL to Just can't seem to fetch the mobile Gmail html, what is wrong?.
That looks like the same page to me, but with different stylesheets attached. If you're just re-displaying identical HTML from your local server, the relative stylesheet paths in Google's HTML would no longer be correct. Also, any AJAX requests meant to run after the page loads would no longer work (both because the relative paths to the scripts would be wrong, and also because Cross-Site Scripting restrictions would prevent them from contacting Google).
Attempting to scrape content from an AJAX-enabled application is no small undertaking. You'd have to replicate a lot of GMail's functionality to truly reproduce the exact page Google presents.