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.
Tartalomjegyzék
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 noopener noreferrer" 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 noopener noreferrer" 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 noopener noreferrer" 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.
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
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
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?