Facebook like gombok betöltése rejtett div-ben

Egészen pontosan arról van szó, hogy ha a like button-t egy rejtett DIV-ben tároljuk, majd azt csak később szeretnénk megjeleníteni, akkor Internet Explorer és Firefox a tároló DIV megjelenítése után sem fogja mutatni a like gombot. Megoldás a cikkben...

Ha például több elemhez (cikkek, képek felsorolása) kell like gombokat tenni, nem biztos, hogy szépen néz ki, ha rögtön mindent megmutatunk, vagy pusztán erőforrás takarékosság/sebesség okokból sem célszerű 20-25 like gombot lerendereltetni a Facebookkal.

Viszont, ha egy rejtett DIV-ben helyezzük el a like gombot és azt oldal betöltése után lerendereli a facebook, akkor (IE és FF) a tároló DIV megjelenítése után sem fogja mutatni a like gombot. Erre és a fent említett takarékos megoldásra a következő egyszerű dolgot lehet használni.

<div class="fb_gomb" style="display: none;"><div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div></div>

Kikapcsoljuk az oldal töltése utáni minden facebook elem renderelését (e lépés csak optimalizálás szempontjából fontos) és egyesével lekérjük azokat, miután a tároló DIV-t megjelenítjük (display: block;).

window.fbAsyncInit = function () {
FB.init({
xfbml:false // így kikapcsoljuk az auto-renderelést
});
};

Minden facebook elem renderelése:

FB.XFBML.parse(); // amikor ezt meghívjuk, az oldalon minden facebook tag-t lerendereltetünk

Csak adott tároló DIV-ben lévő facebook elemek renderelése:

FB.XFBML.parse($('.fb_gomb')[0]); // jQuery-vel lekérjük a fb_gomb osztályú elemeket

Így ha például egy click eseményre ki-be csukódó ablakban van a like gomb, a kinyitáskor (show) kell a fenti függvények egyikét meghívni.

A FB.XFBML.parse az alábbi facebook tag-ket képes renderelni:

Ha esetleg nem sikerül, akkor itt a cikk alatt várom a hozzászólásokat.

Facebook like gombok betöltése rejtett div-ben

Legnépszerűbb cikkek