Facebook Share gomb – hogyan tedd ki egyszerűen a honlapra?


Ha arra a kérdésre keresed te is a választ, hogy hogyan lehet egy Facebook share gombot kitenni a honlapra a legegyszerűbb módon, akkor jó helyen jársz.

Annyira egyszerű, hogy nem is igazán hívnám ezt tutorial-nak, csak 3 hasznos kis kódrészletnek amit emlékeztetőnek szánok hogy máskor ne kelljen keresgélni a neten.

Mindhárom kódrészlet arra szolgál, hogy könnyen be lehessen illeszteni egy linket/gombot bármilyen HTML-be, ha arra Facebook megosztás (share) gombot szeretnénk tenni.

Kódrészlet 1 – szöveges megosztás

1
	<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a rel="nofollow" href="http://www.facebook.com/share.php?u=http://www.tutorial.hu" onclick="return fbs_click()" target="_blank">Megosztás a Facebook-on</a>

Kódrészlet 2 – ikon és szöveg egyben a megosztás link

1
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=http://www.tutorial.hu" onclick="return fbs_click()" target="_blank" class="fb_share_link">Megosztás a Facebook-on</a>

Kódrészlet 3 – Szöveges és ikonos megosztás (gomb hatás)

1
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; } </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=http://www.tutorial.hu" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Megosztás</a>

A példákban a http://www.tutorial.hu van mint megosztandó link, természetesen ezt át kell írnod a saját URL-edre, ha felhasználod a kódot.

Kapcsolódó bejegyzések:

A cikket beküldte: Harder (http://blog.harder.hu)

3 hozzászólás

  1. Zsuzsanna says:

    Kedves Szerkesztő!

    Nekem olyan facebook like és megosztás gondom van, hogy néhány oldalamon a logómat szeretném képként csatoltatni a megosztáshoz, likehoz, a konkrét termék oldalaimon pedig a termékeim fotóját. Ugyanakkor a like-okat összesítve szeretném számoltatni. Tudna segíteni, hogyan oldható meg ez a probléma?

    Köszönettel:
    d’Elhougne Zsuzsanna

  2. szil0214 says:

    Szia!

    Én elég kezdő vagyok és lehet, hogy butaság, amit kérdezek, de ezeket pontosan hová kell beszúrni az oldalon?
    Blogom van és fogalmam sincs, hogy ha megnyitom a html kód szerkesztését, ott pontosan hová kell beilleszteni.
    Köszi

  3. pityu says:

    Szia!
    Ezt a megosztógombot próbáltam úgy átalakítani, hogy a “Megosztás” szó helyett 2db (az egyik akkor jelenik meg, ha rávisszük az egeret) 100×80 px kép legyen…
    Tökéletesen működik is, de ha kettő ilyen megosztókódot illesztek be egymás után, mindkettőt külön képekkel, akkor nem működik… mert ugyan azt a képet használja mindkettő kód. Valahogy a kettő kódot el kellene választani egymástól, de nem tudom hogy kell
    Tudnál segíteni?

Szólj hozzá
a Facebook Share gomb – hogyan tedd ki egyszerűen a honlapra? c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>