Stiri » addthis » cod » css » digg » facebook » flickr » javascript » jquery » link » script » share » sharethis » social » societate » twitter » "Share links" cu jquery, fara AddThis sau ShareThis
![]() |
Share cu jQuery |
Dezavantajul siturilor AddThis, ShareThis, etc, este ca de multe ori scriptul lor se incarca foarte greu.
Asadar, sa trecem la codul propriu-zis. Apropos de cod, sunt necesare librariile jQuery pentru ca acesta sa functioneze; majoritatea siturilor folosesc deja javascriptul jQuery, asa ca probabil puteti sterge linia din acest cod care include jQuery, pentru a nu-l incarca de 2 ori pe aceeasi pagina/site. Deasemenea, puteti modifica acest cod ori aspectul acestuia (stilul CSS) dupa cum doriti si va sfatuiesc si sa descarcati poza cu icoanele siturilor de socializare din <style></style>, s-o reincarcati pe situl dvs. (ori pe contul Flickr, Photobucker, Picasa s.a.m.d.) si s-o folositi pe a dvs. deoarece este posibil sa renunt in viitor la Flickr si sa sterg aceasta poza.
Share links cu jQuery
In codul de mai sus aveti, in ordinea scrierii, codul CSS ce va permite sa schimbati aspectul casutei cu link-urile de sharing, DIV-ul ce contine link-urile, javascriptul jQuery gazduit de Google (stergeti-l daca il aveti deja inclus in pagina) si inca un script compatibil cu jQuery care extrage link-ul paginii si titlul acesteia, pentru a crea link-urile de sharing.<style>div#shareSocial{border:2px #ccc solid;float:right;font-size:x-small;font-family:sans-serif;display:none;background:#FFF;width:10em;margin:7px;padding:7px;}div#shareSocial #sstitle{font-size:small;}div#shareSocial #ssmain{border-top:2px #ccc solid;margin-top:6px;}div#shareSocial #ssGetMore{padding:2px 0 0 20px;}div#shareSocial a{color:#4c4c4c!important;text-decoration:none;background:url(http://farm9.staticflickr.com/8162/7252758694_794ca304f3_b.jpg) no-repeat top left;line-height:16px;display:block;height:16px;border-bottom:1px #eee solid;margin:3px;padding:0 0 0 20px;}div#shareSocial a.more{display:none;}#shareSocial a#delicious{background-position:0 -176px;}#shareSocial a#diigo{background-position:0 -208px;}#shareSocial a#digg{background-position:0 -192px;}#shareSocial a#email{background-position:0 -224px;}#shareSocial a#facebook{background-position:0 -240px;}#shareSocial a#fark{background-position:0 -256px;}#shareSocial a#friendfeed{background-position:0 -304px;}#shareSocial a#mixx{background-position:0 -464px;}#shareSocial a#myspace{background-position:0 -496px;}#shareSocial a#stumbleupon{background-position:0 -704px;}#shareSocial a#propellor{background-position:0 -576px;}#shareSocial a#reddit{background-position:0 -592px;}#shareSocial a#technorati{background-position:0 -752px;}#shareSocial a#twitter{background-position:0 -784px;}div#shareSocial a:hover{background:#eee;}</style><div id="shareSocial"><div id="sstitle">Share this on: </div><div id="ssmain"><a title="Email" rel="nofollow" href="mailto:?subject=#T#&body=Read this: #U#" id="email">Email</a><a title="Diigo" rel="nofollow" target="_blank" class="more" href="http://www.diigo.com/post?url=#U#&title=#T#" id="diigo">Diigo</a><a title="Digg" rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=#U#&title=#T#" id="digg">Digg</a><a title="delicious" rel="nofollow" target="_blank" href="http://del.icio.us/save?v=5&noui&jump=close&url=#U#&title=#T#" id="delicious">delicious</a><a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=#U#&t=#T#" id="facebook">Facebook</a><a title="Fark" rel="nofollow" target="_blank" class="more" href="http://cgi.fark.com/cgi/fark/farkit.pl?u=#U#" id="fark">Fark</a><a title="FriendFeed" rel="nofollow" target="_blank" class="more" href="http://friendfeed.com?url=#U#&title=#T#" id="friendfeed">FriendFeed</a><a title="Mixx" rel="nofollow" target="_blank" class="more" href="http://www.mixx.com/submit/story?page_url=#U#" id="mixx">Mixx</a><a title="MySpace" rel="nofollow" target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&t=#T#" id="myspace">MySpace</a><a title="Propellor" rel="nofollow" target="_blank" class="more" href="http://www.propeller.com/story/submit/?url=#U#&title=#T#" id="propellor">Propellor</a><a title="reddit" rel="nofollow" target="_blank" class="more" href="http://reddit.com/submit?url=#U#&title=#T#" id="reddit">reddit</a><a title="StumbleUpon" rel="nofollow" target="_blank" class="more" href="http://www.stumbleupon.com/submit?url=#U#&title=#T#" id="stumbleupon">StumbleUpon</a><a title="technorati" rel="nofollow" target="_blank" class="more" href="http://technorati.com/faves?add=#U#" id="technorati">technorati</a><a title="Twitter" rel="nofollow" target="_blank" href="http://twitter.com/home?status=#U#" id="twitter">Twitter</a><div id="ssGetMore">More...</div></div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#shareSocial").show().mouseleave(function(){$("#ssGetMore").show(50);$("#ssmain a.more").hide(50);});$("#shareSocial a").each(function(){h=$(this).attr('href');h=h.replace(/#U#/g,encodeURIComponent(self.location.href));h=h.replace(/#T#/g,encodeURIComponent($("head title").html()));$(this).attr('href',h);}).mouseover(function(){window.status='';return false;});$("#ssGetMore").mouseenter(function(){$("#ssGetMore").hide(50);$("#ssmain a.more").show(50);});});</script>
Atat!
Meniul drop-down cu link-urile de share va aparea precum in poza.

Alte Stiri
-
📰 Michael Hannahan este profesor de Științe Politice la University of Massachusetts Amherst. Fost consultant politic și manager de campanii e...
-
📰 Una dintre cele mai faimoase lucrări științifice realizate de Sir Isaac Newton în urmă cu sute de ani a reieșit la lumină după ce doi istori...
-
📰 PROCEDURĂ… Finanțele Publice județene desfășoară o amplă campanie de informare a contribuabililor cu privire la măsurile fiscale a căror apl...
-
📰 Este a 11-a zi a anului 2021. Au mai rămas 354 de zile până la sfârşitul anului. Soarele răsare la 07 h 50 m şi apune la 16 h 57 m. Luna răs...
-
📰 Camera Reprezentanţilor a Congresului Statelor Unite va trebui să se pronunţe luni sau marţi asupra unei rezoluţii solicitând-i vicepreşedin...