background preloader

Tutorial: How to Create a Facebook iFrame Page Tab Application

Tutorial: How to Create a Facebook iFrame Page Tab Application
IMPORTANT: Facebook announced that as of February 1, 2012 they are removing App Profile Pages, and the new way is pretty great. Read our article on the App Profile Pages being removed. Updated Tutorial: Fall 2011 Facebook has been very busy updating how things are done, and one of the changes is how you create an iFrame application tab. Although the concept is pretty much the same, the interface for creating a Facebook iFrame tab app has changed. This tutorial updates a tutorial we did on this subject earlier this year. What is an iFrame application? An iFrame application you allows you to embed an external Web page in your custom Facebook Page tab. Because this iframed page isn’t hosted on Facebook, it can use standard HTML, CSS, and JavaScript like any other Web page does. The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page. Setting up your server Your HTML file

It’s Time to Transition your Facebook Tabs from Static FBML to iFrames TabPress: Free iFrame Page Tab App for Facebook Fan Pages Sure – it was actually very easy. I just built a 520 pixel theme. Well, actually, a 500 pixel theme Nothing fancy – in fact I used Artisteer to build the theme. Then, using the wonderful instructions on this blog ( I created the iframe application. To get rid of the scrollbars, I used these instructions ( Added in some customization to the theme files (i.e, to show only the one “post” on the main page – the “text coupon” – which I built using the contact form 7 plugin) and shaved the width down on the google map iframe tags to fit. I actually did all the theme work 6 months ago, and had it up and running via the “old” way, but had to re-do everything once FB made changes to how iframes would be rendered if not hosted on a site with SSL (i.e., blank page). Installing it as sub-directory seems to work though.

Design and Code an Integrated Facebook App: HTML + CSS Welcome back! In this part of the tutorial we're going to be coding our design into HTML and illustrating some of Facebook's CSS style properties that will give it that native feel. So stick with me, make yourself a cup of tea and happy coding! Introduction Welcome to part 2 of our design and code a native Facebook app. What We'll be Creating In this part of the tutorial we're going to be coding that design into HTML and illustrating some of Facebook's CSS style properties that will give it that native feel. Step 1: Failing to Prepare is Preparing to Fail It's always a good idea to begin with a bit of forward planning. Sometimes I also like to print out my wireframe and mark the dimensions on them with a pen. Step 2: App Structure The way I have my folder structured is as follows (and this is pretty much my standard way of setting things up for every project). cssjsimagesindex.html Step 3: HTML Markup Setting Up our Includes Setting Up Our Page Step 4: Main Content Step 5: Individual Blog Posts

Design and Code an Integrated Facebook App: Theory During this series I'll be looking behind the UI of Facebook and, in the process, showing you how to create your own integrated Facebook blog app through an RSS feed. Love it or hate it Facebook has become an integral part of people's lives. For many it's a tool that allows us to catch up with old friends, share photos or plan our nights out with our mates. However, behind the social interaction lies a complex structure of careful UI planning that has been tweaked and re-tweaked. In the early days of Facebook I was never a fan of its "boring look and feel" and always felt that it had potential for so much more in terms of design. Introduction In this series of tutorials, I'm going to evaluate the UI of Facebook through a series of case study, research, implementation and analysis, so you understand how some of its design principles can help you in creating a native look and feel Facebook app. A Brief History on the UI Design of Facebook The Benefits of Designing Native Familiarity Security

Aggiungere “Mi piace” (Like button) di Facebook sul proprio sito Like Button: Facebook cambia le regole! Ormai quasi un anno fa, dibattevamo sul fatto se fosse meglio il Like Button o lo Share Button. In seguito è stata implementata la funzionalità di poter aggiungere un commento direttamente dal pulsante Mi piace e condividere la pagina in bacheca. Era ormai evidente che il pulsante Condividi fosse pronto per andare in pensione. Oggi ne abbiamo avuto la conferma. Stamattina stavo guardando la mia Home di Facebook e mi sono accorto di un piccolo ma essenziale cambiamento. Invece di mostrare la solita notifica di una riga, era comparso un vero e proprio post con tanto di immagine e testo di anteprima, come se avessi condiviso il link o aggiunto un commento! Una novità di tutto rispetto, visto che prima compariva l’anteprima in Home solamente quando due o più amici mostravano apprezzamento per una pagina web! Per questo motivo, diventa sempre più importante che i siti web ottimizzino le proprie pagine per lo Sharing ed il Liking su Facebook. Staremo a vedere.

How to Make a Custom Facebook Page with an Iframe Application: Updated Instructions Posted on 6 September, 2011 By Kim Woodbridge Last Winter I wrote a popular article on creating a custom Facebook page tab with iframes. Since Facebook seems to enjoy changing the interface and settings as soon as we get accustomed to them, they have slightly changed the page for creating a new Facebook application and there are some different fields to fill out. Here I will provide updated instructions. Updated Instructions Make a html, php or other type of web page and upload it to your web server. In the Basic Info section fill out the field called App Namespace. photo credit: gregcutler Keep Reading: Did you enjoy this article? Trackbacks/Pingbacks

Top 10 Facebook Apps for Building Custom Pages & Tabs | Social Media Examiner - (Navigazione anonima) Are you looking for an easy way to create attractive pages on Facebook? Are you wondering how businesses are creating Welcome tabs? In this article I’ll reveal a number of applications that make it very easy to add functionality to your Facebook page. Custom Tabs: What You Need to Know You may have seen some Welcome pages on Facebook that encourage new visitors to Like the page. You may even be given an incentive such as a free report or, in Tim Ferriss’ case, a free chapter of his book. Tim Ferriss gives away a free chapter of his book to those who become fans. A brand may also be using a Facebook custom tab in many different ways, as Social Media Examiner covered in the post 8 Powerful Ways to Use Facebook Landing Tabs. But how do you create these custom tabs? First, what are iFrames? iFrames are very powerful because anything you can create on a website, you can bring into your Facebook page, providing a unique and rich experience for your community. How to Use iFrames Top 10 iFrame Apps

How to Build the Perfect Facebook Fan Page, 2011 Edition This article is updated! Please refer to the latest How to Build the Perfect Facebook Fan Page article here..This is a guest post by Tim Ware, owner of HyperArts. You can follow Tim on Twitter or on Facebook. With Facebook’s recent changes to the layout of fan pages (aka business pages, aka brand pages), has come the opportunity for those with creativity to design a much more compelling and fully branded page. Much More Screen Real Estate! In the old Page layout there was really only the Profile Picture and custom tabs where design could be applied. The new layout, rolled out to all Pages on March 10, 2011, gives over a full two-thirds of Page real estate to the Page owner: The Perfect Fan Page Leverages ALL the Available Opportunities In this article, I will briefly discuss each of the Page areas, as labeled above, where I think Page owners should focus their attention, with an eye to an integrated look and feel, clean and uncluttered. The Page areas are: The Profile Picture Examples: Abstract:

Related: