2009. október 29.

Megosztás ikonok a blogodba

A weboldal tartalmának továbbosztását segítik az úgynevezett bookmarklet ikonok. Számos ilyen szolgáltató létezik már a weben, melyek egyszerű widget beillesztéssel segítik a blogger és az olvasók életét, hogy az éppen látott tartalom továbbküldhető legyen Facebook, Twitter, iWiW és Startlap irányba, vagy akár CitroMail segítségével továbbküldve. A kész dolgoknak megvan a maga hátránya, sajátot készíteni pedig macerás. Ezért megosztom a sajátomat, ha már megdolgoztam vele. Minden blog bejegyzésem mellett/felett látsz pár kis ikont, ezek az alábbi kód beszúrásával kerültek ki a helyükre.
<a target="_blank" href="http://www.twitter.com/" onclick="javascript:pageTracker._trackPageview('/share/twitter');window.open('http://twitter.com/home?status='+encodeURIComponent(document.title)+' '+encodeURIComponent(location.href));return false;" title="Add a Twitter-hez"><img border="0" width="16" alt="Add a Twitter-hez" src="http://sancho.hu/files/blog/content/shareicons/twitter.png" height="16" /></a>

<a target="_blank" href="http://www.facebook.com/" onclick="javascript:pageTracker._trackPageview('/share/facebook');window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="Add a Facebook-hoz"><img border="0" width="16" alt="Add a Facebook-hoz" src="http://sancho.hu/files/blog/content/shareicons/facebook.png" height="16" /></a>

<a target="_blank" href="http://www.startlap.hu/" onclick="javascript:pageTracker._trackPageview('/share/startlap');window.open('http://www.startlap.hu/sajat_linkek/addlink.php?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="Add a Startlaphoz"><img border="0" width="16" alt="Add a Startlaphoz" src="http://sancho.hu/files/blog/content/shareicons/startlap.png" / height="16" /></a>

<a onclick="javascript:pageTracker._trackPageview('/share/citromail');" style="border: 0px!important;" href="javascript:(function(){S='';D=document;W=window;if(D.selection) {Q=D.selection.createRange().text;} else if (W.getSelection) {Q=W.getSelection();} else if (W.getSelection) {Q=W.getSelection();}; var url=W.top.location.href;var title=window.top.document.title||'';var wn=title.replace(/[^a-zA-Z0-9]/gi,'_');window.open('http://citromail.hu/share/?url='+encodeURIComponent(url)+'&amp;subject='+encodeURIComponent(title)+'&amp;body='+escape(Q),wn,'width=490,height=395,toolbar=0,resizable=no,location=0,status=0,menubar=0,directories=0');})();"><img style="border: 0px!important;" src="http://img.citromail.hu/2.0/img/share/kek_4.png" alt="Oszd meg a Citromail-lel!" title="Oszd meg a Citromail-lel!" /></a>

<a target="_blank" href="http://www.iwiw.hu/" onclick="javascript:pageTracker._trackPageview('/share/iwiw');window.open('http://iwiw.hu/pages/share/share.jsp?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="Add az iWiW-hez"><img border="0" width="16" alt="Add az iWiW-hez" src="http://sancho.hu/files/blog/content/shareicons/iwiw.png" height="16" /></a>

<a class="google-share" href="javascript:var%20b=document.body;var%20GR________bookmarklet_domain='http://www.google.com';if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/link-bookmarklet.js');void(b.appendChild(z));}else{}" title="Add a Google Reader-hez" onclick="javascript:pageTracker._trackPageview('/share/greader');"><img border="0" width="16" alt="Add a Google Reader-hez" src="http://sancho.hu/files/blog/content/shareicons/greader.png" height="16" /></a>

<a target="_blank" href="http://feeds.feedburner.com/SanchoBlogja" rel="alternate" title="Add az RSS olvasódhoz" type="application/rss+xml" onclick="javascript:pageTracker._trackPageview('/share/rss');"><img border="0" width="16" alt="Add az RSS olvasódhoz" src="http://sancho.hu/files/blog/content/shareicons/rss.png" height="16" /></a>

A kódot a weboldalad azon részébe kell beilleszteni, ahová ki szeretnéd tenni az ikonokat. A sárgával kiemelt részre figyelj, mert oda a saját weboldalad RSS Feed linkjét kell beilleszteni. A többi weboldal és webmotor független, elvileg mindenhol működik. Amennyiben másik ikonképeket szeretnél alkalmazni, mindössze a kódokban a .png képek linkjeit kell kicserélned másra.

Update 2010-07-01
Bekerült a kódba egy kicsi kód, mely lehetővé teszi, hogy a Google Analytics statisztika rendszerben mérhesd, hányan kattintják le a megosztás ikonokat. Erről bővebben itt írok:
Bekerült egy új megosztás ikon, mely a CitroMail levelezőt használóknak segít a könnyű tartalom továbbküldésben. Erről itt olvashatsz bővebben: http://webmester.citromail.hu

