Novo modelo de likebox do Facebook (Blogger ou WordPress) | Follow your dreams
Blogosfera

Novo modelo de likebox do Facebook (Blogger ou WordPress)

Oi pessoal,

Vocês já devem ter visto por aí o novo modelo de likebox que o Facebook lançou. Não tenho nada contra o antigo e estava satisfeita com ele, mas mesmo assim resolvi testar o novo modelo e coloquei aqui no blog. Se você quiser aprender e colocar no seu também, esse post é pra você Coracao5.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-1

  • 1 – Vá na página Facebook Developers e clique em Apps > Add a New App. Caso não tenha registrado antes, o Facebook irá solicitar que você registre o seu perfil como desenvolvedor.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-2

 

  • 2 – Selecione a opção Website.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-3

 

  • 3 – Nomeie o seu App e clique em Create New Facebook App ID.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-4

 

  • 4 – Escolha uma categoria para o seu App e clique em Create App ID.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-5

 

  • 5 – Agora que o APP foi criado, acesse a página do plugin e preencha o formulário com as informações traduzidas na imagem abaixo, em seguida clique em GetCode.

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-6

 

  • 6 – Na próxima página você receberá dois códigos, um do script e outro do widget (ou gadget para Blogger):

Colocando-o-novo-modelo-de-likebox-facebook-blogger-wordpress-7

 

Para WordPress

1 – No arquivo header.php do seu tema, cole o código do script ACIMA de </head>.
2 – Agora, crie um novo widget de texto e cole nele o código do widget.

 

Para Blogger

1 – Em Modelo, clique em Editar HTML. Pesquise por ]]></b:skin> (se não encontrar pesquise só por ]]>) e ABAIXO disso cole o código do script.
2 – Agora em LAYOUT, crie um novo gadget do tipo HTML/Java Script e nele cole o código do gadget.

 

O que vocês acharam desse novo modelo? Preferiam o anterior? Comenta aí! :)

41 Comentários

  1. Amei o Tutorial e já estou guardando para quanndo terminar de fazer meu theme, estou conseguindo fazer sozinho todos os códigos apesar de um pouco complicados, estou usando o Bootstrap (Framework) Sublime text (Editor de códigos) e o Brackets (Editor de códigos WP) obrigado pelo tutorial d+ <3 ;) <3

  2. Estou adorando seu blog! Nele tem de tudo, ótima dica, já coloquei no meu! Mas sabia que não precisa usar html, (bom eu sei mexer com html, mais me complico muito com essas coisas kkk) por essa motivo colei os 2 codigos no GADJET normal e deu certo! Amei seu blog! Sua fã! Beijos <3

  3. Oiii,eu simplesmente ADORO seu blog!! Ele me ajudou muito na personalização do meu cantinho.
    Será que você poderia ensinar como colocar sub-abas nas páginas do blogger?

    Beijus <3

  4. Oi Karoline <3 De todos os blogs que conheço o seu é o meu preferido! Eu me identifiquei muito aqui, eu estou apaixonada por sua história adoro ler posts antigos que ainda não li. E logo depois que conheci aqui já sei que futuramente quero ser igualmente a você uma Web master, já conhecia esse blog desde acho que 2012 ou 2013 não lembro perfeitamente. Eu já havia visto muitos blogs usando esse modelo, eu achava que o próprio blog havia atualizado. Como estou elaborando meu novo layout irei ver se eu coloco (e claro que vou!) colocar esse novo modelo de caixinha. Já sigo a página há muito tempo! Beijos <3

  5. Ka, faz um post de como colocar “Categoria e Tags” em cada post do blogger, por favorrrrrr :) Eu queria que ficasse no rodapé de cada post a imagem do autor do post, a categoria e as tags. Tipo assim:

    (imagem do autor) • Postador por: Fulano
    • Categoria: Video
    • Tags: Vlog, Tutorial, DIY.

    Por favorrrrr, me ajuda. Bjão :*

    1. Oi Anna, no Blogger não é possível ter duas opções de marcação de posts, tem apenas 1 opção, a chamada “marcadores”.
      Bjs

  6. No meu quando vou colocar o codigo do script da o seguinte erro: Erro ao analisar XML, linha 1159, coluna 64: The reference to entity “version” must end with the ‘;’ delimiter.

    :/

  7. Adoreei o tutorial!Igual aos outros do blog,estão sendo super úteis para eu terminar meu layout ausuah.
    Sinceramente,gostava mais da antiga caixa do face,mas deve ser por estar acostumada a ver ela.A nova também é bem bonita.

    Beijoos, Petit Me

  8. Olá, tudo bom!
    Já aprendi muitas coisas com seus tutoriais, mas infelizmente essa nova caixa esta dando um trabalhão pra mim. Não consegui coloca-la de jeito nenhum! =(

    Bjos

  9. Amor qual fonte você usou para escrever sua bio? Onde está escrito “Web master, estudante de arquitetura e urbanismo, apaixonada por fotografia, artesanato, decoração, frio, games, Pullips
    e por um marinheiro ” ????
    Amei, linda demais. Seu blog tbm!
    Beijos

Deixe uma resposta