Implementando fotos do Instagram com Intagme

Em outro artigo eu expliquei uma forma de incluir as fotos do Instagram  diretamente no seu site.

Se você não leu o artigo clique aqui.

O outro método é utilizando é utilizando o SnapWidget. Hoje vamos usar o Intagme.

O Intagme é muito fácil de usar e também é grátis.

Você só precisa do nome da conta do Instagram o qual vai implementar no site.


Acesse o site http://www.intagme.com/

A página está em Inglês, se necessário traduza clicando com o botão direito do mouse em qualquer parte  do site e depois selecione a opção de tradução (isto no Crhome)

Em Widget tipo você informa se deseja do tipo slider ou Grade de fotos. No exemplo vou utilizar a Grade, pois quero no site uma galeria.

Em Thumnail Size você Informa o tamanho da cada foto em Pixels. Vou definir como 100px.


Disposição você informa o númer ode fotos em toda área seguida para baixo. O máximo é 60. Se minha área na página do site disponível  tem a largura de 860 px. e altura de 328 px para dar um visual bacana vou por 2  fileiras com 8 fotos. sendo 8 x 3

Em photo border vou definir se quero borda em cada foto ou não. Pus que sim.

Em cor do fundo deixei em branco para que fique transparente. Caso deseje uma cor informe o código da cor.

Já em Foto Preenchimento , que é a quantidade de espaço entre cada foto. Se estou gastando em cada fileira 800 px com as fotos vou por um espaço de 5 px entre cada uma.

E por último vou dizer que sim para que adicione botões de compartilhamento em cada foto. Afinal, hoje em dia a moda é compartilahr..rs


Você pode ter uma visualização prévia clicando em Visualização.

Para implementar no seu projeto Webacappella é muito simples. Clique em Obter Código

Marque todo o código na tela que aparecer, copie.

Agora no Webacappella, na página que irá incluir as fotos do Instragram clique use da opção INSERIR >> CÓDIGO HTML  e cole o código copiado.

Prontinho, agora basta publicar o site

Insira ícones flutuantes para redes sociais na lateral do site

Hoje é indispensável que um site tenha interação com redes sociais; mesmo que seja com links de redirecionamento.

Diante disto estarei passando um código simples de se aplicar no site WebAcappella.


Código:

<a href="URLREDESOCIAL" style="position: fixed; left: DISTANCIALATERALpx; top: DISTANCIATOPpx;" target="_blank">
<img border="0" heigth="ALTURAICONE" src="URLICONE" title="TITULO" width="LARGURAICONE" /></a>



Entendendo o código:

Os techos em vermelho devem ser personalizados da seguinte forma:


URLREDESOCIAL: Inclua a URL da rede sozial desejada,
DISTANCIALATERAL: A distancia em pixel que o ícone irá aparecer a partir do lado equerdo
DISTANCIATOP: A distância em pixel que o ícone irá aparecer a partir do topo
ALTURAICONE: A altura em pixels do ícone referente a rede social
URLICONE: A url referente onde o ícone está hospedado
LARGURAICONE: A largura em pixels do ícone referente a rede social
TITULO: Coloque uma descrição para o redirecionamento


Para se usar mais de uma rede social repita o código modificando apenas as informações referente a rede social desejada e as informações do posicionamento.


Passo a passo:

Irei Fazer um passo a passo suponde que usarei as redes sociais: Facebook, Google+, Youtube

1) Cração dos ícones.

Crie ícones através de um programa de sua preferência ou utilize ícones baixados da internet.  O importante que todos tenham a mesmas dimensões.

Então utilizei no exemplos ícones que já tinha nas dimensões 50 x 50 pixels

  

 Criei na minha hospedagem, dentro de public_html a pasta "img" e fiz upload dos ícones para dentro desta pasta

Na verdade hospedei para o seguinte endereço na internet.

http://www.webacappellashow.com.br/desktop/img


Então cada imagem  possui sua respectiva url sendo:



http://www.webacappellashow.com.br/desktop/img/facebook.png



http://www.webacappellashow.com.br/desktop/img/googleplus.png



http://www.webacappellashow.com.br/desktop/img/youtube.png


Então ja tenho a url dos ícones.


2) Personalizando o código

