Personalizar Gadgets (Plugins) do Facebook para Blogs e Sites

Existem muitos acessórios do Facebook para colocar no blog e você pode personalizar (alterar o layout, aparência) desses gadgets ou plugins apenas alterando o código HTML e colocando tags indicadas pelo próprio Facebook na mesma pagina onde você configura e pega o códigos dos gadgets (widgets) do Facebook para blogs e sites, ou seja, na pagina de plugins sociais.

Personalizar Acessórios do Facebook para Blogs


O funcionamento destes códigos para editar os plugins do Facebook funcionam em todos os plugins, por exemplo: botão curtir, widgets de posts recomendados, caixa de fãs do Facebook e todos os outros acessórios. A diferença é que cada um permite alterações dependendo do seu conteúdo.

Quando estiver na pagina de desenvolvedores de plugins para sites do Facebook (pagina onde pegamos o código do Facebook para colocar no blog). Veja que logo abaixo do botão get code tem uma lista de tags e códigos HTML para personalizar.

Personalizar Gadgets (Plugins) do Facebook para Blogs

Vamos usar como exemplo o plugin de Gadget de Posts Recomendados que por padrão abre os links em uma nova janela, mas podemos alterar isso para que ao clicar num link ele abra na mesma janela.

Veja esse trecho do código (isso é apenas uma parte do código para demonstração, se quiser ver o código completo clique no link: Gadget de Posts Recomendados do Facebook):

<div class="fb-recommendations" data-site="www.dicasparablogs.com.br" data-width="600" data-height="400" data-header="true"></div>

Para abrir os links na mesma janela temos que acrescentar o código:
data-linktarget="_top"

Então o código do Facebook modificado para abrir os links na mesma janela fica deste jeito:

<div class="fb-recommendations" data-site="www.dicasparablogs.com.br" data-width="600" data-height="400" data-header="true" data-linktarget="_top"> </div>

Com essa mudança simples no código está pronto e os não vão abrir em uma nova janela.

Leia também:
Como Integrar o Blog ao Facebook e Gerar mais Visitas
Criar Botão Personalizado para Compartilhar Posts no Facebook
Mostrar Botão Compartilhar em Imagens e ao Selecionar Texto

Como você pode ver na pagina de configuração de plugins do Facebook existem muitas outras opções que você pode personalizar como desejar, então faça alguns testes e achará varias funções interessantes para usar nos seus gadgets do Facebook.

13 comentários :

  1. Olá Fabiano!
    Há algum tempo percebi que não conseguimos colocar a caixa de Like Box nos blogs.
    Os códigos, mesmo quando arrumo o tamanho e altura, copio certinho e não aparecem nos blogs que trabalho. Antes, era um outro tipo de código, e agora é HTML5. O que devo fazer?
    Obrigada .

    ResponderExcluir
  2. esse código do html5 aparece em duas partes e precisa usar as duas senão ele não funciona no blog.

    se tiver um código antigo no seu blog acho melhor trocar pelo novo por que com o passar do tempo provavelmente os códigos mais antigos param de funcionar ou apresentam falhas devido as atualizações dos navegadores

    ResponderExcluir
  3. Fabiano,
    Gostei muito da sua postagem, e na minha postagem eu estou tentando colocar um vídeo, esta tudo indo muito certo porém o vídeo tem 30 Segundos, e o blogger não mostra quanto tempo vai demorar para upload do vídeo ficar pronto. Tem como eu saber? Estou a mais de 1hora tentando e o vídeo não vai, ja tentei varias vezes colocar, tirar e colocar o vídeo mais não vai.
    Obrigado, se tiver como saber o tempo, porfavor me fale.

    ResponderExcluir
  4. KoGaMa Planeta

    deve ser alguma falha do blogger ou o formato do seu vídeo, talvez tenha salvado o video num formato de qualidade muito alta e isso gerou um arquivo grande demais, mas acredito mais na teoria de algum erro momentâneo do blogger


    mas já que tentou varias vezes e não deu certo tente enviar para o youtube e depois pegar o código incorporar. Assim conseguirá o mesmo resultado.

    ResponderExcluir
  5. Estava procurando por um tutorial desses! Ótimo blog!

    http://inventyourhappiness.blogspot.com.br

    ResponderExcluir
  6. Fabiano,
    Estou fazendo um site de clã pro meu jogo | E eu queria que só membros que eu convidar poderiam participar do site.

    Tem como isso?
    Obrigado

    ResponderExcluir
  7. João

    entre nas configurações do blog você encontrará: titulo, descrição, privacidade, publicação .... e vários outros itens, veja no final da pagina: Leitores do blog.

    lá você pode configurar o blog somente para leitores convidados, então somente poderá acessar seu blog aquelas contas google que você permitir.

    espero que isso sirva para o que está querendo fazer.

    ResponderExcluir
  8. Oi Fabiano.
    Então... Mesmo colando essas duas partes não aparece...

    ResponderExcluir
  9. Superando Desafios

    se você já tentou colocar esse código no html do seu blog antes veja se não "sobrou" algum trecho de código do facebook no seu html

    nos testes que fiz com o código usando as duas partes sempre deu certo, veja aqui um exemplo de plugin que publiquei no final deste tutorial:
    Plugin do Facebook: Atividades Recentes do seu Blog no Facebook

    ResponderExcluir
  10. Oi Fabiano!
    Vou tentar de novo, inclusive com outro navegador, pois o que eu utilizo (Firefox).
    Obrigada pelos esclarecimentos e pela atenção.
    Abração !

    ResponderExcluir
  11. Caro Fabiano. Pus uma caixa de curtir no meu blog no ano passado. Será que já é preciso trocar? E será que trocando permanecem as pessoas que curtiram? Ou zera tudo? Outra pergunta: é possível centralizar o título de um blog? O título é O CIDADÃO DO MUNDO, e é um jornal eletrônico. Quero pôr abaixo o slogan A Cidadania Sem Fronteiras, também centralizado. É do blogger.

    ResponderExcluir
  12. Claudio

    se trocar o código do botão curtir não deve alterar a contagem

    ResponderExcluir
  13. sobre centralizar o titulo isso depende do seu template, mas tente colocar no html do seu blog o código:

    #Header1 {text-align:center; margin:auto}

    Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

    ResponderExcluir