Ha valaki végigolvasta, esetleg meg is csinálta az előző bejegyzésben található lépéseket, már tudja, hogy kell azonosítani a rajongóit egy iframe tab alkalmazásban. Mi lenne, ha azoknak a látogatóknak, akik még nem kedvelik az oldalunkat, megjelenítenénk egy like gombot a tartalomban, amivel egyből rajongóvá válhatnak? Nos, ennek semmi akadálya! Nézzük meg, hogyan kell.
A tegnapi bejegyzésben használt fileokkal fogunk dolgozni (akinek nincs meg, innen letöltheti: http://be-soc.com/test/besocial/fangate/fangate.zip ), kicsit kiegészítjük az index.php tartalmát.
Első lépésben cseréljük le a 8. sorban található
kódot a következőre:
kódot a következőre:
Erre azért van szükség, hogy az fbml kóddal beillesztett elemek, Internet Explorer böngésző alatt is rendesen megjelenjenek.
Második lépésként a 17. és 18. sorban található és elemek közé illesszük be az alábbi kódsort:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
FB.Canvas.setSize();
}
Bár jelenleg csak az első sorra van szükségünk, a többit se hagyjuk ki, mert ezek teszik lehetővé, hogy ha az iframe tabunkban található tartalmak mérete magasabb 680px-nél, a facebook automatikusan átméretezze az ablakot.
(megj.: ha magyar nyelven szeretnék megjeleníteni a like gombon a feliratot, az ennek megfelelő scriptet illesszük a forrásunkba:
)
Azt a részt, ahol a nem rajongó látogatóknak megjelenő tartalmat helyeztük el, egészítsük ki a like gombunk kódjával:
Természetesen a href attribútumban szereplő értéket mindenki írja át a megfelelő rajongói oldal elérésére!
A tag elé illesszük be a következő kódsort:
FB.init({
appId : ’12345678987654′,
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe(‘edge.create’, function(href, widget) {
top.location.href = ‘https://www.facebook.com/besocial.hu’;
});
top.location.href = ‘https://www.facebook.com/besocial.hu’;
});
Itt figyeljünk arra, hogy az appId-ban található értéket módosítsuk a saját iframe alkalmazásunk Id-jára (ez az id kiolvasható a tab megnyitásakor az URL-ből, vagy ahttps://www.facebook.com/developers/apps.php oldalon a megfelelő alkalmazás nevére kattintva)
Valamint adjuk meg, hogy a likeolás után, milyen címre irányítsa a böngészőt a facebook. Ezt ebben a részben tudjuk definiálni: top.location.href = ‘https://www.facebook.com/besocial.hu’
(Megj.: a FB.Event.subscribe utasítással tudjuk figyelni az edge.create esemény, vagyis a likeolás bekövetkezését)
Ezt követően mentsük el és írjuk felül a régi fileunkat az új változattal.
Ha mindent jól csináltunk, a nem rajongó látogatóknál meg fog jelenni a like gomb a tabunkon és kattintás után a böngésző át fogja irányítani őket a korábban megadott címre.
A példa fileok kommentekkel kiegészítve innen letölthetőek: http://be-soc.com/test/besocial/fangate_like/fangate_like.zip
