Novo gadget do Facebook para Blogs: Barra de Recomendações

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Facebook Recommendations Bar para Blogs
O Facebook criou um modelo de elemento de página muito útil para blogueiros, ampliando ainda mais a nossa interação com os leitores do Blog, os artigos e a rede social. Trata-se de uma barra de recomendação de artigos flutuante que funciona em qualquer tipo de blog, mesmo se você não tem uma página no Facebook. Vou mostrar como instalar isso no seu blog do Blogger e WordPress.org.

Blogueiro que não usa rede social tem menos chance de sucesso, especialmente se não usa o Facebook, que tem se mostrado uma ótima ferramenta para gerar tráfego para os blogs.

Além de gerar tráfego é importante mantermos nossos visitantes interessando naquilo que publicamos e recomendar artigos interessantes, pode ser uma alternativa para que eles leiam mais.

O Facebook criou o seu próprio modelo de caixa de artigos recomendados, baseado naquilo que as pessoas compartilham e curtem ao ler seus artigos. A caixa é flutuante e fica no rodapé do seu blog, bem pequena, que ao ser clicar expande e exibe 2 ou mais links para o visitante curtir e/ou ler.

Gadget Facebook Recommendations Bar

Para quem usa o Blogger ou o WordPress.org os procedimentos são diferentes na hora de adicionar a novidade. Por isso mesmo, siga os passos que forem adequados para o tipo de blog que você tem.

Lembrando que as recomendações só aparecem na caixa se o seu blog tem links divulgados de alguma forma no Facebook, pois é assim que o sistema alimenta o que será recomendado ou não para os leitores que clicarem. Ou seja, quanto mais social for seu blog, mais artigos a recomendar ele terá.

Para o Blogger (BlogSpot)

Se você usa o Blogger, siga os seguintes passos atentamente. Há muitos detalhes para considerar e mudanças no código padrão para que funcione sem problemas.

1. A primeira coisa a s fazer é entrar no painel de controle do seu blog, clicar no menu “Modelo” e depois no botão “Editar HTML”, para abrir o código fonte do seu blog.

Na janela que abrir, clique no botão “Formatar modelo” e faça a busca com o Ctrl+F do seu teclado. Se tiver dúvidas de como fazer busca por linhas no código fonte, aqui tem um tutorial completo ensinando a usar o novo editor HTML do Blogger:

2. Agora procure por uma linha que tenha o seguinte trecho <head>.

3. Imediatamente ABAIXO disso cole os códigos sem mudar nada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;pt_BR&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

4. Antes de salvar ainda temos mais coisas para fazer. NÃO FECHE A JANELA DO BLOGGER. Agora vamos à página oficial do novo gadget do Facebook. Para isso acesse:

A página está em inglês, mas isso não vai atrapalhar em nada. Role até encontrar o formulário de configurações que vamos usar para gerar o restante do código necessário.

Sem mudar nada, clique direto no botão “Get code”:

5. Clicando nesse botão aparecerá uma janela, mas ainda não dá para usar nada dela. O que vamos fazer é apenas criar um aplicativo para rodar o gadget. Então clique no link que diz “Create a new app”, como na imagem abaixo:

Na janela que abri, dê um nome para o seu APP e coloque a URL do seu Blog, como no exemplo da imagem abaixo:

Depois é só clicar em “Continuar”.

Pode ser que o Facebook solicite confirmar a sua conta. Isso pode ser solicitado por mensagem de celular. Então é só seguir os passos, se isso for exigido.

6. Voltando ao formulário para gerar o código, adicione a URL do seu Blog, como indicado:

Mais uma vez, clicando no botão “Get Code”.

Certifique-se de que o nome do APP que você criou apareceu (1.) e copie apenas o trecho de código que aparece na primeira caixa (2.):

A parte difícil é que esse código ainda não está pronto para ser aplicado no código fonte do Blogger. Precisa ser modificado para funcionar sem conflito.

7. Vamos ter que “decodificar” o código, deixando ele no formato certo para o Blogger.

Acesse o seguinte link: Centricle: Encode / Decode HTML Entities

Nessa página tem um formulário onde você vai colar o trecho que foi copiado segundo orientação do item anterior. Depois de colar, clique no botão “Encode”, como na imagem abaixo, o que vai transformar o código no que precisamos:

Então copie novamente o que foi transformado. É esse formato que vamos usar para colar no código fonte do Blogger e evitar conflitos.

8. Abra a janela onde está o código fonte do Blogger que você deixou aberta esperando esse momento.

