Facebook Hozzászólás Doboz Beillesztése, blogger ~ Biró Zoltán Blogja

Multhinkmedia kérésére itt van az eljárás, hogy hogyan is kell a blogodba betenni, a facebookos hozzászólási lehetőséget.

Vigyázat! Nem épp a legkönnyebb! Nem egy szimpla kód bemásolás oszt annyi.

Én egy darabig nem teszek ilyesmit, mert:

- lehet, hogy már minden facebookosodik, de majd egyszer le fog ez is járni. (a nagy fb őrület)

- a blogom ezért a natív hozzászólási lehetőséggel van ellátva

A facebookos comment boxnak a hátránya az, hogy megjelenik a saját facebookodon (látják az ismerősök), hogy XY oldalon mihez és mit szóltál hozzá.

A saját blogger comment box, meg: több lehetőséget kínál fel: hozzá lehet szólni névtelenül (bejelentkezés nélkül), Wordpress felhasználóval, TypePad, AIM, Open ID -val és persze a Google felhasználóddal. (gmail, google plus, blogger, youtube stb - igen ez mind google szolgáltatás)

Tehát: ha valaki meglátogatja az oldaladat azonnal tud hozzászólást írni, viszont:

facebook comment box esetén, egy olyan látogató akinek nincs facebookja (de már kinek nincs?) nem fog tudni írni. Emiatt el lesz keseredve, lehajtja a fejét és búskomoran kikapcsolja a gépét. (hajtogatva: ,, azért se csinálok facebookot !'')

De mindenkinek joga van választani ... a facebookos hozzászólás jóval egyszerűbb és praktikusabb (ez tény) - ha akarod, hogy a blogodon ilyen jelenjen meg, ezeket a lépéseket kell szép sorjában elvégezzed.

Megpróbálom a lehető legérthetőbben leírni. Remélem sikerül.

1. Menj az alábbi címre: http://developers.facebook.com/apps

2. Mit kell itt csinálni? Készíteni egy appot. Sajnos nekem angolul van a facebook, ezért így fogom írni. (ha neked magyarul van: tájékozódj a képek után)

3. Rámész: + Create New App

4. Előjön egy ablak: amit ki kell tölteni. Display name (Név) : milyen néven szerepeljen az appod. Namescape az opcionális. Category: válaszd ki Apps for Pages... és Create App.

5. Előjön egy biztonsági ellenőrzés. Írd be a betüket... és OK!

6. Bejön az oldal a beállításokkal.

7. App ID: azt a 15 számot szépen írd le, vagy másold át notepadba, mert később fel kell majd használni.

8. Rámész a Settingsre (Beállítások) - Basic - adsz neki egy + Add Platformot - Website... kibővíti az ablakot.

8. Itt néhány dolgot ki kell tölteni:

- App Domains: bloggered van beírod: blogspot.com, ha wordpress: wordpress.com stb

- Site URL : bemásolod a blogod, weboldalad (amibe a facebook comment boxot akarod beilleszteni) pontos címét. (Mobile Site URL ugyanaz) - Save Changes! (Mented)

! lehet az App Domains-t nem fogja engedni - hagyd üresen !

Ez a része kész is van. A Comment Boxot az alábbi címen tudod szerkeszteni:

https://developers.facebook.com/tools/comments

Blogger

1. Rámész a bloggerre - bejelentkezel - Template - Edit HTML

És igen a HTML -ba kell pakkolászni a kódokat. Fontos, hogy előtte mentsd el a blogod kinézetét, mert megeshet, hogy valamit nem jól csinálsz... és akkor nézheted magad.

Lementeni: Template - Backup/Resotore - Download Full Template

Tehát Edit HTML: következnek a kódbeírások.

1. után helyezd be ezt:

<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>

YOUR_APPLICATION_ID helyett másold be az App ID -t !!!

vagyis ezt:

(a sajátodat: ne azt ami a képen szerepel!)

2. Keress rá <html -ra (CTR + F -el). Ha megkaptad, helyére ezt másolod be:

<html xmlns:fb='http://www.facebook.com/2008/fbml'

3. Keresd meg ezt a sort:

Ha megkaptad utánna szépen másold be ezt a kódsort:

<b:if cond='data:post.isFirstPost'>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

</b:if>

<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

4. Keresd meg ezt a sort:

div class='post-footer-line post-footer-line-3'>

És utánna meg másold be ezt a kódsort

<b:if cond='data:blog.pageType == "item"'>

<div id='fb-root'/>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

<div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='900'/></div>

</b:if>

Szerkeszthetőek:

width = 900 - szélességnek megadszhatsz más értékeket, hogy illeszkedjen az oldaladhoz.

margin: 20px - a box széle, kisebbítheted (pl 10 px) vagy nagyobbíthatod (30-40-50...px)

colorscheme='light' - a box témája. Alapértelmezetten lighnak van betéve, de beírhatsz pl dark - ot, és feketévé változik.

Itt szerkesztheted: https://developers.facebook.com/docs/plugins/comments.

Szerkesztés után kiadja a fenti hosszú kódsort. (3, 4 lépés)

És Mented!

Ha nem sikerült, ne csüggedj! Lementetted a blogodat teljes egészében (nagyon remélem), ezért szépen visszarakod: blogger - template - backup/restore - upload template. (kiválasztod a lementett témát)

Sok Sikert!

Figyelem! Az eljáráshoz alapfokú HTML ismeret szükséges!

Biró Zoltán Blogja

Keresés

2014. ápr. 5.

Facebook Hozzászólás Doboz Beillesztése, blogger

7 megjegyzés:

Archívum