Jak na iFrame záložku na Facebook stránce
Možná jste už někdy viděli takovou záložku na Facebook stránce, na kterou když jste klikli, ukázala se vám normální HTML/CSS/JS… internetová stránka. Kdysi to bylo řešeno pomocí Facebook aplikace FBML, mohli jste tam sice použít pouze HTML a CSS, ale zas to bylo velmi jednoduché. (na obrázku je pomocí FBML řešena záložka zápisky) Od 1.1.2012 ale pomocí FBML už záložku nevytvoříte. Nová cesta k záložce u Facebook stránky je prostě jiná, je trochu složitější, nabízí více možností (PHP, databáze,…), ale také spousty nepříjemností. (na obrázku představuje záložka – Moje aplikace).
Tento tutoriál je určen především pokročilejším uživatelům počítače a internetu, i když by jej zvládl i úplný laik.
Základní charakteristiky:
- stránka se na Facebook vkládá pomocí rámce iFrame
- možnost využít prakticky všech programovacích jazyků pro web
- musíte mít vlastní, někde hostovanou, doménu
- k plné funkčnosti všem uživatelům nutno používat na serveru/doméně zabezpečené https spojení (dosáhnete SSL certifikátem), pokud jej nemáte, lidé, kteří navštíví vaši stránku a budou spojení https neuvidí obsah obsah záložky, protože stránka není ověřená.
1. Vytvořte si na počítači složku „facebook“ a v ní složku „moje_aplikace“
2. Vytvořte si soubor „index.html„, můžete k tomu použít PSPad, ale postačí i obyčejný poznámkový blok. Vložte do něj kód uvedený níže a uložte do vámi vytvořené složky v předchozím bodě „moje_aplikace“.
<!DOCTYPE HTML>
<html style="overflow: hidden">
<!-- Hlavička -->
<head>
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta charset="UTF-8">
</head>
<!-- tělo stránky -->
<body style="overflow: hidden">
<div id="container">
<p>Nějaký text ve vaší aplikaci</p>
</div>
<!-- stránka na fb se zobrazí bez posuvníků i když bude delší než 800px -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>FB.Canvas.setAutoResize();</script>
</body>
</html>
3. Složku „facebook“ a samozřejmě i se soubory v ní, nahrajte pomocí FTP do kořenové složky vaší webové stránky.
A teď, jak vytvořit aplikaci, kterou následně umístíte na Facebook stránku
1. Přejděte na stránku: https://developers.facebook.com/apps
2. Klikněte na tlačítko 
3. Doplňte 1) App name = zobrazovaný název aplikace, 2) Název aplikace = nějak si pojmenujte aplikaci
4. Opište CAPTCHA a stiskněte další
5. Všude nahraďte „VaseDomena“ za adresu vaší domény. Příklad domény: „pcdays.cz“, „facebook.com“, „seznam.cz“
– U nás by v takovém případě zněla většina adres: http://www.pcdays.cz/facebook/moje_aplikace/
6. Jakmile budete mít uložené změny, vyberte v menu nalevo možnost „Rozšířené“
7. Popojeďte na stránce níže, a zkontrolujte si, jestli máte u těchto položek nastaveny parametry stejně, jako tady na obrázku.
Spojení aplikace se stránkou
Předpokládám, že asi máte nějakou Facebook stránku, když chcete vytvořit záložku. Pokud nemáte, vytvořte si ji.
TATO ČÁST POUZE VYPADÁ SLOŽITĚ, VE SKUTEČNOSTI JE VELMI JEDNODUCHÁ
1. Upravíme si odkaz uvedený níže => místo červeně vyznačeného MOJE_APP_ID vložte vaše ID aplikace a místo CANVAS_ADRESA zase vložíte adresu pro canvas. Obě tyto informace získáte zde po kliknutí na název vaší aplikace v menu.
Následně najdete na stránce tyto informace:
ID aplikace / API klíč – vypadá nějak takto: 247732238315273 – toto číslodosadíme do odkazu namísto: MOJE_APP_ID
Canvas URL – vypadá nějak takto: http://www.VaseDomena.cz/facebook/moje_aplikace/ – dosadíme ji do odkazu namísto červeného nápisu: CANVAS_ADRESA
https://www.facebook.com/dialog/pagetab?app_id=MOJE_APP_ID&next=CANVAS_ADRESA
Po úpravě by to mohlo vypadat nějak takto:
https://www.facebook.com/dialog/pagetab?app_id=247732238315273&next=http://www.VaseDomena.cz/facebook/moje_aplikace/
A přejděte na vámi vytvořenou adresu
2. Vyberte, na jakou stránku se má vaše aplikace přidat
3. Hotovo! Navštivte Vaši Facebook stránku a Vámi vytvořená aplikace by tam už měla být.
