I am writing a Facebook application that is a simple board game which I have implemented in javascript. Facebook only seems to let javascript applications run within an iframe so I am loading the page using <fb:iframe>. I just want to be able to tell the javascript the user's id so I can tell the user if it is his turn or not but I can not find documentation on accessing facebook data from within the fb:iframe. I am probably missing some basic conecpt as I do not understand the facebook API very well.
Facebook's API is very tough to follow, and the documentation is very poor. You're right about the Javascript... normal Javascript only works inside an iframe on Facebook, otherwise you're limited to a subset of filtered Javascript called FBJS. You can safely ignore anything about FBJS in the documentation, and focus on iframes.
Iframe loading
The first thing I would mention is that an <fb:iframe> tag actually gets rendered with a ton of stuff in the src attribute. So if you put a tag like this into your Facebook page: <fb:iframe src="http://example.com/page?x=y">, what it ends up becoming when it loads into a user's browser is more like this:
<iframe src="http://example.com/page?x=y&fb_sig_in_iframe=1&fb_sig_locale=en_US&fb_sig_in_new_facebook=1&fb_sig_time=1246340245.3338&fb_sig_added=1&fb_sig_profile_update_time=1242155811&fb_sig_expires=1246345200&fb_sig_user=000000001&fb_sig_session_key=2.d13uVGvWVL4hVAXELgxkZw__.3600.1246345200-000000001&fb_sig_ss=mZtFjaexyuyQdGnUz1zhYTA__&fb_sig_api_key=46899e6f07cef023b7fda4fg2e21bc58&fb_sig_app_id=22209322289&fb_sig=bbc165ebc699b12345678960fd043033">
Facebook adds a ton of stuff to the src. The parameter that tells you the user's Facebook id is fb_sig_user (which is 000000001 here). I'm assuming your app is set up as an "FBML app", since you probably wouldn't use an <fb:iframe> tag in an "Iframe app". Nonetheless, the rendering method is similar in both cases, and you get a bunch of extra stuff to your src document in an "Iframe app" as well.
This really only passes you the Facebook user id on the first load of the iframe, however. Subsequent operations within the iframe won't have access to that user id unless you pass it around explicitly.
Facebook Connect
If you want to interact with Facebook from within the iframe, that's where the Facebook Connect Javascript libraries comes in. The best instructions on setting up Facebook Connect is probably this wiki page, but it's still a bit murky. Facebook Connect can be used for both completely external sites, or just regular content inside an iframe. You fall into the latter category, so if you follow the instructions in that link and use the first line of code in step 2 (for the FeatureLoader), you should be ok.
Once you've included the FeatureLoader.js script and called FB.init, you should generally be up and running with FB Connect. You should be able to interact with the API from then on out. The users.getLoggedInUser() method will give you the current user id inside the iframe via Javascript.
Hope that helps.
Note that as of March 2011, FB is moving to POST requests to load iframes. It sends a form action with method="post" and target="iframe_canvas", plus an input type="hidden" with a "signed_request"
You cna use the facebook API to get the user ID by calling
Users.getLoggedInUser
You can access that value, then use echo() to add that to your HTML as a javascript variable, which will make it available to your Javascript code.
Try Env.user, it has the logged in user's ID.
Related
I am new to Firebase and thus I am asking this question. Also, I searched something similar to this question, tried them but failed. Thus when writing the reply, it would be great, if someone can add even the significance of the steps.
I have developed a chatbot and code at the following url being loaded when I use the web widget provided by the framework:
http://www.buildquickbots.com/botwidget/v2/demo/static/js/sdk.js
Every time user clicks on the webwidget, the above url gets opened which I doesn't want to happen. Thus I planned to host the code at the above url on to Firebase so that when user clicks on the widget something like myapp.fireabse.com/botwidget/v2/demo/static/js/sdk.js opens up.
How can I do this with nodejs backend?
The sdk.js URL which creates an iframe and appends it your website in a widget. And this domain name is only visible only if you inspect the browser. Check Liva widget: http://www.livafluidfashion.com/
Solution 1:
If you want to see the domain name as myapp.fireabse.com then redirect the incoming traffic from "myapp.fireabse.com/botwidget/*" to "www.buildquickbots.com/botwidget/".
Solution 2:
You can get "firebase.buildquickbots.com" as a domain name also. For that, you have to talk/mail to Gupshup support people.
I have a question. I know facebook accommodates for it, but if I am creating an app using javascript and want to use an api, whats the best way to deal with the redirect_uri?
I thought of using an iframe, passing the data back into the parent and then closing the iframe but I'm having problems with that. Obviously the whole cross domain is a thing that'll probably render this useless but even before that when I run it as a normal site (with the iframe on the same domain) I get this odd occurance when using the instagram api. (I'm presuming its generic)
if I'm logged in to instagram online it runs and gets the data but doesn't seem to send the data to the parent
if I'm not logged in it won't do anything, the php redirect to the instagram login page doesn't go there at all.
I'm far more interested in a possible solution without using iframes though.
Thoughts?
is there a function in ColdFusion that detects whether or not a browser window is the top window? (Similar to (if (window == window.top)) in JavaScript)
The reason I ask is because I would like to make certain page elements present when the page is directly accessed by the user, and not present if my page is iframed.
CFML code runs on the CF server, whereas any considerations about browser windows obviously run on the client. CF is completely unaware of the UI configuration of the client system, all it sees is "a request". Indeed the requests don't even come from the client, they come from the web server which acts as a go-between for CF-serviced requests: CF has no interaction with the client itself.
The only information the web server gives to CF that in any way relates to the client browser is some of the stuff in the CGI scope, and obviously that's limited. And none of it relates to the configuration of browser windows / iframes.
You will need to solve this with Javascript (which I will add to the tags of your question).
To trigger different code to execute on CF given a certain browsing situation, you are going to need to use Javascript to add some information to the request to identify the situation to CF. This could be adding a parameter on the query string, or something like that.
If someone was 'wrapping' one of my products I'd want to know who and how so I could improve the experience for the user and the site owner. With that in mind, what I would do is automatically break out of any frames by default. I would then create a simple api and provide instructions to other webmasters on the proper way to include your content. Display different content once you've determined if your content is PROPERLY being included in another site. For webmasters that want to include your content:
Provide recommended height/width for the iFrame so you can
include your logo or ads with the content.
Provide anything you want them to include in the query string to help track usage.
You could even add fun stuff to your api to make your content look more integrated into the including website like reacting to url.bgcolor or url.bgimage.
You could go as simple as looking for and recording the value of some url variable like url.remoteSiteAddress or as complicated as registering the site and providing unique key. Of course there are other considerations to take into account to enforce the key. Being that you don't really care that the content is being displayed on a remote site, I suspect just recording a simple url variable is more your speed.
If a different website is putting your page in an iframe on their website, then you could use the CGI.HTTP_REFERRER variable to check if the website domain is yours or not, and load content as desired.
I have a facebook app that requiers authorization, therefore I have to pass a redirect url along with the authentification-request.
My app is entierly front-end code.
If I wan't the standalone-version, I can just pass the window.location.href
Something like this won't work for the app-page, because it's iframes from different servers. Therefore I have to hardcode the app-url in this case.
The app is intended to be embedded on different app-pages, so I can't hardcode that. Apperntly I can get the facebook page-tab-link etc using the facebook api. Haven't looked in to the details yet though. Redirect back to page tab after user authenticates?
As facebook doesn't allow parameters, my plan is to add /pagetab/ or /app/ to the end of my url, and add that to the various urls in the settings of facebook. After that I will create different cases for the different url-endings.
Although this soultion sounds like a lot of work. Is there a better way to do this?
If your app wasn’t totally client-side, then you could find the info which page your app is embedded on in the signed_request parameter. But since Facebook POSTs that to the iframe on calling your app, there is no way of accessing it client-side.
As facebook doesn't allow parameters
Facebook allows for a parameter called app_data in the URL, which is passed on to your app. But again, this happens via POST on first page load.
If you were willing (and able to, regarding your platform) to make the little adjustment of having your apps HTML code generated by a server-side language (instead of it being purely static HTML pages), then you could easily evaluate the signed_request parameter, and have the page id written into a JavaScript variable, so that you can use it client-side from there.
I have a userscript (read: my Javascript on someone else's site) that allows users to share their IMDb votes with their Facebook friends. I just generate a URL for a Facebook share page with all of the custom information needed for the specific situation, something like "So and so gave the film Forrest Gump a rating of 9/10 on IMDb" with links to a thumbnail and the movie page itself, and allow the user to add their their thoughts on the movie itself.
script with Facebook share dialog http://s3.amazonaws.com/uso_ss/10985/large.png?1284850755
Until recently, I accomplished this by passing all of my parameters to http://www.facebook.com/connect/prompt_feed.php. Yesterday this broke, and it appears that Facebook is deprecating this sharing method in favor of using their Dialog code. (All of the official FB docs now refer to prompt_feed.php as the "old" way of sharing.)
I found a temporary workaround here that just adds a display=touch variable to the prompt_feed query string. This URL is working for the time being (go ahead and click it!), but I fear that it's a loophole that Facebook will close as soon as they realize it's still available, and I'll be stuck without a way to post stuff to FB.
The current methods of posting to Facebook seem to be 1) using the Dialog URL mentioned above and 2) via Javascript using FB.ui Both of these methods appear to require a Facebook App ID, and when I registered a new FB app for this purpose and tried to use it to create a http://www.facebook.com/dialog/feed request, I got an error because my app doesn't "own" the IMDb page that it's linking to. Any ideas about how to accomplish my purposes going forward?
to "own" the imdb page you just need to set the canvas url to the imdb domain.
you can simply use this url:
http://www.facebook.com/sharer.php?u=http://www.your-url-to-share.com
Just modify or change the http://www.your-url-to-share.com part in the above URL with url of the webpage or article that you want to share on the facebook feeds.
If you use the sharer.php and want text plus a link add the &t={text} to the url. For example:
http://www.facebook.com/sharer.php?u=http://www.your-url-to-share.com&t=text-to-share