Like gomb beillesztése iframe tabba

Közzétéve: 2011. június 29.

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ó
<html xmlns=”http://www.w3.org/1999/xhtml”>
kódot a következőre:

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

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ó </style> és </head> elemek közé illesszük be az alábbi kódsort:

<script src=”http://connect.facebook.net/en_US/all.js”></script>
<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}

function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

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:

<script src=”http://connect.facebook.net/hu_HU/all.js”></script>

)

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:

<fb:like send=”no” href=”https://www.facebook.com/besocial.hu” layout=”standard” show-faces=”true” width=”450″ action=”like” colorscheme=”light” font=”arial”></fb:like>

 

Természetesen a href attribútumban szereplő értéket mindenki írja át a megfelelő rajongói oldal elérésére!

A </body> tag elé illesszük be a következő kódsort:

<div id=”fb-root”></div>
<script type=”text/javascript”>
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’;
});
</script>

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 a https://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