18/06/2017

FACEBOOK | Page Plugin | Modo fácil e rápido




TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC  |  WA 4


Como muitos já sabem o Facebook disponibiliza vários plugins para implementar em seu site através do Facebook Developers.

https://developers.facebook.com/


Hoje iremos falar do Page Plugin (Plugin de Página) . Algo semelhante a isto:




 Para configurar seu Plugin Page acesse este link: https://developers.facebook.com/docs/plugins/page-plugin , configurar a seu gosto e  gerar o código e aplicar no WebAcappella

Apesar de você pode a configurar a seu gosto, vou falar neste post a maneira mais usada em websites.





 Acima a imagem mostra os campos os quais iremos personalizar . Vamos comentar campo a campo.

URL DA PÁGINA DO FACEBOOK: Neste campo você vai inserir a URL da FANPAGE




GUIA: Neste campo se deixar como timeline, serão mostrados as postagens realizados na linha do tempo da  página. As postagens vão aparecer dentro da altura determinada

Você pode usar para ser mostrado a linha do tempo, eventos e ou mensagens.

Portanto não fica uma visualização muito legal no website. E se você tem intenção de usar este plugin no rodapé, usando o timeline , eventos ou mensagens fica pior ainda.

Aconselho limpar esse campo deixando-o em branco.

Observe na imagem abaixo que removendo a visualização ficou bem mais agradável


LARGURA: Neste campo você informa a largura que deseja para o plugin page. Mínimo de 180 e máximo de 500 px. Eu gosto muito de utilizar 500 px

ALTURA: Neste campo você informa a altura que deseja para o plugin page. Minimo de 70 px
Caso você queira que os rostos de amigos apareçam sem que mostre uma barra de rolagem no plugin, procure utilizar 300 px na altura


USAR CABEÇALHO PEQUENO:  Caso você assinale esta opção será cortado ao meio a altura da imagem da capa da sua fanpage.

OCULTAR FOTO DA CAPA: Se assinalar esta opção não será mostrado a imagem da capa da fanpage; o que não fica muito bonito.

ADAPTAR À LARGURA DO CONTÊINER DO PLUGIN: Deixe esta opção assinalada pois assim será forçado o ajuste na sua área de implementação do código no seu site.

MOSTRAR ROSTOS DOS AMIGOS: Caso queira que seja mostrado o rosto dos amigos deixe esta opção marcada. Esta opção é interessante pois por exemplo: Se você está logado no Facebook e visita um website onde tem o plugin page do Facebook implantado. Ali serão mostrados a quantidade e o rostos de alguns amigos seu que já curtiram a Fanpage. Dependendo dos amigos abre até uma curiosidade de se visitar a fanpage.

Após tudo configurado clique em Obter código


Você pode usar o código fornecido em SDK do JavaScript  ou o código de implantar como iFrame.
Aconselho a primeira opção.

Serão mostrado dois códigos.

O 1º seria para ser inserido no head do website ou da página do seu website a qual seria implantado o plugin




E o 2º seria para ser inserido no local da página do seu website onde é para aparecer o plugin page finalizado.



Portanto você pode simplesmente utilizar os dois código juntos na área a qual deseja que o plugin page apareça. Inserindo o primeiro código e o segundo logo em seguida na área de implementação.

Então irei mostrar desta forma como implementar tanto no Webacappella RC como no Webacappella 4


Então no caso usaremos como exemplo os códigos para implementar o plugin page da Fanpage do Webacappella Show o qual juntando os dois códigos, o código a implementar fiaria assim:



<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>


IMPLEMENTANDO NO WA 4


Na página do site em que deseja que o plugin page aparece acione a opção: INSERIR >> CÓDIGO HTML



E cole o código na área conforme imagem


Depois clique na guia da régua e configure a largura e altura com os mesmos valores utilizados na criação do plugin.


Depois só arrastar a área do código para o local desejado na página do seu site

Para ver o exemplo on line clique aqui.

IMPLEMENTANDO NO WA RC


Na página do site em que deseja que o plugin page aparece insira um subbox dentro do box onde será implementado o código




Depois insira o pelo menu a área de html




Porém iremos fazer uma pequena alteração no código para ficar melhor no WARC.


Como pode observar abaixo, inserimos <center> no início para que o plugin page centralize dentro da área onde foi inserido o código.


<center>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>




E colamos o código na área de implementação HTML a qual definimos na página do website.





Para ver on line nosso exemplo clique aqui.


Um detalhe importante é que dependendo dos scripts utilizado em seu site possa ser que em vez de usar os dois códigos fornecidos pelo Facebook Developers somente na área html; tenha que separar e utilizar o primeiro no head da página ou até mesmo do website.




Related Posts Plugin for WordPress, Blogger...