Procure pelo seguinte trecho de linha <body>. Imediatamente DEPOIS disso, cole do trecho que você transformou no item anterior.

9. Por fim, procure por mais <data:post.body/> e logo ABAIXO disso cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2">
</div>
</b:if>

10. Agora é hora de SALVAR o modelo do Blogger para ver se funcionou na página do seu Blog.

Esse gadget só vai aparecer nas páginas dos artigos. Então, para ver funcionando entre em algum artigo do seu blog.

Para o WordPress.org

Se o seu caso é ter um blog no WordPress.org o procedimento é mais rápido e simples.

Tudo o que você tem que fazer é acessar a página oficial do Facebook para gerar o código do Widget:

Role a página para encontrar o formulário de gerar o código, mas antes de fazer qualquer coisa clique no botão “Get Code”, como na imagem abaixo:

Na janela que abrir clique no link que diz “Create a new app” para poder gerar um nome de APP exclusivo para seu blog:

Dando um nome para o APP e colocando a URL do seu blog. Tem que ser da página principal do Blog:

Depois de clicar em “Continuar” você voltará ao formulário para gerar o widget. Nesse ponto então adicione a URL do seu blog no início e no fim, como demonstrado abaixo, e clique novamente no botão “Get Code”:

Vai abrir a janela com os códigos. Verifique se o nome do APP que você criou está no topo (1.). Depois é só colar o primeiro trecho de código (2.) no código fonte do seu Layout, logo abaixo da linha <body>.

Já a segunda parte (3.) pode ser colada dentro de um widget “Texto” com se fosse para a barra lateral do seu blog.

Depois de salvar as alterações em seu blog, verifique se o novo elemento flutuante apareceu nas páginas do seu blog.

.

