I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
Related
The original method for sharing links with a custom image, text and link appears to have been stripped from Facebook. I for one would love to see them bring this back.
Here is my situtation. I have a Facebook tab that loads a page that is hosted under my hosteddomains.com. I setup a Facebook app to work with my Facebook tab. When I try to use the new "Share Dialog" if the link I want to share is not the same as the app domains then i get an error and I can't share the link. Am I doing something wrong or is this what they intended to do?
IF that's what they intended to do then there is no way that this will replace what sharer.php could do. I could be on any site and share any link with an image to Facebook and have it posted to my wall.
The question is if i am on facebook tab and i want to share a link (I want a dialog box with a custom photo, title, link, and summary) and allow my users to post this custom message to there Facebook status.
Maybe i am confused about how to accomplish this, but so far i am not having much luck.
I miss the good ole days when i could just construct a URL and that would give me the ability to share what i want to share. Twitter and Pinterest have these methods.
Here are some code examples of things that I've tried that did not work:
Option #1:
The url in this option goes to page that I created on hosteddomains.com that has the Open Graph Meta Tags in it. My idea was to share these pages from my server that will direct them back to my Facebook tab. The result I was getting from this method was seeing the title of the tab from my FB page and description. The reason turned out to be that if i set the og:url to my Facebook tab page, that's the page that would get scraped. That's not what i was expecting from this method. I thought it would take the meta tags from the page i shared and the url with it. Not take all of the info from url and ignore the meta tags.
<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]"
target="_parent">SHARE ON FB</a></p>
Option #2:
Tried using Facebook Share Dialog. I had an interesting time with this one. I setup a new Facebook app. I tried the Facebook tab as the URL and also my custom url to the page that has custom open graph meta tags. The facebook app has two App Domains - hosteddomain.com and websiteA.com. I also created a Page Tab section. The page tab section loads the HTML page that was loaded in the tab we made for our facebook page. Issue with this method is I don't get a custom open graph options set from my php page. I'm picking up information from the facebook tab again. At least now the dialog box shows the name of the new app. I am limited in what i can share using this method. The url i share has to belong to the App Domains. In order to have multiple app domains, I had to make that Page Tab section and then add the second url to the App Domains field, otherwise i got a warning.
<a href="https://www.facebook.com/dialog/share?app_id=[appID]&display=popup&href=[url]
&redirect_uri=[url]&ref=s" target="_blank">SHARE THIS</a>
Option #3
The last thing I tried was the fb-share-button using the Javascript SDK. I get the same result as option #1. I don't think there is much difference between these two. Option 3 here is a bit easier to deal with and cleaner code. In this example, the url is to my custom page on hosteddomains.com that has my custom open graph meta tags. That doesnt seem to matter though. It still pulls the info from the og:url meta tag. I tried removing the og:url meta tag. I get the same result. Is it the Page Tab info interfering?
<div class="fb-share-button" data-href="[url]"></div>
I am planning to create some dynamic content in a Facebook tab for my fan page. It should have content displayed if the visitor is not a fan, and then upon them clicking the Like button, changing the content to display hidden carrots (metaphorically). Is it possible to capture the event of the click on the Like button from inside the iframe?
On a Facebook fan page, when the user clicks the Like button, the whole page gets reloaded and Facebook sends an HTTP post to your website with a parameter called signed_request that you would need to decode and look at with server code, not javascript. The code to decode it will obviously vary depending on what language you are using, but the process is documented on Facebooks site. Once decoded, you will need to look at the page.liked value.
I've found the code but not where to put it on my Facebook page.. not my website. Everyone keeps referencing dropping it in a code block, but I haven't been able to find an example of how to do this.
There's already a Like button on Facebook Pages if the user viewing the page doesn't already like the page. If you want to add a like button on your Page for another entity (such as a website, article, or a different Page) you'll need to install a tab to your page where you can put HTML content.
There are several third party applications that allow you to do this, one of the popular ones is http://www.facebook.com/apps/application.php?id=190322544333196 - you could add a new tab to your page with some static content (images, etc) and include the Like button on that tab.
There is no way to embed a like button for an external entity into a post on the page's wall, which i suspect is what you're currently trying to do.
i have one problem with facebook landing page. i created facebook landing page through static fbml app but i have one problem with like button, user must like the page before he will navigate to another page.
i want to do same functionality in my landing page,
http://www.facebook.com/BusinessofCinema?v=app_6009294086.
anyone know about this please help me .
thanks inadvance......
At this point you'll probably want to go with iframe based Facebook page tabs instead, now that these have become available and fbml based apps are being phased out. Among other advantages, the signed_request parameter that Facebook sends to an iframe based tab app includes a flag that indicates whether the user is a fan of the page.
Now that iframes are the only way to create new Facebook apps and FBML is being phased out, you need a new way to do it.
When your app URL is loaded, it is passed a signed_request POST parameter. This parameter contains the information you need. However, it is packed and encoded so it requires some manipulation to get the right info out.
First, split the signed_request on the '.' character. The first part is the signature. The second part is the encoded_data
Decode the encoded_data into a JSON string using the URLBase64Decode function equivalent in your server-side programming language
The JSON object contains a node called "page". This contains a node called "liked".
If "liked" is true, the user liked the page and you display the "liked" version of your app. If false, show the "Please like me" version of the site.
The FBML way will continue to work the way you have it live right now, but for anyone building a new Facebook app, this is the way to do.
writing my first facebook webapp and i have some questions. I'm using their new Graph API + JS library.
The idea is that in order to use my webapp, user has to 'Like' facebook page A.
Suppose user is logged in. I have to check if he 'likes' page A. If user doesn't like that page, i display 'fan box' via
FB.XFBML.parse('<fb:fan profile_id="A's id" stream="0" connections="0" width="450"></fb:fan>');
Now, this fan box with 'Like' button is rendered in iframe that has src set to facebook domain.
Problem: i want to know when user clicks on 'Like' button so that i can display the rest of my webapp. The only possible solution that i can think of is polling every second facebook graph server which is really bad.
i can't attach 'onClick' event on that button cause it's inside iframe pointed to facebook domain (can't access it at all using JS)
i tried getting the contents of this iframe from my server and display it in iframe with empty src property so that i can access its elements - doesn't work, fan box is messed up.
There is no way that i know of to send 'i want to like that page' request to Graph server on behalf of the user.
I'm stumped. I really doubt that polling is the right way to solve this problem :)
You can get the onclick event by using the fbml code of like button instead of iframe code.
Facebook provides FB.event.subscribe which triggers when somebody clicks like button.
A complete tutorial is here.In your case you can write the code to refresh the page on like button click. and check for like condition on page load. so that if current user has liked the page you can redirect him to application page.