 |
| 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.
