[x] Skrýt reklamu

Ahoj, vypadá to, že používáte AdBlock... :-)

Usilovně jsme pracovali na zakomponování reklamy, aby nebyla pro čtenáře rušivá. Příjmy z reklam tento web živí, bez nich bychom jej nemohli provozovat. Budeme moc rádi, když to s námi zkusíte a přidáte si nás do výjimek. Děkujeme!

MENU

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. 

Written by:

Published on: 4.3.2012

Filled Under: Hlavní strana, návody, sociální sítě

  • hot water heater problems

    I for all time emailed this weblog post page to all my contacts, since if
    like to read it afterward my contacts will too.

    • I didn’t know where to find this info then kboaom it was here.

  • adfly bot

    I was very happy to uncover this site. I need to to thank you for your time for this fantastic read!
    ! I definitely loved every little bit of it and i also have you book-marked to see new things in your web site.

  • PavelD

    Dobrý článek :)

  • Betty

    A magazine theme would make ur blog look nicer :)

    • Petr Vocelka

      Hello, please, can you more specify what do you mean „magazine theme“? I think this looks like magazine theme enought :). If you can show me some example, i’ll be glad. :)

      • I was rellay confused, and this answered all my questions.

    • These topics are so cnofsuing but this helped me get the job done.

  • ZeteRarkzerge

    Great goods from you, man. I’ve understand your stuff previous to and you’re just extremely magnificent. I actually like what you’ve acquired here, really like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I can not wait to read much more from you. This is really a tremendous site.

  • Asythissilk

    You could certainly see your expertise in the paintings you write. The arena hopes for even more passionate writers like you who aren’t afraid to mention how they believe. All the time go after your heart.

  • Michal

    Super článek, je tam jeden překlep v tom html kódu:
    – středník vyměnit za uvozovky, ať je spávně nastaveno kódování ;-)

    • Petr Vocelka

      Jo… vidíš ;) díky za postřeh ;)

  • Dobrý den, díky za názorný popis! Funguje to i pro Timeline?
    Web nám spravuje webmaster, mám tedy „index.html“ poslat jemu? To je trochu nepraktické, když bude jakákoliv změna, musím posílat znovu celý soubor… nebo si na stránky dát SSL…
    Pěkný den!

    • Petr Vocelka

      Dobrý den,

      ideálně mu pošlete nástin toho co požadujete a k tomu přiložte odkaz na tento článek Od Října je povinností mít SSL certifikát pro provozování Facebook aplikace / záložky. On už určitě bude vědět, jestli Váš hosting certifikát podporuje, nebo jak se to celé má. Jeho cena je přibližně 550,- /rok.

      Samozřejmě tento návod funguje i pro Timeline (přesvědčit se můžete např. zde: https://www.facebook.com/spsbruntal
      – Jedná se o položky: Rozvrh, Suplování, Info a Foto. (Moje práce))
      Jen se od dob starého designu změnila šířka. Takže ten kód co je zde uveden funguje, ale jsou tam nějaké změny…

      Co se týče správy obsahu, i ten se dá samozřejmě editovat. Jen to chce místo pouhého index.html na tom místě rozjet nějaký redakční systém a odkazy pak směřovat na něj… To je složitější, ale určitě by si s tím měl vědět rady.

      S pozdravem,
      Petr Vocelka

      • Dobrý den,
        díky za odpověď. Redakční systém máme, částečně mohu obsah webu editovat i já, ale zdrojáky má webmaster.
        Chtěla jsem se podívat na rozvrhy a suplování, ale na záložce vidím jen prázdnou stránku…
        Lenka K.

        • Petr Vocelka

          Zdravím,
          rozvrhy a suplování tam jsou bohužel pouze jako rám, který zobrazuje obsah ze stránek školy, které ovšem nemají certifikát, takže funkčnost nemusí být 100%. Zbylé 2 by měly být bez problémů.
          S tím RS to už záleží na jednotlivém řešení. Každý má jiné možnosti atd. :-)

          Petr V.

      • Dobrý den,
        ještě k SSL: na http://www.vizus.cz/ssl-certifikaty.html jsou i certifikáty zdarma… takový by stačil?
        Lenka K.

        • Petr Vocelka

          Dobrý den,
          no on vám ten certifikát zdarma fungovat bude, můžete si jej dokonce vytvořit i sama, ale pak když člověk vejde na stránku s tímto certifikátem, tak se většinou zhrozí a odejde.

          http://imageshack.us/photo/my-images/39/chybasslgooglechrome201.png/

          S pozdravem,
          Petr Vocelka

          • Děkuji za objasnění, tohle na webu opravdu zobrazované mít nechci…
            Lenka K.

  • Henry

    Zdravím, jak to udělat aby než někdo může otevřít aplikaci musel dát na stránce, kde aplikace je , To se mi líbí? Díky

  • Dobrý den, tak jsem se propracovala něco blíž k aplikaci – ve Facebook Developers jsem si udělala aplikaci a dělám FB stránku aplikace. Tady jsem se zasekla, protože v App Info je vedle hlavního jazyka (češtiny) klik na „Translate your app for additional languages“. Kliknu tedy, nabízí se „English (UK), ale text se nepřeloží, jen se ta pole popisu znepřístupní a zůstanou v čestině. A když dám uložit, ukáže se červený rámeček s hláškou, že chybí popis v angličtině atd. Jak z toho ven?
    Lenka

    • Petr Vocelka

      Ne, ne…. žádnou stránku aplikace prosím nevytvářejte! A už vůbec nepřekládejte. Držte se manuálu co je tady, tam je vše popsané. Ta samotná záložka (její vzhled a obsah) se pak vytváří úplně odděleně od celého Facebooku. Napíše se v kódu a nahraje na hosting, do složky, na kterou odkazují ty odkazy které tam zadáváte.
      (http://www.pcdays.cz/wp-content/uploads/2012/03/4_1_stitch.jpg)

      Facebook stránku si můžete vytvořit zde: https://www.facebook.com/pages/create.php
      Na tu se pak záložka „připne“.

      Petr

      • Milan

        Zdravim,

        stále se mi nedari spustit tuto aplikaci…vse jsem udelal podle vaseho postupu…ale zrejme bojuji s SSL certifikatem, ktery jsem si nechal zridit na hostingu, po konzultaci s Forpsi mi bylo sdeleno ze mi pro tuto aplikaci staci ssl na nestandardním portu…

        muzu vas poprosit o pomoc ?

        Díky Milan

        • Petr Vocelka

          Dobrý den,
          přiznám se, že takto jsem to ještě nedělal, ale zkusíme to spolu nějak vyřešit.

          Sice nechápu přístup Forpsi, certifikát se dá sehnat už za cenu kolem 500 za rok a je to na celou doménu, ale dobře…

          Nestandardní port znamená, že adresa bude mít předpokládám nějaký takovýto tvar: https://nazev-domeny.cz:port

          Port vám tedy (asi nejspíš) sami přidělili na Forpsi, zkusíme tedy, jestli se přes něj na web dostanete. Takže zadejte: https://nazev-domeny.cz:port a uvidíme, co se stane.

          Když tak mě kontaktujte s výsledkem na emailu: Vocelka.P(zavináč)gmail.com
          Nebo zašlete zprávu na Facebookovou stránku: https://www.facebook.com/pcdays

          Ať to nemusíme řešit tady přes komentáře :-)

          S pozdravem,
          Petr Vocelka

          • Milan

            Email zaslán