Facebook optimizacija web stranice (Open Graph Protokol)

Tema namijenjena društvenim mrežama koje svakodnevno posjećujemo.
5 post(ov)a • Stranica: 1/1.

Facebook optimizacija web stranice (Open Graph Protokol)

PostPostao/la Armin » 11 ožu 2012, 22:54

Vjerujem da svi koji su se bavili u neku ruku web dizajnom da su imali problema pri objavljivanju svojih stranica na facebook, loš opis, loš title, nema slike ili uzima sliku s pogrešnog mjesta itd. Bilo bi lijepo naći način to sve kontrolirati, jel tako?

Da bi objasnili postupak optimizacije kreirat ću jedan test sajt, što vi naravno nemate potrebe raditi jer ste već do sad napucali vašu stranicu maksimalno. :-B Uglavnom, neka imamo stranicu kao na sljedećoj slici:

slika

Znam, izgleda predivno. Međutim, šta se desi kada pokušamo podijeliti na facebook:

slika

To sigurno nije ono što želimo. Sada bi trebali potražiti izvor problema prikaza na facebooku, i za to će nam poslužiti Facebook Debugger koji možete naći na sljedećem linku: http://developers.facebook.com/tools/debug.

Unesite vaš željeni URL i vidjet ćete detalje kako facebook ali i tražilice interpretiraju vaš sajt. Ukoliko ste trapavo radili stranicu kao ja vjerovatno ćete vidjeti sljedeću poruku: Open Graph Warnings That Should Be Fixed. U suprotnom, nećete vidjeti ovu grešku i facebook će baš fino prikazivati vašu stranicu. Ako ne, onda pišimo ovako:

html code
<meta property="og:title" content="Test stranica"/> <!-- ovdje podešavate title kako vam odgovara -->
<meta property="og:description" content="Programirajmo zajedno." />
<meta property="og:image" content="http://www.programiranje.org/test/slicica.png" />
<meta property="og:url" content="http://www.programiranje.org/" />
<meta property="og:site_name" content="Programiranje.Org"/>

Navedeni kod unosimo prije </head> dijela linije. Ako refreshujemo naš debugger vidjet ćemo sada sljedeće:

slika

Na facebook prikazu rezultati neće biti trenutni, a oni zavise uglavnom od privremene memorije vašeg browsera. U konačnici dobijamo ovo:

slika

Meta tagovi koje smo koristili predstavljaju Open Graph protocol. Detaljnije o ogp-u možete pročitati na stranici http://ogp.me/ ili http://developers.facebook.com/docs/opengraph/


To je to

:)

-------------------------
EDIT: Novim updateom facebook zahtijeva da slika bude veća od 200x200 da bi se prikazala.
"Ne žalim što su drugi pokrali moje ideje. Žalim što nemaju svoje"
Nikola Tesla

Re: Facebook optimizacija web stranice (Open Graph Protokol)

PostPostao/la lazarbeli2 » 30 svi 2013, 03:28

Pozdrav

Imam problema na mom sajtu u vezi Facebook komentara...
Upitanju je uCoz sajt....

Na profilima korisnika ima postavljeno za FB komentare i podeso sam Moderatora... da mogu da kontrolišem, brišem itd poruke ali na stranicama gde su mi filmovi www.mojsajt.com/publ/.... nemam moderatora da kontrolišem komentare....
Isto sam stavio meta tagove ali neće...

Stavio sam u <head>
Kod: Označi sve
<meta property="fb:app_id" content="345668392210082">
<meta property="fb:admins" content="100001348948727" />


Molim za pomoć ako zna neko kako to da rešim
Moj sajt je i evo mog celog koda gde mi ne radi z moderatora FB komentara...:
Ceo kod stranice.zip
(9.68 KiB) Preuzeto 277 put/a.

Re: Facebook optimizacija web stranice (Open Graph Protokol)

PostPostao/la HepeK » 04 lip 2013, 17:29

Koliko ja vidim ti nigdje nemaš <head> tagova tj. imaš samo zatvoren head tag"</head>" a ove fb funkcije traze na sajtu <head> </head> tagove i izmedju njih koriste svoje meta tagove.

Na sajtu ti se pojavljuju dvije iste funkcije za fb


javascript code
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/hr_HR/all.js#xfbml=1&appId=413522448716648";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


To gore je dovoljno jednom implementirati u kod i to ispod <body> taga a zatim samo pozivati fb like i komentare preko sledećeg dijela koda:


xml code
<fb:comments href="http://example.com" width="470" num_posts="10"></fb:comments>

<fb:like send="false" layout="standard" width="450" show_faces="false" colorscheme="light" action="like"></fb:like>
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.

Re: Facebook optimizacija web stranice (Open Graph Protokol)

PostPostao/la lazarbeli2 » 04 lip 2013, 23:55

Hm verovatno sam slučajno obrisao head tag...
Pokušao sam ali opet neće... Evo upload celog koda sada.

Ali mislim da je neki drugi problem tu...
Kada stavim kod adrese $_PROFILE_URL$ koj je iz Users personal page (tamo radi sve normalno) onda se pojavljuje moderator i ovamo... ali piše fb:admin: None specified . Naravno taj kod ne može tamo da ide.
Adresa te moje streanice ide ovako:
http://www.ekipica.com$ENTRY_URL$
I kada stavim taj kod tj. adresu nema moderatora nikako.... :S

Jedino ako mi ne vidi meta tagove
Kod: Označi sve
<meta property="fb:app_id" content="345668392210082">
<meta property="fb:admins" content="lazarbeli2">

Između <head>....</head>

Isti problem imaju još par sajtova od moih prijatelja. Isto uCoz sajtovi....
Privitak/ci
CEO KOD.zip
(9.63 KiB) Preuzeto 280 put/a.

Re: Facebook optimizacija web stranice (Open Graph Protokol)

PostPostao/la lazarbeli2 » 06 lip 2013, 01:17

Evo i snimak sam uploadovao na YouTube.....
http://www.youtube.com/watch?v=6cYT7nRBkYo

A evo i mog celog koda ovako...
http://www.ekipica.com/public_code.txt


5 post(ov)a • Stranica: 1/1.

Na mreži

Trenutno korisnika/ca: / i 1 gost.