47 hozzászólás:

  1. Kipróbálom, de nem hiszem, hogy nekem ez menni fog. Mindenesetre köszi, hogy ilyen önzetlenül közreadod tudásodat!
    VálaszTörlés
  2. Próba szerencse.Tetszik.
    Ha nekem nem akarsz esetleg segiteni, megértem.
    Ha mégis akkor megköszönöm.
    VálaszTörlés
  3. Blogspot motor esetén az alábbiak szerint szúrhatod be a fenti kódot tetszőleges pozícióba a legkönnyebben:

    # Irányítópult / Elrendezés / Oldalelemek / Modul hozzáadása menü
    # Majd itt a HTML/JavaScript modul kell
    # Ebbe teszed be vágólapról a fenti kódot
    # Mented, majd megnézed előnézetben, jó lett-e
    # Ha igen, elmented az elrendezés módosításait
    # Ha szeretnéd, átmozgathatod a dobozt a blogban az oldalsó menüből bárhová, csak ne felejts el menteni

    Ennyi. :)
    VálaszTörlés
  4. Az rss olvasóddal kapcsolatban nem tudsz valami okosságot?Regisztráltam oda ahol a te is vagy de nem tudok vele mit kezdeni.Ebben tudsz segiteni?
    VálaszTörlés
  5. A Feedburner-re gondolsz? Huhh, most nem vállalkoznék rá, hogy leírjam. Eléggé adja magát a cucc.
    VálaszTörlés
  6. a stratlaposon kiba rossz az antialias
    VálaszTörlés
  7. Mivel nézed? Amúgy a kicsinyítést a böngésző végzi az eredeti felbontásról. Ha megnézed a kódot, akkor láthatod, hogy az eredeti helyről linkelem, és kicsinyítem. Aki szeretne szebbet, hajrá! :)
    VálaszTörlés
  8. Javítottam a kódot; a Twitter API nem adta át a címet, már az is átmegy a link elé.
    VálaszTörlés
  9. Szia, nagyon szuper ez a blog, jó hogy megtaláltalak, loptam is belőle.
    Köszönöm Neked!
    Legyen szép napod!
    VálaszTörlés
  10. Köszi Marcsi,

    Örülök, ha segíthettem! :)
    VálaszTörlés
  11. Köszi szépen.
    Kipróbáltam, de sajnos nekem függőlegesen jelennek meg az ikonok.
    Mindent úgy tettem, ahogy írtad.
    VálaszTörlés
  12. Akkor is egymás alá teszi be, ha azonnal egymás mellé jönnek a kódok úgy, hogy a végük és az elejük találkozik?
    VálaszTörlés
  13. Igen! http://fagormintabolt.blogspot.com/
    VálaszTörlés
  14. Nekem még egymás alatt van a blogodban Chrome alatt. Nna, majd sörözéskor belépsz, aztán kijavítom, oks? :)
    VálaszTörlés
  15. Köszi, nekem nagyon bejön, itt használtam fel:
    www.sportmaszoedzes.blogspot.com
    VálaszTörlés
  16. Frissítettem a kódon, saját szerverről futnak az ikonok. A Startlap ikont javítottam, valóban 16x16 pixeles lett az is.
    VálaszTörlés
  17. Pont ilyen univerzális kódot kerestem épülő lapomhoz. Király vagy, köszi!
    Itt használom: www.titokklub.com
    VálaszTörlés
  18. Köszönöm szépen, nagyon hasznos!
    Mi a javaslatod arra, ha nem az egész blogot akarom megosztani, hanem lehetőséget adni az egyes bejegyzések megosztására? Blogspot esetén hogy fogja beintegrálni csak az adott bejegyzés url-jét?
    (Ha tudsz ilyen linket, ahol ezt elmagyarázzák, -akár angolt is- azt is köszönöm. :))
    VálaszTörlés
  19. Szia Szunyo,

    Ez alkalmas erre is. Ha megnézed bármelyik aloldalt, azt fogja linkelni.
    VálaszTörlés
  20. Újabb frissítés: belekerült a Google Buzz (azaz Google Zümm) megosztás ikon is a sorba.
    VálaszTörlés
  21. Hopp, valamiért nem megy a buzz megosztás. Akinek azért kell, ide teszem az ikonját: http://sancho.hu/files/blog/content/shareicons/buzz.png
    VálaszTörlés
  22. Köszönet az infóért, felhasználtam, itt:
    http://kocsma.blog.hu
    VálaszTörlés
  23. Szia Apuska,

    A Buzz megosztás részt szedd ki, mert az nem megy. Amint lesz időm utána nézni, javítom.
    VálaszTörlés
  24. Lehet, hogy az AddThis tech szinten terheli a weboldalt, de laikusok számára sokkal egyszerűbb. Az én cikkem nekik szól elsősorban, nem a techembereknek.
    A stat lehetőség se rossz, satöbbi. A Bloggersbloggers elsősorban a Bloggeres blogokról szól, egyetlen végtelen hosszúvá növelhető xml fájllal.
    Peace!
    http://bloggerbloggerek.blogspot.com/2010/03/blog-megosztas-kozossegi-oldalakon.html
    VálaszTörlés
  25. Hi

    Hogyan tudom beállítani hogy minden bejegyzés alatt a tagek után, de még a hozzászólások elött jelenjen meg?
    Mindezt blogspoton
    VálaszTörlés
  26. Szia Kolek,

    Kisérlezett, mikor jelenik meg ott. Én is így tornáztam a Google Reader megosztárokat a komment doboz fölé, de a hozzászólások alá.
    VálaszTörlés
  27. Szia Sancho! Számomra nagyon hasznos post, köszönöm szépen! Itt használtam fel: http://utazzz.hu. Nincs véletlenül egy hasonló post a jobb felső sarokban található "facebook/tetszik/lájkolj" témában? :) Még1x köszönöm!
    VálaszTörlés
  28. Itt megleled, ha még nem találtad meg: http://twitter.com/sanchomuzax/status/12654305466
    Én leszedtem, még várok vele, míg lesz értelme. :)
    VálaszTörlés
  29. Megtaláltam, köszi! Hát, egyenlőre én sem látom sok értelmét, de amióta megtudtam, hogy a Facebooknak nagyobb a forgalma mint a Google-nek, én már semmin nem csodálkozom. Még az is lehet, hogy nyomogatni fogják a népek... ;)
    VálaszTörlés
  30. Ez a Like feature egyelőre a Facbeook-nak jó, hiszen maga felé tereli a netezőket, és tartalmat ad a FB-nak. Jelenleg ez még kevésbé jó Neked. Inkább érdekes az anyagaidat megpörgetni magadtól a FB-ban, és onnan kifelé mutató linkeket és kattintásokat szerezni. Ez a Like még nem Neked jó! :)
    VálaszTörlés
  31. Itt megtaláltam, hogyan lehet a Facebook Like button-t betenni minden poszt végére a Blogspot/Blogger motorhoz:
    http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+BloggerPlugins+(Blogger+Widgets)
    VálaszTörlés
  32. Frissítettem a megosztás ikonok kódját.

    # Elkészült a CitroMail megosztás ikon is. Bővebben: http://webmester.citromail.hu

    # Belekerült egy Google Analitics mérőkód is, így mérhetővé vált az ikonokra kattintás. Bővebben: http://blog.sancho.hu/2010/07/megosztas-ikonok-merese-googel.html
    VálaszTörlés
  33. Ügyes, megpróbálom de még nem tudom, hová és mit kell bemásolnom.A mozillán nekem van külön sor megosztásom, de a blogot jó lenne a google chrome-n is küldeni.
    VálaszTörlés
  34. Böngészőben szeretnéd feltenni ezeket az ikonokat a kedvencekhez?
    VálaszTörlés
  35. sziasztok én az oldalamra szeretném betenni a megosztások közé viszont nem tudom hogyan kell:S a kód meg minden megvan, viszontha beillesztem akkor csak a szöveghez teszi be nem pedig a többi kis megosztás ikon mellé
    akitud segíteni írjon előre is köszi
    VálaszTörlés
  36. Kifejtenéd bővebben, mi a gond vele? Melyik a weboldalad? Hogy érted, hogy a szöveghez teszi?
    VálaszTörlés
  37. Köszönöm a kódot, beraktam a jobb oldali oldalsáv tetejére és tökéletesen működik, fantasztikus hogy igy megosztod a tudásod.
    Köszi
    VálaszTörlés
  38. Sziasztok!
    Valószínűleg bennem van a hiba, de sehogyan sem tudom összehozni, hogy a weblapom egy-egy menüpontjába beillesszem a ,,Megosztás" gombot, úgy, hogy az működjön is.
    Ha mindössze egy facebook és egy iwiw ,,megosztás" gombot szeretnék kitenni, mi a teendőm?
    Valahogy úgy próbáljátok, olyan részletességgel leírni, hogy kiigazodjak rajta!
    Hova kell beillesztenem a weblapom címét, vagy milyen formában?
    Köszönöm a segítséget!

    egy kezdő
    VálaszTörlés
  39. Javaslom, hogy keress a blogmotorodnak megfelelő részletes helpet a Google segítségével: http://www.google.hu/search?sourceid=chrome&ie=UTF-8&q=iwiw+megoszt%C3%A1s+ikon
    VálaszTörlés
  40. Köszönöm a segítségedet!
    Sikerült megoldani a dolgot.
    VálaszTörlés