Bom, no exemplo vou querer que os ícones apareçam na ordem

1º FacebooK
2º Google
3º Youtube


E vou querer que comecem numa distância de 200 px do topo.

Como eu sei que as dimensões dos ícones são 50 x 50 pixels ALTURAICONE = 50 e LARGURAICONE = 50



No primeiro código referente o Facebook, irei substituir DISTANCIATOP por 200.

E como eu desejo que a distância da lateral seja 5 pixels substituo em todos os códigos DISTANCIALATERAL por 5

Para não ficar um amonturado de ícones vou querer que a distância entre eles sejam também de 5 pixels. Sendo que a altura de cada pixel que estou usando é 50px e o primeiro começa em 200. Os códigos referente ao Google e Youtube deverei fazer a seguinte soma:

Para iniciar com Facebook DISTANCIATOP = 200
Para o Google DISTANCIATOP será 200 + 5 (distancia entre eles) + 50 (tamanho do icone) = 255
Para o Youtube DISTANCIATOP será  255 + 5 (distancia entre eles) + 50 (tamanho do icone) = 310

Agora basta trocar URLREDESOCIAL pela url de cada rede social que desejo o redirecionamento


Para o código do facebook:
<a href="https://www.facebook.com/webacappellashow" style="position: fixed; left: 5px; top: 200px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/facebook.png" title="Facebook" width="50" /></a>

Para o código do Google:
<a href="https://plus.google.com/communities/107295316812252444739" style="position: fixed; left: 5px; top: 255px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/googleplus.png" title="Google" width="50" /></a>

Para o código do Youtube
<a href="https://www.youtube.com/watch?v=y4_2k8991qE" style="position: fixed; left: 5px; top: 310px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/youtube.png" title="Youtube" width="50" /></a>




Então o código pronto para ser incluído no Webacappella conforme o exemplo ficou da seguinte maneira:

<a href="https://www.facebook.com/webacappellashow" style="position: fixed; left: 5px; top: 200px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/facebook.png" title="Facebook" width="50" /></a>
<a href="https://plus.google.com/communities/107295316812252444739" style="position: fixed; left: 5px; top: 255px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/googleplus.png" title="Google" width="50" /></a>
<a href="https://www.youtube.com/watch?v=y4_2k8991qE" style="position: fixed; left: 5px; top: 310px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/youtube.png" title="Youtube" width="50" /></a>



Agora no Webacappella você pode adicionar para cada página individualmente ou inserir na matriz do seu projeto.

Basta usar a opção INSERIR >> CÓDIGO HTML  e colar o código alterado no campo

Independente de onde o código estiver posicionado na página o resultado não alterará

FACEBOOK | Page Plugin | Modo rápido

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. Algo semelhante a isto:

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

O objetivo deste artigo não é ensinar a configurar o Page Plugin, e sim passar uma maneira mais rápida e fácil e que fique em nossa biblioteca para futuras consultas.

Uma vantagem de fazer como serpa posto neste artigo é o fato de você poder inserir na sua página Plugin Page de várias Fanpages

O que é importante lembrar:

O valor em pixels para altura deve ser no mínimo 70
O valor em pixels para largura deve ser no mínimo 180 e no máximo 500


Os trechos que você deve alterar nos códigos abaixo informados estarão em vermelho.

Onde estiver altura substitua pelo valor em pixel da altura desejada e onde estiver largura substitua pelo valor em pixels da largura desejada, sempre respeitando o dito acima.  O trecho URL substitua pela URL da sua "FANPAGE". E o trecho TITULO pelo título da sua Fanpage.

Esclarecendo, este plugin funciona para url da Fanpage, e não a URL do Website.

1) Clique aqui para ver todos os modelos

2) Após ter escolhido o modelo desejado procure na lista abaixo o código referente e altere os trechos em vermelho conforme instruções dadas acima.


MODELO 01

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 02

Código

<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.4&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 03

Código

<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.4&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 04

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 05

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>



MODELO 06

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 07

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>


MODELO 08

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>



MODELO 09

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>



MODELO 10

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>



MODELO 11

Código

<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.4&appId=1438711606356463";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="URL" data-width="LARGURA" data-height="ALTURA" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="URL"><a href="URL">TITULO</a></blockquote></div></div>



3) Agora no WebAcappella, na página onde deseja incluir o Page Plugin use a opção INSERIR>>CÓDIGO HTML clique no ícone da régua e configure a largura e altura. Usando os mesmos valores que você utilizou no código.

Isto servirá para você ter referência da área ocupada e posicionar melhor na sua página.

Ainda nesta opção clique no ícone de código e cole o código do Plugin Page modificado por você.

.Ajuste na posição desejada em sua página e pronto.

Boa semana pra todos.

REDES SOCIAIS | OPEN GRAPH FACEBOOK | Painel administrativo para a imagem a ser compartilhada

REDES SOCIAIS

OPEN GRAPH FACEBOOK

 Painel administrativo para a imagem a ser compartilhada

Olá turma do bem!!

Anteriormente eu postei um artigo o qual explicava sobre a utilização do OPEN GRAPH FACEBOOK no site WebAcappella. Este recurso é muito interessante pois quando visitante do site  clica no botão compartilhar, é postado uma propaganda atraente no seu perfil do Facebook e ou até mesmo em um grupo o qual ele determinar.

Uma maneira interessante de divulgação do site não é?

Se você não leu este artigo basta clicar aqui.

Eu particularmente em todo site que desenvolvo utilizo deste recurso.

Então pensei, o meu cliente pode utilizar deste recurso para postar uma imagem de uma promoção, ou de um lançamento sem a necessidade de minha intervenção; então porque não ele ter em sua área restrita uma opção para isto?

Pois este é o assunto do artigo de hoje. Uma área para que o cliente possa alterar esta imagem de uma forma muito simples.

O que esta solução faz?

• Permite enviar um arquivo de imagem e renomeia com o nome correto e a redimensiona nas medidas corretas.

Mãos a obra:

BAIXANDO OS ARQUIVOS

Primeiro você cria uma pasta no public_html da sua hospedagem a qual receberá os arquivos necessários, no meu caso criei uploadfacebook.


Baixe os arquivos necessários clicando aqui

Descompacte o arquivo baixado e poste o conteúdo da pasta dentro da sua pasta criada no public_html do site. No meu caso dentro da pasta uploadfacebook

CONFIGURANDO 

MPara o correto funcionamento no site a ser aplicado vamos editar dois arquivos baixados:

• index.html
• upload.php

Eu costumo usar o notepad++ para editar os arquivos. Caso queira baixá-lo gratuitamente clique aqui.


É importante frisar o nome da imagem que será utilizada para ser exibida no Facebook toda vez que for compartilhada. Eu nomiei como compartilharface.png .  Caso opte por alterar o nome e tipo de arquivo preste muita atenção nos locais que se deve fazer as alterações.

1) Edite o arquivo index.html e salve após alterações

Na linha 11 altere o caminho na sua hospedagem onde se encontra a imagem a ser compartilhada

"caminho/nomedaimagem"

No meu caso que estou utilizando um domínio pra teste ficará
"http://www.bhinf.com.br/uploadfacebook/imagens/compartilhaface.png"


2) Edite o arquivo upload.php e salve após alterações

Faça alterações nas seguintes linhas:

Linha 29 : Informe o nome da imagem que será usado para ser compartilhado

No meu caso "compartilhaface"

Linha 33 : Informe a extensão que será usada

No meu caso "png"

Linha 35: Informe  a medida da largura da imagem a ser utilizada

No meu caso eu prefiro as imagens maiores então utilizei 1200

Linha 36: Informe a medida da altura da imagem a ser utilizada

No meu caso seguindo o padrão de imagem a ser compartilhada que pode ser (1200 x 628 pixels) ou (200 x 200 Pixels) a minha vai ser 628

* Nota: No Facebook para melhor ajuste da imagem , a mesma deve ter as dimensões de 1200 x 628 pixels ou 200 x 200 pixels

Linha 37: Informe a extensão que a imagem será convertida caso o usuário envie outro formato de imagem

No meu caso "png"

Linha 85: Informe o caminho e nome da imagem a ser compartilhada.

No meu caso: http://www.bhinf.com.br/uploadfacebook/imagens/compartilhaface.png