80 Comentários

  1. Muito bom Marcos, excelente ajuda.

    Você já testou isso? Tem dados sobre a sua eficiência? Me parece que plugin é muito pequeno, passa despercebido com muita facilidade :S

    Aliás quase nem me apercebi que você já estava usando…

    Ou é só impressão minha e de facto tem retorno visível?

    Abraço

    Responder

    • Bruno,
      Comecei a usar agora e acho que pode ser eficiente.
      Como pode ver abaixo, o botão é mesmo discreto e funciona como o botão “Curtir” comum, ao mesmo tempo que dá uma lista de artigos recomendados, baseado no que já foi compartilhado por outros.

      O bom de ser pequeno é justamente para ocupar pouco espaço e não atrapalhar o layout de ninguém.
      Se dá retorno, isso só o tempo dirá, já que o gadget é recém lançado.

      Responder

      • Hmmm Ok, pensei que você já levava alguns dias testando. Sendo assim no fim de semana arranjo um tempinho extra para implementar também e testar 😉

        Obrigado pela dica mais uma vez.

        Responder

      • Marcos, não consigo fazer o meu. Aparece a zeguinte mennsagem: “Sua conta deve ser verificada antes que você possa fazer isto. Por favor, verifique sua conta adicionando seu celular ou cartão de crédito.”

        E agora, se tivr que pagar eu degisto de fazer isso e procuro algo semelhante.

        Responder

        • Se ler com atenção o tutorial, expliquei que essa mensagem poderia aparecer.
          O sistema é gratuito, mas o Facebook precisa saber que sua conta é única. Basta cadastrar seu celular para continuar.

          Responder

  2. Interessante esse novo gadget, vamos ver se “pega”.

    Ainda no tema facebook, mas em outro assunto, vocês já devem ter percebido nas fanpages, o botão promover, que é pago.

    Pelo que percebi, agora você tem que pagar para suas atualizações alcançarem parte ou todos os seus “fãs”, ou seja, não adianta ter 4000 curtidas, se você não pagar, o máximo de alcance que vai atingir, são 20% do seu público.

    Já notei uma queda absurda nas visitas vindas da pág. no facebook, por conta disso, alguém mais percebeu?

    Responder

    • O que eu sei é que é pra páginas acima de 400 curtidas e não 4mil e realmente as visitas na página do meu blog no FB diminuiram pois as atualizações não chegam a todos os “fãs”. E o tal slogam: “Facebbok é gratuito e sempre será”, aham Cláudia senta lá!

      Responder

      • Então Kate, minha página está a quase 4 mil curtidas, e o máximo que alcança agora, é 20% dos fãs, isso prejudica muito quem conquistou as curtidas com muito trabalho e conteúdo… uma pena!

        Responder

  3. No passo 6, aparece esse erro:

    “A URL informada não é permitida pela configuração do aplicativo.: Uma ou mais das URLs mencionadas não são permitidas pela Configuração do aplicativo. Ela deve corresponder a umas das URLs Canvas ou Connect ou o domínio deve ser o mesmo que o subdomínio de um dos domínios da base do aplicativo.”

    É normal?

    Responder

      • Marcos, realmente.
        Refiz todos os passos e ao acessar um artigo aparece:
        “A URL informada não é permitida pela configuração do aplicativo.: Uma ou mais das URLs mencionadas não são permitidas pela Configuração do aplicativo. Ela deve corresponder a umas das URLs Canvas ou Connect ou o domínio deve ser o mesmo que o subdomínio de um dos domínios da base do aplicativo.” no lugar do “Curtir” no rodapé do Blog.

        Me diz uma coisa: para este código funcionar, deve-se ter domínio próprio?

        Abraços.

        Responder

  4. Olhem amigos, o blogue está bem arranjadinho. Parabéns. Mas eu tenho um problema com este tutorial. Envio por se podem ajudar. No passo 6, eu ignoro o erro de que falava Aline e premo “Get Code”. Depois aparece a janela, mas onde diz: “This script uses the app ID of your app”, não aparece o nome do aplicativo que eu criei no passo 5. Apenas dá opção de criar mais um novo app. Já provei, mas faço tudo direito como vocês indicam e volve surgir o mesmo problema: não aparece o nome do aplicativo. O que fazer?

    Responder

    • Gabriel,
      Tente seguir rigorosamente os passos indicados, lendo com atenção o artigo. Use a URL (endereço do seu blog) como o padrão, sem o “.BR” no final. Repita tudo e deve funcionar.

      Responder

  5. Marcos, obrigado mais uma vez pela novidade!

    É realmente a proposta é muito interessante e pode sim ser uma ferramente importante de divulgação no facebook.
    Já instalei a novidade no meu blog e também vou acompanhar os resultados.

    Responder

  6. Consegui! Ótima postagem! Parabéns e muito obrigada por compartilhar.

    Uma dúvida. Deletei algumas postagens em meu blog e mesmo assim essa ferramenta as encontra. Tem como resolver isso?

    Mais uma vez, parabéns pelo belíssimo trabalho!

    Responder

    • Edson,
      Todo código de página de blog tem o “Body” de alguma forma. Pode ser o que no seu blog ele não esteja fechado entre os sinais “maior e menor que”. Então procure apenas pela palavra “body” que você irá encontrar.
      Além disso, lembre-se de marcar “Expandir modelos de widget” na hora de abrir o código fonte do Blogger. Só assim dá pra ver todos os códigos que existem na sua página.

      Responder

  7. Marcos,
    no passo 8(BLOGGER), segunda linha, não encontro a linha “” entre os sinais “” no HTML do blog.

    Há outro local que posso colar o “código decodificado”?

    Desde já agradeço.

    Responder

    • Marcos,

      como não encontrava o “maiorque” body “menorque” no HTML,
      persisti após o meu 1º cometário…

      Colei o “código decodificado” depois de “maiorque” / head “menorque” (passo 8), refiz o passo 6, mas sem o “www”: http://MEUBLOG.com, e funcionou perfeitamente!

      Forte abraço!

      Responder

  8. Olá Marcos!
    Bom o seu blog! Parabéns mais uma vez!
    Esse gadget parece bom e dar o que falar, mas infelizmente ontem tentei várias vezes colocar-lo no meu blog e não encontrei isso:

    9.  

    Não tem como indicar um outro lugar, código para colar os scrips?
    Abraços de Cabo Verde, África

    Responder

  9. Boa tarde,
    Primeiramente gostaria de agradecer pelo ótimo trabalho que você vem desenvolvendo ao longo destes anos, sou muito grato por tudo.

    Bem tentei de todas as formas aplicar o app em meu blog mais não obtive êxito em nenhuma delas, sempre fica com a mensagem “A URL informada não é permitida pela configuração do aplicativo.: Uma ou mais das URLs mencionadas não são permitidas pela Configuração do aplicativo. Ela deve corresponder a umas das URLs Canvas ou Connect ou o domínio deve ser o mesmo que o subdomínio de um dos domínios da base do aplicativo.” tentei de diversas formas sem o http… sem o http://www... apenas o http… mais de nada serviu o que será que acontece Marcos?

    Responder

    • Jalison,
      Essa mensagem vai aparecer ao longo do procedimento apenas na página do gerador do código. Pode ignorar e continuar o tutorial sem problemas. Se você seguir os passos corretamente, vai funcionar em seu blog sem erros.
      Repito: siga rigorosamente os passos ensinado.

      Responder

  10. Olá Marcos, Tudo bem? 😉

    Muito grata por este tutorial, adorei e é mais uma forma de convidar os leitores a permanecer mais tempo no blog.

    Assim como vários leitores acima, tentei várias vezes sem sucesso, no entanto experimentei criar um novo aplicativo e neste, não usei
    http://www.MEUBLOG.com e sim apenas http://meublog.com e dai deu certo.

    Em meu template tb encontrei 4 X o código e depois de tentar várias vezes tb. Mas daí coloquei logo abaixo do primeiro e dai deu certo mesmo.

    Deixei essa observação, pois alguém pode ter talvez a mesma dificuldade.

    Um abraço, grata 🙂

    Responder

  11. ps: como esqueci de mostrar o código que citei então repito abaixo:

    “Em meu template tb encontrei 4 X o código e depois de tentar várias vezes tb. Mas daí coloquei logo abaixo do primeiro e dai deu certo mesmo.”

    😉

    Responder

  12. Marcos corroborando o comentário do Edson, e posterior resposta tua,a mim acontece exatamente igual. Ou seja a palavra ,foi uma tentativa que não resultou.

    Se poderes ajudar ficava agradecido.
    Antecipadamente Obrigado

    Responder

    • Para encontrar todos os códigos no Blogger é preciso marcar a opção “Expandir modelos de widgets” como expliquei no passo 1 do tutorial. Sem isso vocês não vão encontrar tudo o que precisam.

      Responder

  13. Ei cara. .. muito boa a sua dica … só faltou vc dizer no começo que, antes de começar a colar os códigos a gente marque a opção “EXPANDIR MODELOS DE WIDGETS”.

    Forte abraço e parabéns!!!!

    Responder

    • Ei cara… obrigado pelo comentário… só faltou você ler com mais atenção o tutorial, pois está lá a instrução de marcar a opção “Expandir modelos de widgets”.
      Nunca esqueço detalhes assim.
      Da próxima vez, leia com mais atenção.

      Responder

      • Marcos, realmente um dos grandes desafios (que já nem deveria estar em nossa pauta como blogueiros, por ser primário)é repetir a máxima da leitura atenta – não só em posts/artigos como em qualquer outro aspecto da vida. Abraços e parabens!

        Responder

  14. olá muito bom o tuturial, me ajudou muito, no meu caso tive que colocar o segundo código de html mesmo depois de fazer todo o processo no código fonte do meu blog, isto é, para dar certo o html, que apareceu na pagina tive que usar o primeiro para fazer o Encode e o outro usei como widgente, assim funcionou! o tutorial é ótimo porém tem alguns templates que exige algumas mudanças então fique atento. Vlw

    Responder

  15. Pingback: Artigos Recomendados direto no botão +1 do Google+ - [ Ferramentas Blog ] | [ Ferramentas Blog ]

  16. Olá Marcos!

    Ao procurar por , logo de cara aparece três
    “” entre algumas div. Mesmo inserindo o código o Recomendation bar não aparecia.

    Tentei colocar em outros locais como e até que funcionou. Apareceu o gadget, mas em uns artigos sim, em outros não.

    Abraço!

    Responder

  17. no meu ta dando serto mais o o unico poblema e que ta aparecendo o nome do blog ai como todo o titulo da poostagem

    tipo porque o titulo do meu blog e androidstech apps, jogos, tutoriais e muito mais para o sistema android ai come todo o espaço do titulo da postagem mais eu no seu nao aparece o titulo do blog aguardo sua ajuda vlw

    Responder

  18. Olá Marcos, estou tentando colocar em meu blog e quando vou no “Create a new app” não aparece nada, não abre a outra janela para que eu possa criar… Teria outro caminho para criar? sabe me dizer o que fazer? Obrigado

    Responder

  19. Consegui colocar em meu blog, depois de várias tentativas não sei se no meu caso não ia porque estou usando template e outro detalhe foi que não fiz nada no HTML apenas coloquei um Gadget no blog escondido.

    Como tentei um milhão de vezes e nada, parti para outro caminho que foi ir no site https://developers.facebook.com/apps – criei novo aplicativo – e preenchi da seguinte forma:

    Em “AppDomains” inseri o url de meu blog, ( ex “http://www.nomedoblogm.com.br”.)
    Em “Website with Facebook Login” coloquei o mesmo URL do blog usada acima.
    Em “Mobile Web” coloquei o mesmo URL do blog usada acima.

    Observei que antes de salvar clicava na paginado lado de fora e automaticamente aparecia ao lado uma amostra de como ia ficar no canto direito da página, tanto que coloquei Recomendar e não curtir.

    No item 6 aqui do site quando temos que copiar o que mostra eu copiei o campo de baixo ( 2. Coloque o código do plugin (abaixo) onde você quer que ele apareça em sua página).

    Quando criei um HTML/JavaScript em meu blog e salvei foi só alegria.
    Espero que ajude alguém porque no meu caso só funcionou assim.

    Responder

  20. Oi, no meu blog deu um erro que só aparece como se fosse pra curtir a página do blog, aparece o título do blog e a figura que é o banner, e não dos posts individuais, só que parece que é só uma questão do que “aparece” literalmente na janelinha, pq quando vc clica lá e curte, na verdade vc ta curtindo as paginas de posts individuais mesmo! Eu ja tinha um app criado no facebook, e usei o id dele pq nao deu certo criar um novo como vc ensinou, na janelinha de criar um app novo não tinha espaço nenhum p colocar a url do blog, e estava em portugês, diferente do q vc falou aqui, enfim, usei o app que criei qnd coloquei comments do face no blog, será que foi por isso? E antes eu tinha tirado o codigo de outro site e tava dando mais erro ainda, duplicava a janela, então fui trocando parte por parte com os codigos que vc disponibilizou aqui, logo axo q a “ordem” que vc falou aqui q era important p n dar erro n foi seguida… pq eu ia apagando o codigo antigo e colocando o seu codigo.. será q foi isso =X ajuda pliz!

    Responder

  21. Marcos,
    estou seguindo os procedimentos indicados por vc e quando entro na janela “Create a NewApp” só abrem 2 espaços: (1) App Nane e (2) Espaço de nome do aplicativo. O espaçao + importante: (3) App URL não aparece, vc saberia me dizer o porquê? Tentei pelo Mozila e Chrome e nada. Acho q sem esse espaço nada feito, não é?
    Aguardo
    Abrigada

    Responder

  22. Marcos, consegui fazer os procedimentos para blogger, mas no meu aparecem duas janelas, uma sobreposta a outra. Então passado o tempo configurado para ele subir, ainda fica outra minimizada. Saberia me dizer o por que disso?

    Responder

  23. No meu caso, não tem o campo App URL, quando clico em criar novo app, assim não consigo gerar o nome do app próprio e por isso dá erro no restante de todo processo. Certamente o sistema do facebook deve ter atualizado desde a criação deste tutorial.

    Responder

  24. Marcos, já tentei no Chrome e no IE mas quando clico em Get Code aparece uma janela escrito “Your Plugin Code” e abaixo os botões HTML5, XFBML, IFRAME, URL e não tem onde clicar Create a new app.

    Responder

  25. Marcos, juntamente do Recomendations Bar está o Recomendations Box, que a meu ver pode ser usado como Posts Relacionados do blog no lugar do nativo. Gostaria de saber sua opinião sobre isso.

    Responder

  26. Oi, Marcos!
    Facebook Recommendations Bar mudou a forma de gerar o codigo… já não aparece mais essa primeira caixinha que postou e quando fazemos a finalização, ao salvar modelo, dá erro.
    Vim atrás de uma “likebox flutuante” de curtir a página que não aparecesse no meio do blogue quando o leitor acessa. Vi essa caixinha em um outro blogue – ela fica na posição em que fica esse gadget que postou. Procurei aqui no blogue e não achei…
    🙂

    Responder

  27. Olá Marcos, tudo bem?
    Eu gostaria de fazer uma sugestão, mesmo que não seja tão relevante.
    Muitas vezes quando estou navegando pelos posts aqui do FB sempre aparecem vários posts relacionados repetidos, mesmo que eu navegue por assuntos muito distintos, como SEO e gadget de redes sociais. Talvez isso iniba um pouco o leitor em conhecer outros posts muito interessantes relacionados.

    Acho que poderia colocar mais uma linha de posts relacionados (10 posts ao invés de 5), e isso diminuiria a repetição de posts. Ou, talvez, seja algum ‘problema’ com o cache/cookies em meu navegador e por isso muitos estão repetindo. Nesse caso, desconsidere essa minha observação.

    Agradeço todo conteúdo que você nos oferece. São ótimos!
    Abração!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.