Início[TUTORIAL] Widget "Like/Tweet/+1" para tópicos
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Widget "Like/Tweet/+1" para tópicos
por Convidad 10.06.12 19:04
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Statistiques](https://2img.net/i/fa/admin/icones/big_ico/statistiques.png) | 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
Widget "Like/Tweet/+1" para tópicos
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | 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
1º - 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](https://i.servimg.com/u/f48/15/88/72/83/painel13.png)
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110111](https://i.servimg.com/u/f36/11/66/91/15/110111.gif) |  Título - Correspondente ao nome da página JavaScript/jQuery que será criada. |
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110210](https://i.servimg.com/u/f36/11/66/91/15/110210.gif) | 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 110310](https://i.servimg.com/u/f36/11/66/91/15/110310.gif) | Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery. |
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos 110410](https://i.servimg.com/u/f36/11/66/91/15/110410.gif) | 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.
2º - 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.
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.jQuery(document).ready(function(){jQuery('.buttons').after('<p><iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&href=ENDEREÇO_DO_FORUM;send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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&count=vertical&id=twitter_tweet_button_0&lang=en&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>')});
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&href=http://www.shift.forumactif.com;send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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&count=vertical&id=twitter_tweet_button_0&lang=en&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:
- 1º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Untitl13](https://i.servimg.com/u/f11/11/81/27/88/untitl13.png)
Título - Pode colocar o título que quiser para a página, não irá afetar em nada. Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente. Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código. Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Untitl14](https://i.servimg.com/u/f11/11/81/27/88/untitl14.png)
Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Untitl15](https://i.servimg.com/u/f11/11/81/27/88/untitl15.png)
2º - Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.
Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações
Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Img_310](https://i.servimg.com/u/f85/12/75/28/98/img_310.png)
O código será:
Por exemplo, no Shiftactif:<script src="ENDERECO-DA-PAGINA-HTML"></script><script src="http://shift.forumactif.com/h1-codigo"></script>
PunBB
![[TUTORIAL] Widget "Like/Tweet/+1" para tópicos Warning](https://2img.net/i/fa/admin/icones/big_ico/warning.png) | 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 |
1º - Aceder ao template que iremos modificar:
Em Painel de controle :azul: Visualização :azul: Templates :azul: Geral :azul: viewtopic_body :azul:
2º - 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&href=ENDEREÇO_DO_FORUM;send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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&count=vertical&id=twitter_tweet_button_0&lang=en&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
1º - Aceder ao template que iremos modificar:
Em Painel de controle :azul: Visualização :azul: Templates :azul: Geral :azul: viewtopic_body :azul:
2º - 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>
<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&href=ENDEREÇO_DO_FORUM;send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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&count=vertical&id=twitter_tweet_button_0&lang=en&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!
| | 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 |
Convidad- Convidado
Tópicos semelhantes» widget "like/tweet/+1"
» [TUTORIAL] Tópicos favoritos em widget
» [TUTORIAL] Personalização do widget "tópicos recentes"
» Codigo do widget padrão like/tweet/+1
» [TUTORIAL] Mover um Widget para o topo do fórum
» [TUTORIAL] Tópicos favoritos em widget
» [TUTORIAL] Personalização do widget "tópicos recentes"
» Codigo do widget padrão like/tweet/+1
» [TUTORIAL] Mover um Widget para o topo do fórum
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos