informace ze zákulisí vývoje

Sdílecí tlačítko pro signály.cz

5. 11. 2011 21:01
Rubrika: Aktuálně

Pokud chcete na své stránky přidat tlačítko pro sdílení na signálech, stačí jednoduše vložit odkaz:

<a href="http://www.signaly.cz/odjinud/sdilej?url=<url>" class="signaly-share">Sdílet na signálech</a>

část <url> nahraďte za adresu, kterou chcete sdílet.

Pokud chcete, aby se sdílecí stránka otrvírala do nového malého okna, je třeba přidat tento javascriptový kód, který mj. vyžaduje přítomnost jQuery.

<script>
$(function() {
	$('.signaly-share').click(function(e) {
		window.open($(this).attr('href') + '&popupMode=1', '', 'width=650,height=420');
 		e.preventDefault();
	});
});
</script>

Může se naskytnout případ, kdy máte přístup jenom k šabloně a nemůžete generovat daný odkaz. Pak se nabízí následující javascript:

<a class="signaly-share">Sdílet na signálech</a>
<script>
$(function() {
	$('.signaly-share').click(function(e) {
		window.open('http://www.signaly.cz/odjinud/sdilej?url=' + document.location + '&popupMode=1', '', 'width=650,height=420');
		e.preventDefault();
	});
});
</script>

Pro přidání grafiky může použít jeden z těchto stylů:

Tlačítko:

 .signaly-share {
	background: url(//static.signaly.cz/assets/images/social-signaly.png) no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	text-indent: -9999px;
	font-size: 1px;
	cursor: pointer;
  }

Text:

  .signaly-share {
	background: #3ab13a;
	cursor: pointer;
	display: inline-block;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,.3);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #fff;
	font-weight: bold;
	padding: 6px 13px 5px;
	text-shadow: 1px 1px rgba(0,0,0,.3);
	text-align: center;
	text-decoration: none;
	font-family: Arial,sans-serif;
	font-size: 15px;
	cursor: pointer;
}

Pokud chtete mít sílecí tlačítko ve svém prohlížeči, můžete přetáhnout tento odkaz do svých záložek:

Sdílet na signálech

Věřím, že novou funkci úspěšně využijete.

Zobrazeno 4701×

Komentáře

Jan Škrášek

Ikony v podobném designu pro ostatní media jsou zde: http://icondock.com/free/vector-social-media-icons

vojtec

Dobrý nápad:-)
Mně by se spíš hodilo, abych mohl mít ve svém prohlížeči v liště záložek odkaz na funkci na sdílení na signály.cz. (Zaujme mě článek někde třeba ve zprávách, kliknu na to a hodí se mi to do odjinud na signály.cz). Používám tuhle formu pro sdílení na facebooku a je to velmi pohodlné. Jestli vám to pomůže, tak je v tom todle:
javascript:var%20d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1244073820&u='+e(l.href)+'&t='+e(d.title);1;try{if%20(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)%20{a=function()%20{if%20(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

doser

Nešlo by takový jednoduchá fce přepsat bez jQuery? Není asi úplně ideální kvůli jednomu tlačítku loadovat celou jQuery nebo pokud je použit jiný framework, tak není vždycky úplně jednoduché zprovoznit dva vedle sebe a je to zbytečné.

HejTi

@vojtec
javascript:this.location="http://www.signaly.cz/odjinud/sdilej?url="+document.location
(zkoušeno pouze v chrome)

vojtec

HejTi: díky, to je přesně ono, ve firefoxu funguje

Jan Škrášek

@doser: Však si to přepiš bez jQuery. To není nic složitého. Jde o tu myšlenku, každý vývojář používá jiný framework, ovšem jquery je v 80 % případů ;)

@vojtec: hejtiho není zrovna uplně ideální, cílem je to otevírat v popupu. Záložku sem vytvořil a přidal do článku.

vojtec

paráda:)

Andrea Hýblová (Neposeda)

už na tom dělám, aby se dalo sdílet i z našich webovek:-)

HejTi

@hrach - mým cílem to nebylo ;o) osobně nesnáším popupy a tak mám i sdílení na FB i SIG dělané takto...

Jan Škrášek

tak šup, čekám na děkovačky, že to je možný i bez popupu, neměl sem to původně na programu, ale pak sem to přidělal. :P ;) popup není vůbec nic špatného, ale musí se využívat ke správným učelům, což tady se hodí :)

HejTi

@hrach - teď nechápu...

Btw. nebylo by lepší používat text "Sdílet na signály.cz"?

Btw. máš na ty sdílecí ikonky nějaké udělátko? Já bych si udělal radši než s vlnkou se smajlíkem. ;o)

Jan Škrášek

nemám, upravil sem si tu, co jsou v prním komentáři.

doser

@hrach: já si to přepíšu, ale já jsem programátor, běžnej admin (a těch je většina) je bez šance, ten ani neví co je jQuery. Moje myšlenka byla taková, dotáhnout to ještě dál a udělat to co nejjednodušší (copy&paste), aby se to hojně využívalo. Ale jinak dobrý nápad!
@hejti: popupy taky nesnáším... to v 90% případů zavání reklamou, kterou automaticky zavírám nebo mám zablokovanou, rozumné využití pop-upu je opravdu jen výjimečně.

doser

Btw. chtěl jsem přidat odkaz, což se povedlo, ale po odeslání formuláře na přidání odkazu s prázdným komentářem jsem se dostal na bílou prázdnou stránku s url http://www.signaly.cz/posts.links.links/share-done/?_fid=f37a a odkaz se vložil.

Jan Škrášek

Hm, to je ten problem, kdyz to pouzivate bez popupu :) diky, opravim

Libor-PJ-Talaš

šlo by to hodit hromadně k blogům? Jinak paráda;)

Zobrazit 17 komentářů »

Pro přidání komentáře se musíš přihlásit nebo registrovat na signály.cz.

Autor blogu Grafická šablona Ondřej Válka