* Nota: o arquivo UPLOAD.PHP está todo comentado. Se você tiver conhecimento altere outras opções a seu gosto.

É importante citar que este arquivo apenas sofreu alterações por mim para atender esta necessidade. O código não foi desenvolvido por mim.


APLICANDO NO WEBACAPPELLA

Antes de prosseguirmos com esse passo é importante que se entenda como funciona a aplicação do OPEN GRAPH FACEBOOK  no Webacappella para isto clique aqui e leia o artigo referente ao assunto.

Se você já leu, estamos prontos para começar.

Então nos códigos meta property inseridos no head das propriedades do site faremos algumas alterações a seguir:

Em <meta property="og:image" content="URLDAIMAGEM" /> 

Substitua a URLDAIMAGEM pelo mesmo caminho usado neste artigo, no meu caso
"http://www.bhinf.com.br/uploadfacebook/imagens/compartilhaface.png" resultando:
<meta property="og:image" content="http://www.bhinf.com.br/uploadfacebook/imagens/compartilhaface.png" />

Em <meta property="og:image:type" content="image/TIPOIMAGEM" /> informe a extensão da imagem utilizada na configuração do seu upload.php no meu caso "png" resultando:  <meta property="og:image:type" content="image/png" />


Em <meta property="og:image:width" content="LARGURA"> substitua a palavra largura pelo valor da largura utilizado no seu arquivo upload.php, no meu caso "1200" resultando <meta property="og:image:width" content="1200">


Em <meta property="og:image:height" content="ALTURA"> substitua a palavra ALTRURA pelo valor da altura  utilizado no seu arquivo upload.php, no meu caso "628" resultando <meta property="og:image:height" content="628">

As demais META PROPERT configure conforme explicado no outro artigo.

Feito isso agora vamos inserir a aplicação de envio da imagem em nosso site. Para isso vamos fazer o mesmo que os sistemas de adm disponíveis no mercado para Webacappella. Vamos inserir um frame

No Webacappella opção INSERIR>> FRAME  opcionalmente informe um título para o frame, marque "Ativar a pré visualização" Selecione "Link para um endereço na internet" e no ultimo campo informe a url da pasta a qual você publicou os arquivos deste artigo.

No meu caso : http://www.bhinf.com.br/uploadfacebook

Não é preciso dizer que os fundos, bordas você incrementa da forma que desejar.

Eu gosto de deixar as coisas para meu cliente bem mastigadas, devido o fato que ele é o mais leigo da pirâmide. Pois se tivesse o conhecimento ele mesmo faria o site dele ..rss..

Então eu formatei da seguinte forma (figura abaixo)

COMPLEMENTANDO

Note-se na imagem acima dois botões ainda não citados "VALIDAR" ,  "TESTAR"

BOTÃO "VALIDAR"

Este botão redireciona para o link do debug do Facebook onde é feita a verificação da aplicação OPEN GRAPH

Para insto inclua um botão no Webacappella utilizando da função INSERIR >> BOTÃO, formate o botão ao seu gosto; configure "link para um endereço da internet";" link configure para uma nova janela"
e no último campo inclua o link abaixo substituindo o texto em vermelho pelo seu endereço do website.

https://developers.facebook.com/tools/debug/og/object?q=www.bhinf.com.br/blog_webshow/bannerconefeitogif/

Após redirecionado faz-se necessário clicar em

BOTÃO "TESTAR"

Este botão é justamente para testar se já será carregada a nova imagem.
Da mesma forma que feito para o botão VALIDAR , insira um botão para o TESTAR. Porém o último campo informe o link abaixo substituindo o texto em vermelho pelo seu endereço de website

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.bhinf.com.br/blog_webshow/bannerconefeitogif/%2F





CONCLUINDO

Agora só resta você terminar de personalizar e executar os testes finais


Para você ver o exemplo funcionando on line clique aqui e utilize a senha "senha" para logar.

utilize a senha = senha

** No caso da imagem nova não funcionar, sugiro verificar os erros descritos pelo link redirecionado pelo botão VALIDAR.

REDES SOCIAIS | Facebook Open Graph | Botão compartilhar no Facebook personalizado no seu site WebAcappella

Olá galera do bem!

