+1 megosztáshoz csatolt adatok beállítása

Nemrég került bevezetésre a +1 gombban egy új funkció, aminek köszönhetően a +1-ezett oldalt meg is tudjuk osztani a Google+ streamben, a kiválasztott körökkel. Ehhez kapcsolódó újítás a +Snippets, ami a Facebook Open Graph protokollhoz hasonlóan, lehetőséget biztosít annak a beállítására, hogy milyen információk kerüljenek a megosztott linknél csatolásra (kép, leírás, cím).
Nézzük, milyen módosításokra van szükségünk ennek a használatához.

Az első kisebb változtatást az oldalunk <body> tagjében kell alkalmaznunk, mégpedig a következőképpen:

 <body itemscope itemtype="http://schema.org/Article">

(a sémákról részletesebb leírás itt található: http://schema.org/ )

 

Miután ez megvan, keressük meg az oldalunk forrásában azt az elemet, amit a megosztás címeként szeretnénk beállítani. Ez lehet pl egy <h1> tag, amiben állítsuk be az itemprop=”name” tulajdonságot:

 <h1 itemprop="name">Ez lesz a megosztott oldalunk címe</h1>

 

Hasonlóan kell eljárnunk a hivatkozáshoz csatolt leírás esetében is. Itt is választhatunk <h1> elemet, de egy sima bekezdés is megfelelő lesz. Pl.:

 <p itemprop="description">Ez lesz a leírás.</p>

 

A +1 képhez pedig egy <img elemet kell keresnünk az oldalunk forrásában és ennek megfelelően módosítani:

 <img itemprop="image" src="thumbnail.jpg" />

 

Ezzel készen is volnánk 🙂 Természetesen ezek nélkül a beállítások nélkül is automatikusan kapcsolásra kerülnek adatok a megosztásunkhoz, így csak biztosítani tudjuk, hogy az jelenjen meg, amit mi szeretnénk.

Ezeket az adatokat egy css-el rejtett <div>-ben is „megjeleníthetjük”, így pl olyan képet is beállíthatunk a megosztáshoz, ami eredetileg nem szerepel az oldalunkon. Pl.:

 <div style=”display: none;”>
 <h1 itemprop="name">Ez lesz a megosztott oldalunk címe</h1>
 <p itemprop="description">Ez lesz a leírás.</p>
 <img itemprop="image" src="thumbnail.jpg" />
 </div>

 

Ha minden helyesen lett beállítva, valami hasonló megosztási ablakot kell látnunk a +1 gomb megnyomását követően:

Próbáljátok ki a bejegyzés alatt található +1 gombra kattintva 😉

A likeolt oldalakhoz csatolt kép és leírás beállításáról itt olvashattok bővebben.