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

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:

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: 
<div class='post-footer-line post-footer-line-2'>
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 = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + &quot;#fb-root&quot;'><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 == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[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.

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!

6 comments:

multhinkmedia írta...

Nagyon szépen köszönöm! :)

Bíró Zoltán írta...

Nincs mit. Úgylátom nemsikerült :P Vagy meggondoltad magad és inkább hagyod a bloggereset?

multhinkmedia írta...

Most nincs nagyon időm, sok a zh :) De tavaszi szünetben megpróbálom! Az viszont meglepett, hogy a blogger komment rendszere nem marad meg, ha berakom a facebookost :S

Bíró Zoltán írta...

mja nem szépen kiveszi :D

multhinkmedia írta...

Akkor lehet, hogy marad a sima blogger hozzászólás! :)

Lucky írta...

Nekem folyton kidob valamilyen hibakódot, úgyhogy nem működik.. :/

Megjegyzés küldése