[TUTORIAL] Avaliação positiva de uma mensagem

Sempre gostamos de criar novas maneiras para aumentar a interatividade nas postagens, e dessa vez, você aprenderá através do tutorial a colocar um botão de avaliação positiva nas mensagens, onde cada clique representará o mesmo que "Curtir", como estamos acostumados na rede social Facebook.

--> Tutoriais, dicas e astúcias <--
Avaliação positiva de uma mensagem

Versão PunBB

1º - Localizar a template:
Painel de Controle :seta2: Visualização :seta2: Templates :seta2: Geral :seta2: viewtopic_body :seta2: (:editar:) Editar

2º - Adicionar o código:

Adicionem o seguinte script abaixo na última linha da template:

Código:

<style type="text/css">div.ddvote{float:right;margin-left: 20px; height:20px;line-height:20px;font-size:12px;font-weight:bold;}</style>
<script type="text/javascript">
//<![CDATA[
var CopyrightNotice = 'Professional like/dislike bar for forumotion IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
    var plus='0';

    var vplus='<img style="margin-right:3px" title="Like" src="http://i45.servimg.com/u/f45/14/85/89/99/plus_110.png" />';
   
    var y=$(x[i]).find('.vote-button a').get();
    for (j=0; j<y.length; j++) {
        if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
    }
    var y=$(x[i]).find('.vote-bar')[0];
    if (y) {
        var z=y.title.split(' ');
        var pct=parseInt(z[3].replace(/%/,''))/100;
        var num=parseInt(z[4].replace(/\(/,''));
        plus=String(Math.round(num*pct));
    }
    $(x[i]).replaceWith('<div class="ddvote"> ' + vplus + plus + ' <div>');
}
//]]>
</script>

3º - Remover o bloco de votação:

Procure pelas seguintes linhas no template e remova-as: (busque apenas a primeira linha, depois veja até onde deletar)

Código:

<!-- BEGIN switch_vote_active -->
    <div class="vote gensmall">
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
    <!-- END switch_vote -->
    <!-- BEGIN switch_bar -->
        <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
        <!-- BEGIN switch_vote_plus -->
            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
        <!-- END switch_vote_plus -->
        <!-- BEGIN switch_vote_minus -->
            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
        <!-- END switch_vote_minus -->
        </div>
    <!-- END switch_bar -->
    <!-- BEGIN switch_no_bar -->
        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
    <!-- END switch_no_bar -->
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
    <!-- END switch_vote -->
    </div>
<!-- END switch_vote_active -->

4º - Substituir outra linha da template:

Agora procure pela seguinte linha:

Código:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>

Substitua-a por esta:

Código:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead clearfix"{postrow.displayed.THANK_BGCOLOR}>

5º - Adicionar o bloco de votação:

Agora, exatamente abaixo da linha que acabou de substituir, cole o código abaixo:

Código:

<!-- BEGIN switch_vote_active -->
    <div class="vote gensmall">
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
    <!-- END switch_vote -->
    <!-- BEGIN switch_bar -->
        <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
        <!-- BEGIN switch_vote_plus -->
            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
        <!-- END switch_vote_plus -->
        <!-- BEGIN switch_vote_minus -->
            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
        <!-- END switch_vote_minus -->
        </div>
    <!-- END switch_bar -->
    <!-- BEGIN switch_no_bar -->
        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
    <!-- END switch_no_bar -->
    <!-- BEGIN switch_vote -->
        <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
    <!-- END switch_vote -->
    </div>
<!-- END switch_vote_active -->

6º - Salvar e publicar o template:

Ao terminar, clique em Salvar, na parte inferior da página e depois, no mesmo local em que clicou para ir até a edição do template, clique em Publicar ()

Observações:

:seta2: Sim, eu poderia ter dado o template pronto para que vocês apenas o substituíssem. Mas não o fiz por duas razões.

1) Seguindo o tutorial, você sabe exatamente o que fez para obter o resultado desejado, caso contrário, estaria confiando no código fornecido por mim sem saber as substituições e edições que fiz.

2) Muitos membros já podem ter feito alguma alteração na template através de outro tutorial ou modificação própria, então eu acabaria estragando as mesmas...

:seta2: Já fiz o tutorial utilizando a imagem que pediram, do FdF Inglês.

Versão Phpbb3 & Invision

1º - Localizar a gestão dos códigos Javascript:
Painel de Controle :seta2: Módulos :seta2: Gestão dos códigos JavaScript :seta2: Criar um novo Javascript

2º - Criar o código:

Título: Avaliação positiva de uma mensagem
Investimento: Em todas as páginas
Código Javascript:

Phpbb3:

Invision:

:seta2: Clique em Confirmar.

:seta2: Resultado final:

Agora, acesse algum tópico ou mensagem no fórum que tenha sido criado por outro membro e veja o resultado em uma de suas postagens (com já 1 voto positivo computado):

(Desconsidere a versão de exemplo)

---

© Fórum dos Temas & Heisenburg