Facebook Dev: What is this? - facebook

Okay so for this page:
http://www.facebook.com/ESPN?sk=app_224097940938597
Which appears on the left hand bar between ESPN Fanwhich and ESPN Live Chat.
That isn't a canvas but it isn't a static page that I can gather. I found this tutorial: http://www.kimwoodbridge.com/how-to-add-a-custom-tab-to-a-facebook-fan-page/
But that is creating static content.
What I'm wondering is how I can create a dynamic page within a tab?

To create a "dynamic" page within a tab is pretty easy. Install the Developer's App and create a new application. There are tons of posts all over google about creating new Facebook apps, so you should be able to find those pretty easily.
After you create a new application, you set up the Tab information for it under "Facebook Integration."
The way tabs work is they create an iFrame in the Facebook canvas that loads a page from your webserver. You can do whatever you want within that iframe to make a dynamic page. Also, since it's an iframe, you can have links that go all over the place and build a whole mini-site which works inside the Facebook canvas.
Basically, you do the same thing you would normally do to create a dynamic page/site, and set up a Facebook application that points to it. There are a few caveats to building Facebook applications, but they're hard to enumerate without specific scenarios. The biggest one (and it's well documented) is that the size of a tab is 520px wide, so whatever you build has to fit within that width. The length can be whatever you want, Facebook has APIs in place that let you automatically resize the iframe as needed.
Good luck, and welcome to Facebook programming. Prepare to rip your hair out, because everything changes every 4-6 weeks :x

Related

Which GWT Layout Panel is perfect for building Mobile Friendly Website?

Ok, A Mobile Friendly Website should be very short and focus on the task, so it wont need to show the headers as in Desktop Website.
Here is What I want to design.
When user open mydomain.com in Mobile devices like Smartphone or Tablet. They Will see
Email:
Pass:
Login
Registration
Explanation
About
When they CLick Login they will go to a page that lists all the products, the Page Should has "Home" link the Back button
Home Back
Product 1 , some other info
Product 2 , some other info
Product 3 , some other info
......
When user clicks on a product, it will show the details of the products
Home Back
This is Product 1
Detail info of product 1..
If user hits "Back" button then it will go back to the previous page (ie, the list of products page).
Note that: in the home page, we also have "Registration", "Explanation" & "About" Buttons, but we will never show these buttons in any other pages except the home page.
So, my question is:
Is there any Gwt Layout panel that can help me to achieve that Simple Design for Mobile Friendly Website?
The only 1 I can see is the TabLayoutPanel, but the headers are always appear in all pages.
What about "StackLayoutPanel"? How it look like? & is it good for Mobile Website?
It's better not to use any LayoutPanels in mobile apps. Ideally, you should not use any widgets that implement RequiresResize interface.
Such widgets rely on JavaScript to resize them. This is very slow compared to native browser layout mechanism. It also requires much more code. The difference is not significant on desktop, but very important/noticeable on mobile.
A good mobile library should rely entirely on a native browser layout mechanism, like a flexbox model. This is the key reason to consider mgwt for mobile development.
None of the widgets included with GWT are primary thought for mobile, so I recommend that you use another library like m-gwt, gwt-mobile, or touchkit.
Anyway there is a very simple mobile web example application in the GWT trunk which you can use as reference. They use DeckLayoutPanel since you can add multiple views and let it to animate between them. You can try this live demo from a mobile device (you can append formfactor=mobile/tablet/desktop to switch view implementations). The demo is very old, without using modern CSS3, but helpful.
So, if your application is very simple use DeckLayoutPanel, but if it's going to getting bigger, it's better to consider a mobile specific library.

Facebook Tabs - Difference between apps vs tabs

I have recently inherited the Admin/developer role for our page and I am new to Facebook Development. I am attempting to add a new tab to our page and the only option I am getting is to build an App but all of the App options I come across make it sound like it's trying to do more than what I want it to do.
What I want to do is produce a tab on the page. That will link to an app/canvas displaying an image that the user can click to go to our offer.
So far I've built a basic app with Display Name, namespace, Page Tab Name, Page Tab URL and a Tab image. but when I refresh my page I do not get a new tab and when I preview the app page it is not the format I am looking for.
I've tried going through the tutorials but since this is all new to me I ahve yet to make any sense as to what I'm looking for or missing. Could anyone let me know what app format I am looking for? Or am I in the wrong place entirely?
You need to explicitly add an app to a page. Not sure if you've tried it or not but navigate to:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID
&display=popup&next=YOUR_PAGE_TAB_URL
Replacing YOUR_APP_ID with your app id and YOUR_PAGE_TAB_URL with the url you set for you page tab.

How to take a screenshot of a website

I am building a web browser for iPhone in Xcode and the "home page" of my app is a speed dial page which provide 6 slots for users to add their favorite website. Each slot will then display a screenshot of the website. So what I want to do here is to grab the screenshot from the link input by users, for example, "http://www.google.com". Is it possible to do this with cocoa touch?
In case anyone want to have a similar function like this, I did find a way to do it but not sure whether it's the best way of doing it. Or maybe now there are libraries or plugins out there that provide this function already.
My solution
After users have entered a website url, you need to create a temporary UIWebView and load the url (do not make it visible to the users). After the UIWebView finished loading, you make the UIWebView visible and then take a screenshot, after that, make the UIWebView invisible again immediately (or simply destroy it). In this case, you will get the screenshot of that website and users won't notice what just happened.

MVC Facebook application - dual template

Maybe this is a stupid question and I did not understand exactly how Facebook applications work but here it goes
I want to implement a small e-shop as a Facebook application and for the products to have like button. The application will be instaled on a business page.
The problem is that the link for the like post on the wall will be to the actual eshop not to the facebook application on the business page.(or is it possible to make it to the application (eg. when you click the browser goes to the business page, selects the eshop tab, opens the product)?)
So actually I need to make a eshop site with 2 templates one for outside view and one for IFrame facebook view.
Is it possible to detect (from code-behind not in javascript) If the request is from the iframe or directly from outside?
Or the solution is more simple.. create a small version of the shop for browsing products only to be viewed in facebook and a full shop for outside view and the only relation between them is that when you click the like post from the first one you go to the second one?
I think I have found a solution...
I have created 2 domains that point to the eshop
shop.domainname & facebook.shop.domainname.
And in code behind I can check the Request.Url.Host if it starts with facebook.
For the facebook app the canvas url will be with facebook.shop.domainname and the links from the like button will be for the shop.domainname.
In this way I should be able to use 2 templates for the site and detect witch one I shoul use....

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