[TUTORIAL] Widget "Like/Tweet/+1" para tópicos

Ir para baixo

[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Empty [TUTORIAL] Widget "Like/Tweet/+1" para tópicos

Mensagem por Convidad 10.06.12 19:04


[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Statistiques

Widget "Like/Tweet/+1" para tópicos


Com um código Java script vamos reproduzir nos tópicos e mensagens um botão Share para publicar informações de uma seção ou mensagem nas principais redes sociais.


--> Tutoriais <--
Widget "Like/Tweet/+1" para tópicos


[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Act_bottom Segue o tutorial para a tua versão, pois cada versão tem um código e tutorial diferente. Referimos-nos ás versões: PHPBB 2, PHPBB 3, PunBB e Invision

PHPBB3 & Invision

- Criar e administrar as páginas:
Com essa opção será possível adicionarmos o Java script ao fórum sem muitos problemas, mas lembre-se que antes de publicar essa página .JS, pré-visualize a mesma.

Painel de controle ->> Módulos ->> HTML & JavaScript ->> Gestão dos códigos JavaScripts ->>

[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Painel13
[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110111Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110210Seta Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110310Seta Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110410Seta Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Agora que conhece a função de Java script, vamos proceguir no segundo passo com o código.

- Modificações no código java script:
Para que tenha efeito, vamos compreender alguns pontos do código que usaremos. Verifique todos os pontos com o máimo de atenção para não cometer erros.

jQuery(document).ready(function(){jQuery('.buttons').after('<p><iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&amp;href=ENDEREÇO_DO_FORUM;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe><iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&amp;count=vertical&amp;id=twitter_tweet_button_0&amp;lang=en&amp;original_referer=ENDEREÇO_DO_FORUM;text=NOME_DO_FORUM;url=ENDEREÇO_DO_FORUM" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe><g:plusone size="tall"></g:plusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></p>')});
Verde: Classe ao qual o botão vai aparecer. Ou seja, determinando a classe, o botão share do Twitter vai aparecer onde tem uma classe .buttons.

Como observamos no termo em verde, você estará atribuíndo o botão diretamente a classe "Buttons", se desejar colocar nos tópicos, você precisa colocar p.author e na página JS, marque em Investimento a opção Nos tópicos (Nos temas) e confirme a mudança.

Vermelho: Deverá colocar o link de seu fórum, incluindo http:// e www.

Código pronto:
Código:
jQuery(document).ready(function(){jQuery('.buttons').after('<p><iframe src="http://www.facebook.com/plugins/like.php?locale=pt_BR&amp;href=http://www.shift.forumactif.com;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe><iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&amp;count=vertical&amp;id=twitter_tweet_button_0&amp;lang=en&amp;original_referer=http://www.shift.forumactif.com;text=Shiftactif;url=http://www.shift.forumactif.com" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe><g:plusone size="tall"></g:plusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></p>')});


  • Não resultou. Existe outro local para adicionar o código?
    Sim. Neste momento poderá recorrer as páginas HTML:

Spoiler:



PunBB

[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Warning Para que possamos prosseguir com o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja: Modificar os templates do fórum

- Aceder ao template que iremos modificar:
Em Painel de controle :azul: Visualização :azul: Templates :azul: Geral :azul: viewtopic_body :azul:

- Alterar o código:
Na versão PunBB, procure com atenção por esta parte:
Código:
<div class="post-options">
                     {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}

E altere o código por este:
<div class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
<br /><iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&amp;href=ENDEREÇO_DO_FORUM;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe><iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&amp;count=vertical&amp;id=twitter_tweet_button_0&amp;lang=en&amp;original_referer=ENDEREÇO_DO_FORUM;text=NOME_DO_FORUM;url=ENDEREÇO_DO_FORUM" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe><g:plusone size="tall"></g:plusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></br>

Vermelho: Deverá colocar o link de seu fórum, incluindo http:// e www.


PHPBB2
- Aceder ao template que iremos modificar:
Em Painel de controle :azul: Visualização :azul: Templates :azul: Geral :azul: viewtopic_body :azul:

- Alterar o código:
Na versão PHPBB2, procure com atenção por esta parte:
Código:
<table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
Altere o código por este:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}<br /><iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&amp;href=ENDEREÇO_DO_FORUM;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe><iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&amp;count=vertical&amp;id=twitter_tweet_button_0&amp;lang=en&amp;original_referer=ENDEREÇO_DO_FORUM;text=NOME_DO_FORUM;url=ENDEREÇO_DO_FORUM" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe><g:plusone size="tall"></g:plusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></br>
</td>
</tr>
</table>

Vermelho: Deverá colocar o link de seu fórum, incluindo http:// e www.


© Fórum dos Fóruns & Sasuky!


[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Widget "Like/Tweet/+1" para tópicos
Anonymous
Convidad
Convidado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos