A Hyperarts.com készített egy leírást a Facebook Fan oldalakba építehető iFrame alkalmazások készítéséről. (Google fordítóval készült, de ettől még úgy vélem érthető)Frissítve bemutató: Fall 2011
Facebook már nagyon elfoglalt frissítése milyen dolgok, és az egyik változás az, hogy hogyan hoz létre egy iFrame alkalmazás fülre.
Bár a koncepció nagyjából ugyanaz, a felület kialakítása Facebook iFrame fül app megváltozott. Ez a leírás frissítés egy tutorial tettük ebben a témában idén.
Mi az iFrame alkalmazás?
Az iFrame alkalmazást lehetővé teszi, hogy beágyazni a külső weboldal a saját Facebook oldal fülre. Az “index” vagy a “vászon” oldal valójában házigazdája egy nem-szerver és a Facebook körül Facebook “chrome” (a Facebook elemek az oldalon).
Mivel ez a iframed oldal nem tárolt a Facebookon, akkor a szabványos HTML, CSS és JavaScript mint bármely más internetes oldal nem. Kölcsönhatások Facebook tartalommal elkészült használja a Facebook Software Development Kit (SDK) és XFBML címkék . (Erre a bemutató, a Facebook SDK nem szükséges.)
A hátránya ennek a megközelítésnek az, hogy tisztában kell lennie azokkal a technológiákkal, és szükség lesz egy web-szerver elérhető, ahol feltöltheti a fájlokat az alkalmazás oldalán. Vagy adhat iFrame-teremtés alkalmazás az oldal, mint például a TabPress , megkímélve a felhasználót attól, hogy hozzon létre egy Facebook alkalmazás, de szigorúbb az, hogy nem tudja ellenőrizni a ikon jelenik meg a lap nevét a bal oldali navigációs.
Beállítása a szerveren
Facebook HTTPS / Secure Hosting követelmény
Az első dolog, amit tudok, hogy bárhol otthont index oldalán a Facebook iFrame alkalmazás, a kiszolgáló kell biztosítani, azaz van egy SSL biztonsági tanúsítvány a domain amely szerint ez adott otthont.
Az első dolog, amit tudok, hogy bárhol otthont index oldalán a Facebook iFrame alkalmazás, a kiszolgáló kell biztosítani, azaz van egy SSL biztonsági tanúsítvány a domain amely szerint ez adott otthont.
Az egyéb eszközök vonják az oldal (képek, JavaScript, CSS, video, stb) is meg kell otthont alatt HTTPS. Javasoljuk, Amazon S3 hosting erre, és ez is foglalkoznak a HTTPS cikket .
Készítse el iFrame alkalmazás
A biztonságos webkiszolgáló, hozzon létre egy könyvtárat a iFrame alkalmazást.Ebben a példában fogunk létrehozni egy új könyvtárat a szerveren a “facebook”, majd egy alkönyvtár neve “mytestapp”. A fájl elérési útját fogja kinézni az FTP program:
Lesz akar tenni az összes fájlt (HTML, CSS, JavaScript, PHP, stb) ebben a mappában vagy alkönyvtárak. Ha nem tudod, hogyan kell ezt csinálni, olvassa el ezt FTP bemutató .)
A HTML fájl
Ne feledje, a HTML fájlban tudja használni CSS – és inlining stílusok a
tagek jól működik iFramed HTML fájlokat – és a JavaScript (Ne használjon FBML vagy FBJS!) .
Majd szeretné állítani a fő konténer DIV a tartalom 520 pixel széles. Itt van egy nagyon lecsupaszított például a HTML fájlban:
< ! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body {
width: 520px;
margin: 0; padding: 0; border: 0;
}
charset = iso-8859-1 "/>
Ez valami HTML tartalom
A fenti példában azt is mind a kódot egy külső stíluslap neve a tag, valamint inlined stílusokat nevezik a
tag-ek, ha szeretné csinálni így. Vagy jól kell működnie.
Telepítése Facebook fejlesztői alkalmazás
Az első lépés a létrehozása alkalmazás Facebok, hogy telepítse a Facebook fejlesztői alkalmazás.
Ha ez az első alkalom, hogy telepítette a fejlesztői alkalmazás, látni fogja a kérelem Engedély párbeszédpanelen mutatja az alábbi:
Kattintson a engedélyezése gombra a folytatáshoz.
Létrehozása az iFrame alkalmazás
Most, hogy a Developer App telepítve, kattintson a Create New App gombra.
Önnek kérelemben “App Display Name” (a név jelenik meg a felhasználók), valamint a “Namepace” (használható nyílt Graph – 8 karakteres minimális, alfa, szaggatott és az aláhúzás csak – próbálkozom, amíg nem kap egy névtér, hogy hasn ” t használt).Akkor jelölje be a “Egyetértek a Facebook politika” mezőben, majd kattintson aTovább gombra.
A következő képernyőn adja meg a biztonsági kifejezést, majd kattintson Submit .
Van egy csomó lehetőséget, akkor csípés kapcsolatban az alkalmazás. Az ezen a poszton, fogunk összpontosítani az alapokat szükséges, hogy az iFrame fülre alkalmazás működik.
A Beállítások fül
Itt nem az alapvető felállított app.
Először is, a felső, látni fogja az App ID és App Secret értékeket. Leggyakrabban akkor használja a App ID integrálni a Facebook.
Másodszor észre a “szerkesztés ikon” alatt az App Secret. Ez az ikon jelenik meg a bal oldalon a lap nevét az oldal navigációs, úgyhogy legyen szemet gyönyörködtető, és a méretei 16 x 16 pixel. Ha nem hoz létre saját ikonját, a fül lesz egy általános Facebook-fül ikon:
Basic info :
- App Display Name: Legyen ez ugyanaz, mint az eredeti értéket biztosított;
- App Névtér: Legyen ez ugyanaz, mint az eredeti értéket biztosított;
- Kapcsolat e-mail: Hol szeretne Facebook küldjön e-mailt az Ön által app;
- App Domain: az imént “mydomain.com”, ahol “mydomain.com” az Ön biztonságos szerver hosting;
- Kategória: Válasszon egy kategóriát a legördülő listából.
Cloud Services
Mivel Facebook indított a HTTPS követelmény, hogy minden alkalmazás kezdték kínál felhő hosting megoldást azok számára, akik megtalálják létrehozásáról hosting számlát és biztonságos szerveren túl sok zavarta, kiadás vagy mindkettő. De kattintson a További ha érdekel.
Mivel Facebook indított a HTTPS követelmény, hogy minden alkalmazás kezdték kínál felhő hosting megoldást azok számára, akik megtalálják létrehozásáról hosting számlát és biztonságos szerveren túl sok zavarta, kiadás vagy mindkettő. De kattintson a További ha érdekel.
Válassza ki, hogyan app integrálható Facebook
Itt válassza ki a kérelem típusát te létre, és hogyan integrálja a Facebook.
A explaination a Facebook-integráció értékei
Az E bemutató, akkor válassza ki az “Oldal Tab” a különböző integrációs lehetőségek.Ez az utolsó a listán, de ha egyszer mentette a változtatásokat fog szerepelni az első (mint a fenti példa).
- Az oldal Tab Név: A megjelenített nevét a lap a navigációs oldal;
- Az oldal Tab URL: A nem biztonságos URL (HTTP) az Ön index oldalra;
- Biztonságos oldal Tab URL: Ugyanaz, mint a “Page Tab URL” de HTTPS helyett HTTP;
- Az oldal szerkesztése Tab URL: Hozhat létre olyan URL-t a domain itt majd létre, hogy URL-t átirányít az Oldal szerkesztése a Facebook lapot. Ez általában történik egy 301 vagy 302-es átirányítást. Nem vagyok kiterjedő 301/302 átirányítások a bemutató;
Ha a használni kívánt hívások A Facebook JavaScript SDK a lap – Add “App Facebook” értékek
Ha szeretné használni a Facebook JavaScript SDK a lap Tab – például a Share gomb Page Tabs – akkor is ki kell választania a “App Facebook” az integráció, és adjunk hozzá azonos URL értékek, mint a “Page Tab” :
A “Canvas oldal” érték autofilled a Facebook, az Ön Névtér értéket.
Kattintson a “Változtatások mentése”, és kész!
Telepítése az iFrame alkalmazás a Fan oldal
Miután a Facebook alkalmazás jött létre, akkor hozzá kell adnia azt a Fan oldal.Ehhez kattintsunk a Nézet App adatlapja linket a bal oldali oszlopban az alkalmazás oldalon:
Most kattintsunk a Hozzáadás a My oldal linket a bal oldalon.
A felugró ablakban megtalálja az oldalt, amelyhez hozzá kívánja adni a lapot, majd kattintson az “Add to Page” gombra. A gomb ekkor módosul, hogy “Hozzáadva a lap.”
Az új iFrame app most jelenik meg a Fan oldal. Ha nem látod ott azonnal, lehet, hogy módosítani kell az oldal beállításait. A saját rajongói oldal, kattintson a “Oldal szerkesztése” gombra a jobb felső sarokban az oldal. Ezután kattintson a “Alkalmazások”, és megtalálja az alkalmazáshoz, csak hozzá. Kattintson a “Beállítások szerkesztése”, és akkor kap ez felugró ablak:
- Tab: Ha azt mondja: “A rendelkezésre álló (add)”, kattintson az “add”, hogy adja hozzá a navigációs, ha azt mondja: “Added (remove)”, te meg;
- Egyéni Tab neve : Ön felülbírálhatja az alapértelmezett fület nevét beírja az új nevet ezen a területen, legfeljebb 32 karakter, majd kattintson a “Save”.
Kattintson a “Rendben” gombra a módosítások mentéséhez.
Hibaelhárítás
Visszajelzések alapján az ezen a poszton, kezdjük összeállítani néhány iFrame App Hibaelhárítás. Frissíteni fogjuk ebben a fejezetben az új kérdéseket néhány fel.
Ellenőrizze az URL-ek!
Győződjön meg arról, hogy az URL beállított iFrame helyes. Próbálja meg elérni, hogy közvetlenül keresztül a böngésző helyett keresztül a lap fülre. Rossz URL-címeket a leggyakoribb probléma. Ha az URL a weblap vagy kép kívánt a iFrame Oldal fülre hibás, nyilván a lap nem fog működni.
Azt is teszt érvényességét URL kattintson jobb gombbal a területre, ahol a iFramed tartalmat kell majd válassza a “A Keret: Keret megnyitása új ablakban”, vagy valami hasonló (mindegyik böngésző mutatja be ezt az opciót, egy kicsit másképp).
Győződjön meg róla, hogy megadott egy HTTPS / Biztonságos URL-címét oldal Tab alkalmazását. Ha nem, akkor a lap nem töltődik be az emberek a Facebook Secure Browsing aktív.
Ha nem tudja felvenni a Facebook oldal Tab alkalmazást oldal
Az emberek gyakran jelentse ezt a problémát, és az ok valószínűleg a következő:
- Már hozzá az App a oldal: Kattints az “Edit page” gombra jobb felső sarkában a lap, majd kattintson a “Apps” a bal oldali oszlopban az admin területen keresse meg az oldalt Tab app, kattintson ” Beállítások szerkesztése “és győződjön meg arról, hogy a felugró ablak azt mondja:” Added (távolítsa el “és nem” elérhető (add) “;
- Te nem egy admin az oldal , amelyhez hozzá kívánja adni az App;
- Az App a “Settings> Advanced” területen, be van állítva “Authentication> Sandbox Mode”, hogy “engedélyezett” , ez korlátozza a képes felvenni az App egy oldal, hogy csak az App fejlesztői;
- Ez egy Facebook bug / glitch: Igen, ez lehet az oka.
Hibaüzenetek a szerver (error 405 – HTTP ige vagy hasonló)
Ha a szerver hibával tér vissza, amikor Facebook megpróbálja betölteni a HTML oldalt az iFrame, szükség lehet változtatni a fájl kiterjesztését. Html. Php vagy. Aspx (attól függően, hogy a szerver platform használata). Amikor betölti a Facebook iFrame, hogy csinál egy POST az index oldalra annak érdekében, hogy át néhány adatot, hogy az alkalmazás és úgy néz ki, mint egy szerver beállítva, hogy nem teszi lehetővé a POST egy fájl. Html kiterjesztés. Mi lesz egy pillantást vetni, hogy az adatok elérésére, hogy a Facebook átmegy a következő bemutató, de szerettem volna megemlíteni, ezt most, mert okozott problémákat, néhány ember.
API Hibakód: 191 Popup Dialog
Ha megkapja az “API Error Code: 191” felugró ablak hiba:
használata esetén egy beágyazott Megosztás gomb vagy más funkció, amely előírja, hogy a Facebook JavaScript SDK , ez lehet az oka, még nem határozta meg a “App Facebook” URL-eket. Lásd fent a részletekért.
Scroll Bars – Megszabadulni őket!
Ha iFrame tartalma okoz egy vízszintes görgetősáv jelenik meg, valami ami a szélessége meghaladja a 520 pixel, ami a maximum, ami lehetővé teszi a Facebook.Olvassa el tutorial hibaelhárítási és megszünteti az iFrame görgetősávok .
Javasoljuk hozzá némi CSS (akár inline alábbiak szerint, vagy a külön CSS fájlban), hogy távolítsa el margin, padding, és a határ elemek alapértelmezés szerint. Sok böngészők hozzá távolság kb bizonyos elemei alapból, amely miatt a görgetősávok jelenik meg váratlanul.
body {
width: 520px;
margin: 0; padding: 0; border: 0;
}
Következő lépések
Szeretnénk hallani, hogy mit szeretne látni ebben a sorozatban – Ha szeretné tudni, hogyan kell csinálni valamit, adott a iFrame alkalmazásokat, csak vegye figyelembe azt a megjegyzést, és majd meglátjuk, mit tehetünk.