Existem certos detalhes que nos tempos de hoje não podem faltar em um website. Um deles é a interação do seu site com redes sociais. O Facebook hoje é considerada a maior rede social de todos os tempos, e uma porta para atrair novos clientes.

Sabe aquele ícone "Compartilhar" do Facebook que se vê em vários sites? Pois então; se você clica nele o que acontece? Simplesmente você compartilha para todos seus amigos, ou todos de um grupo que você participa.

Imagina a importância que esse ícone (botão) tem; o visitante do seu site divulgando seu site pra você.

Porém uma vantagem pode se transformar em transtorno se não estiver bem trabalhada. Pois, se o site não estiver configurado com Facebook Open Graph, nem sempre as imagens e textos divulgados no Facebook causam boa impressão.

Este é o tema desse post: Aplicar o Facebook OpenGraph no seu site WebAcappella inserindo uma imagem personalizada. Existem métodos mais complexos que ao decorrer do tempo estarei postando aqui no blog.

Então o primeiro passo é incluir o código abaixo no head do seu site. Mas calma, não vá copiando e colando, vamos entender  e fazer as alterações devidas primeiro.

<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="URLDAIMAGEM" />
<meta property="og:image:type" content="image/TIPOIMAGEM" />
<meta property="og:image:width" content="LARGURA">
<meta property="og:image:height" content="ALTURA">
<meta property="og:site_name" content="NOMEDOSEUSITE">
<meta property="og:title" content="TITULOASERPOSTADO" />
<meta property="og:description" content="DESCRIÇÃO" />
<meta property="og:url" content="URLSITE" />

ENTENDENDO O CÓDIGO E FAZENDO AS ALTERAÇÕES

<meta property="og:locale" content="pt_BR" />

Nessa tag definimos basicamente o local/idioma da publicação. A documentação do Open Graph recomenda optarmos pelo idioma em qual o site está escrito. Mas sei de muita gente que opta em usar "en_us"

<meta property="og:type" content="website" />

Nesta você define o tio do seu website. O valor padrão é "website", Mas pode ser alterada de acordo com o conteúdo; por exemplo, se for um artigo pode-se colocar a palavra "article". No nosso caso vamos manter "website"

<meta property="og:image" content="URLDAIMAGEM" />

Nesta você informa o caminho da imagem a aqual deseja ser compartilhada. Eu, particularmente gosto de utilizar imagens maiores (1200 x 628 px) Mas o Facebook também aceita imagens de 200 x 200 px.

Portanto com um programa da sua escolha crie uma imagem em uma das dimensões citadas acima.

Neste exemplo eu criei uma de 1200 x 628px . 

Após criado a imagem hospede a mesma em uma pasta dentro da hospedagem do seu site. O caminho da imagem será o local onde está postada seguido do nome da mesma. Eu salvei a imagem deste exemplo como compartilhaface.png dentro de uma pasta nomeada img.

<meta property="og:image:type" content="image/TIPOIMAGEM" />

Nesta você informa o tipo de imagem utilizada. No caso do exemplo é PNG.

<meta property="og:image:width" content="LARGURA">

<meta property="og:image:height" content="ALTURA">

Nestas duas se informa as dimensões da imagem. Portanto eu utilizei 1200 x 628, mas imagens nas dimensões 200 x 200px também são aceitas. Portanto na minha opinião não fica muito chamativo.

<meta property="og:site_name" content="NOMEDOSEUSITE">

Substitua o trecho em vermelho pelo nome do seu site.

<meta property="og:title" content="TITULOASERPOSTADO" />

 Substitua o trecho em vermelho pelo texto que deseja que apareça logo abaixo da imagem como o título principal da postagem no Facebook.  No exemplo eu coloquei "WEBACAPPELLA SHOW"

<meta property="og:description" content="DESCRIÇÃO" />

Nesta substitua o trecho em vermelho pelo texto que vai logo abaixo do título a ser postado. Pense neste texto como uma chamada para que desperte a atenção dos internautas. Como exemplo eu defini como "Sua biblioteca on line Webacappella | Dicas / Truques /Tutoriais "

<meta property="og:url" content="URLSITE" />

Para finalizar o código substitua o trecho em vermelho pela url completa do seu website , com http:// .

Então para este exemplo meu código ficou como o abaixo:

