[TUTORIAL] Colocando botão "Curtir" nas mensagens

O Facebook disponibilizou-nos o botão “Curtir” para ser adicionado junto ao seu fórum mas, veja nesse tutorial como poderá integrar isso. Quando adicionar em seu fórum o efeito será bem simples: o visitante/membro poderá marcar que gostou de seu conteúdo que aparecerá na lista dele no mural do Facebook indicando que ele gostou do mesmo.

Só será possível adicionar nas versões Phpbb3 e Invision.

--> Tutoriais dicas, e astúcias <--
Colocando botão "Curtir" nas mensagens

1º - Criar uma página HTML personalizada:
Vamos ceder a: Painel de controle ->> Módulos ->> HTML ->> Gestão das páginas HTML ->> Adicionar uma página HTML ->>

Título - Neste campo terá de adicionar um título para a sua página HTML, servirá para identificar a sua página na lista de páginas HTMl, do Painel de Cntrole, e fará também parte do endereço da página. Por exemplo: Título: Forumeiros Endereço da página: .../forumeiros-h1.html

ATENÇÃO: A designação que aparece à frete do nome da página, no endereço, modifica consoante a número da página criada. Se for a primeira página a ser criada, então será -h1, se for a quarta página a ser criada será -h4, etc.

Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim", a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé (barra de links úteis). Uma das vantagens desta escolha, é que terá de personalizar menos o seu texto, por exemplo, pois, poderá utilizar as classes CSS, do seu próprio Fórum, e também não necessita de criar uma estrutura HTML, apenastem de adicionar o código de conteúdo. Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.

Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)

Código HTML - Neste campo, terá de adicionar o conteúdo da sua página HTML, se colocou não na opção 2, então terá de criar uma estrutura de uma página HTML.

Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".

2º - Configuração e administração do código:

jQuery(document).ready(function() {
jQuery('p.author').after('<iframe src="https://www.facebook.com/plugins/like.php?href=ENDERECO-DO-FORUM&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ');
});

Azul: Endereço do seu fórum. Exemplo: https://ajuda.forumeiros.com/
Vermelho: Largura do código que será exibido quando os tópicos forem postados. Neste código é possível visualizar quantas pessoas curtiram, caso queira ocultar e deixar apenas o botão basta diminuir o valor.
Verde: Altura do objeto mostrado. Neste caso poderemos determinar a distância entre a mensagem e o botão "Curtir" do facebook.

Para aplicar, vamos ter que usar o endereço da mesma e colocar na descrição do site.
Painel de controle ->> Geral ->> Fórum ->> Configuração ->>
Vamos procurar pelo campo "Descrição do site" e adicionar um Script.

<script src=/hY-></script>

Ao lugar do "Y" apenas coloque o número da página que criamos com o código do botão curtir.

Exemplo:

Código:

<script src=/h1-></script>

• Resultado:
  
  

--> Tutoriais dicas, e astúcias <--
Colocando botão "Curtir" nas mensagens

• A posição do perfil nas mensagens tem que estar em "Direita"?
  Não! Esse código fixa-se apenas nas mensagens, logo se colocar à posição do perfil e mensagens à esquerda não fará diferenças ao ponto de danificar o botão do Facebook.

---

© Fórum dos Fóruns & Needke

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Colocando botão "Curtir" nas mensagens