Megosztási ikonok egyszerűen

Hogy az oldalunk tartalmát könnyebben tudják megosztani látogatóink, érdemes megosztási ikonokat kihelyeznünk. Ezek azt szolgálják, hogy a kiválasztott közösségi oldalra beküldik a bejegyzés linkjét, amit így még több ember láthat.

Megosztási gombok

A bejegyzésünk aljába vagy tetejére - épp, ahol szimpatikus nekünk - szúrjuk be a következő sorokat, amik magát a gombokat és az eseményüket tartalmazzák:


<div class='sociable'>
<ul>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://iwiw.hu/pages/share/share.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='iWiW' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/iwiw.png' title='iWiW'/></a></li>
<li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Reddit' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Technorati' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Twitter' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/twitter.png' title='Twitter'/></a></li>
</ul>
</div>

Ezután a <head> után szúrjuk be a következő sort:


<link href='http://dl.dropbox.com/u/4121097/social/sociable.css' media='screen' rel='stylesheet' type='text/css'/>

Ha kész vagyunk vele, akkor úgy kell kinéznie, mint a bejegyzés alján található ikonsor.

Retweet gomb

Ez a bejegyzés jobb oldalán található számláló, amivel retweetelni tudunk és megjeleníti, hogy hányan tették ezt.

A következő sorokat illeszük a bejegyzés felső részébe:


<div style='float:right; margin-right:10px;margin-top:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script>
</div>

9 megjegyzés :

  1. Szia!
    Nagyon örülök, hogy rátaláltam a blogodra, de sajnos nem sikerült a megosztási gombok beszúrása. :( Nem tudnád picit szájbarágósabban leírni? köszi előre is.

    VálaszTörlés
  2. Szia!
    A Blogger irányítópulton válaszd a Tervezés/HTML-kód szerkesztése menüpontot. Pipáld ki a Vezérlõsablonok kibontását.
    Ezután keresd meg a következõt: <head> Ez alá másold be a <link href... kezdetû részt. Ebben a posztban a második bekeretezett rész.
    Majd keresd meg ezt: <div class='post-footer-line post-footer-line-1'> és ez alá másold be a legelsõ bekeretezett részt. Így kezdõdik: <div class='sociable'>
    Ha bemásoltad, sablon mentése és úgy kell kinéznie, mint nálam:)

    VálaszTörlés
  3. Szia!

    Tudnál segíteni? :) A problémám az, hogy egyedi a blogom kinézete, vagyis feltöltött témát használok.
    www.angyaliharcos.blogspot.com - on és ezen is -> http://yzarr-blog-fire-themar.blogspot.com/ a bajom, az, hogy az eredeti bloggeres megosztási gombokat vmiért nem jeleníti meg a bejegyzés alá. A facebook lájk gombot már sikerült be tennem, de ezt a legújabb plus1 őrületet is szeretném betenni hasonló képen mint a fb lájkolósat. Viszont, láttam, ezt a sokkal egyszerűbb megoldást, csak azt, nem tudom eldönteni, hogy hova tegyem be a fenti kódba a google lájk gombját?o.O Tudnál segíteni nekem ebben?
    Köszi, Yzarr.

    VálaszTörlés
  4. Szia, köszi a segítséget! :)

    VálaszTörlés
  5. Kedves Gianni!

    Újból hozzád fordulok segítségért!
    A blogoban már fent van a face és a twitter megosztási gomb, én most az iwiw-t szeretném csak. Tudnál segíteni, hogy ezt hogyan kell.
    Illetve, ha a fentieket beillesztem, akkor a már meglévőkkel mi történik? Ez biztos buta kérdés volt!!!
    Fáradozásodat előre is köszönettel!
    Mazsola

    VálaszTörlés
  6. Szia!
    Ha bemásolod a fentit, akkor mindkettő lesz. Ami szerintem felesleges. Egyszerűbb, ha csak egy iwiw gombot teszel be pluszban. A fenti hosszú kód helyett a lentit kell beillesztened és természetesen a fent leírt másik részt a headbe bemásolni:
    <div class='sociable'>
    <ul>
    <li><a expr:href='&quot;http://iwiw.hu/pages/share/share.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='iWiW' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/iwiw.png' title='iWiW'/></a></li>
    </ul>
    </div>

    VálaszTörlés
  7. Köszönöm, megpróbálom! Nagyon igyekszem!
    Mazsola

    VálaszTörlés
  8. Nagyon, nagyon köszönöm sikerült!
    Bár nem tudom, hogy az hiba-e, hogy nem a többi ikonnal került egy sorba, hanem feljebb?
    De ott van az a lényeg!!!
    Mazsola

    VálaszTörlés