Tvorba záložky na Facebook stránce

Stejně jako máme na naší Facebook stránce záložky Tímeline, Informace a Fotky, můžeme si vytvořit svojí vlastní záložku s unikátním obsahem, kde můžeme propagovat produkty, služby, nebo vytvořit nějakou interaktivní soutěž. Pojďme se podívat, jak na to.

Postup funguje pouze na Facebook Pages (Facebook stránky), ne pro profilové stránky. Návod je aktuální k datumu srpen 2014.

  1. Přihlašete se jako Facebook vývojáři https://developers.facebook.com/apps. Postačí verifikace pomocí klasického Facebook účtu.
     
  2. Vytvořte novou aplikaci pomocí zeleného tlačítka vpravo nahoře s popiskem Create New App, nebo v hlavním menu Apps -> Create a New App.


     
  3. Zde vyplníme název aplikace a dále interní název aplikace (vhodné je použít nějaký jednotný prefix, který identifikuje název stránky pro kterou záložku vytváříme).


     
  4. Nyní si musíme připravit webovou stránku, kterou chceme v záložce zobrazit. Facebook pak tuto stránku vloží do záložky jako iframe. Stránku připravujeme buď na šířku 820px, nebo 520px. Je vhodné nastavit pro stránku nulové okraje a odsazení a pevnou šířku na 820px (resp. 520px). Stránka musí být přístupná pod HTTPS na serveru se SSL cerfifikátem. Takto připravenou stránku můžeme vidět například na adrese https://ria-tabs.fbssl.cz/cz.html. V adresním řádku je viditelný aktivní SSL certifikát.
     
  5. V detailu Facebook aplikace v záložce Settings klikneme na Add platform. Vybereme Page Tab. Vyplníme název záložky (Page Tab Name) který bude zobrazen na liště v rámci Facebook stránky a dále URL na naší webovou stránku, kterou chceme zobrazit v rámci záložky. Stejnou URL pak musíme vyplnit do políčka App Domains. Nakonec vyplníme kontaktní e-mail.


     
  6. V menu App Details si nahrajeme obrázky a loga.
     
  7. Spustíme aplikaci přes levé menu Status kliknutím nahoře na posuvník.


     
  8. Nyní musíme spárovat vytvořenou aplikaci s naší Facebook stránkou. Přejdeme na odkaz:

    https://www.facebook.com/dialog/pagetab?app_id=<APP_ID>&next=<APP_DOMAIN> 

    kde <APP_ID> nahradíme ID naší aplikace (zjistíme v menu Settings) a <APP_DOMAIN> nahradíme doménou z políčka App domains (opět v menu Settings). Pozor, APP_DOMAIN je včetně https://. Vybereme stránku, kterou máme ve správě a chceme tam záložku zobrazit. Výsledek může vypadat například takto:
     


    Dostupné na https://www.facebook.com/periodanenitabu/app_1446790368919344

Nastavení automatické výšky iframe

Pokud je náš obsah delší, Facebook automaticky zobrazuje horizontální i vertikální posuvníky. Pokud chceme automaticky natahovat obsah bez zobrazení vertikálního posuvníku, umístíme do zdrojového kódu tento skript:

<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    window.fbAsyncInit = function () {
        FB.init();
        FB.Canvas.setAutoGrow();
    }
</script>

A do obsahu stránek, někde za <body> vložíme:

<div id="fb-root"></div>

Takto se bude stránka natahovat automaticky dle obsahu.

Externí odkazy

Pro správnou funkci externích odkazů musíme nastavit pro odkaz target="_blank", protože Facebook nedovolí zobrazení nové stránky v rámci aktuálního iframe.