<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.bhinf.com.br/blog_webshow/bannerconefeitogif/img/compartilhaface.png" />
<meta property="og:image:type" content="image/PNG" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta property="og:site_name" content="WEB ACAPPELLA SHOW">
<meta property="og:title" content="WEBACAPPELLA SHOW" />
<meta property="og:description" content="Sua biblioteca on line Webacappella | Dicas / Truques /Tutoriais" />
<meta property="og:url" content="http://www.bhinf.com.br/blog_webshow/bannerconefeitogif" />



Após tudo configurado é hora de inserirmos no nosso site WebAcappella. Então utilize a opção SITE>>PROPRIEDADES DO SITE clique na CATRACA e insiria o código logo no início do campo CÓDIGO HTML:

Publique seu site.

Após publicado é hora de conferirmos se ficou tudo certinho:

Acesse então este link: https://developers.facebook.com/tools/debug/

IMPORTANTE: Toda vez que alterar a imagem acesse esse link e faça o procedimento de verificação.

Agora no campo disponível digite a URL DO SITE informado e clique em Debug. Será dado um relatório (em inglês) .

Repare que se tiver algum erro será mostrado para as devidas correções.

Depois de feita as devidas correções eu aconselho testar também postando o url informado diretamente no facebook e vendo o resultado.

Agora que está pronto. Falta somente inserir o botão nas páginas desejadas

INSERINDO O BOTÃO COMPARTILHAR NAS PÁGINA DO SEU SITE

MÉTODO 1 - UTILIZANDO FACEBOOK DEVELOPERS

Acesse este link: https://developers.facebook.com/docs/plugins/share-button

Em URL to share informe a url do site. 

Layout escolha a forma que você deseja o botão

E clique em GET CODE  para a geração do código.

No Webacappella , na página em que deseja incluir o botão utilize a opção PÁGINAS / MATRIZES clique na CATRACA  e inclua o código fornecido no ítem 1.:

Agora continuando na págian que deseja incluir o botão vai na opção INSERIR>> CÓDIGO HTML  e cole o código fornecidos no item 2.

MÉTODO 2 - UTILIZANDO BOTÃO DO WEBACAPPELLA

Existem casos que desejamos fugir da imagem padrão que o Facebook nos fornece para o botão Compartilhar como mostrado no Método1. Então existe uma forma de você utilizar os próprios botões do Webacappella. 

Para isso faça todos os procedimentos do MÉTODO 1 insira o botão e publique o site. Após o site publicado clique no botão como fosse compartilhar no facebook:

Ao abrir a tela de publicação copie todo o conteúdo da barra de endereço. 

No Webacappella na págian que deseja o botão compartilhar insira um botão com a opção INSERIR >> BOTÃO. 

Personalize o botão da sua maneira, e na hora de definir um link para o botão defina para "Link para um endereço na internet" , "Nova Janela", e no campo abaixo cole o que você copiou da barra de endereços conforme mostrado na imagem acima.

Este método dispensa a inclusão do código no head de cada pagina como mostrado no MÉTODO 1

Agora você tem um botão mais personalizado de compartilhar no Facebook. 

MÉTODO 3 - UTILIZANDO CÓDIGO HTML PARA O BOTÃO

Para este método faça upload de uma imagem em algum lugar na hospedagem do site. Então eu peguei a imagem abaixo e postei no seguinte endereço:  http://www.bhinf.com.br/img com o nome da imagem a url ficou http://www.bhinf.com.br/img/compartilhar-no-facebook.png

CÓDIGO:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
<img title="comaprtilhaface" src="urlimagem">
</a>

Agora simplismente substitua o trecho em vermelho pela url da imagem: 

No exemplo o código ficou assim:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
<img title="comaprtilhaface" src="http://www.bhinf.com.br/img/compartilhar-no-facebook.png">
</a>

No Webacappella pela opção INSERIR >> CÓDIGO HTML insira o código já adaptado. e posicione na página no local de sua escolha.

Agora visite o a demonstração online e faça o teste clicando nos botões compartilhar para verem como se procedem. 

ATENÇÃO: CLIQUE AQUI e veja o artigo de fornecer a administração da imagem pelo seu cliente.

Abraços a todos .