[TUTORIAL] Adicionar Share nos tópicos

A ferramente "Share" serve para compartilhar um conteúdo na internet, e neste tutorial estaremos aprendendo como adicionar esta ferramenta nos tópicos do vosso fórum

--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Adicionar Share nos tópicos

1º - Adicionando o CSS:
Para que o efeito tenha uma aparência agradável e elegante iremos adicionar um código CSS para personaliza-lo, para isso devemos aceder ao:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

E então, iremos colocar o código abaixo:

Código:

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}

2º - Revisando o código Js:
Neste passo iremos procurar o código para a versão correspondente do seu fórum:

PHPBB3

Código:

jQuery(document).ready(function(){var url=document.URL;jQuery(".left-box:eq(1)").append('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

PHPBB2

Código:

jQuery(document).ready(function(){var url=document.URL;jQuery('form[name="post"]').before('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

PUNBB

Código:

jQuery(document).ready(function(){var url=document.URL;jQuery("div.pun-crumbs:last").append('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

Invision

Código:

jQuery(document).ready(function(){var url=document.URL;jQuery(".posting-buttons:last").after('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

2º - Adicionando o código Js:
Após escolhermos o código referente a versão do vosso fórum iremos agora adiciona-lo em nossa gestão de códigos Js, para isso acederemos há:
Painel de controle -> Módulos -> HTML & JAVASCRIPT -> Gestão dos códigos Javascripts
Clicaremos no botão escrito "Criar um código java Script", e então colocaremos estas propriedades:

Titulo O que desejar, não irá interferir no código.

Investimento Deve estar marcada a opção "Nos tópicos".

Código Javascript O qual estudamos no passo anterior.

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Adicionar Share nos tópicos