Como Colocar Plugin de Curtir Fanpage do Facebook no meu site HTML5

[JEANDAMIN 0]

 

Gostaria de uma ajudinha que acredito que para muitos programadores deve ser facinho facinho resolver. Estou montando meu site com base em um template e gostaria de colocar o botão curtir do facebook nas paginas, porem não estou conseguindo.

Para ficar mais claro meu problema vou explicar melhor aqui em baixo.

 

por padrão no template esta esses codigos para acessar facebook, twitter e pinterest

 

 

<div id="social-holder">
<div id="social-holder-back" class="opacity_2"></div>

<div data-src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fthemes.mediacreed.com%2F%23portfolio&send=false&layout=button_count&width=85&show_faces=false&font=verdana&colorscheme=light&action=like&height=21"
style="float:left; border:none; overflow:hidden; width:82px; height:21px; margin: 6px 5px 5px 10px;"></div>

 

<div data-src="https://platform.twitter.com/widgets/tweet_button.html?url=http://themes.mediacreed.com/html/synergy/#portfolio&text=Synergy - Awesome HTML Portfolio Template&via=mediacreed"
style="float:left; border:none; overflow:hidden; width:82px; height:21px; margin: 6px 5px 5px 10px;"></div>

 

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fthemes.mediacreed.com%2Fhtml%2Fsynergy%2F&media=http%3A%2F%2Fthemes.mediacreed.com%2Fdesc_images%2Fprofile_preview_synergy.jpg&description=Synergy%20is%20a%20responsive%20%26%20interactive%20fullscreen%20portfolio%20for%20artists%2C%20photographers%2C%20media%20agencies%2C%20restaurants%20and%20for%20everyone%20that%20wants%20to%20showcase%20their%20portfolio%20in%20a%20professional%20way." class="pin-it-button" count-layout="horizontal" target="_blank"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div>

 

 

 

 

 

Bom, Abri o developers.facebook.com para gerar o link da minha fanpage para colocar no lugar dos códigos desses botões de redes sociais, e o codigo gerado foi esse :

 

 

<div class="fb-page" data-href="https://www.facebook.com/onzcreative" data-width="300" data-height="450" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/onzcreative"><a href="https://www.facebook.com/onzcreative">ONᶻ Creative</a></blockquote></div></div>

 

 

 

Coloquei o codigo selecionado no Html do site no lugar dos botões de redes sociais e não funcionou, apenas ficou um link da fanpage, e eu gostaria que aparecesse uma previa da fanpage como mostra o exemplo em developers.facebook.com.

 

 

Se alguem puder me ajudar ficarei muito grato.

[guilomaker 31]

seu site e wordpress? ou não usa CMS?

[JEANDAMIN 0]

Guilomaker... não é em Wordpress.. e não uso CMS ...

seu site e wordpress? ou não usa CMS?

 

Guilomaker... não é em Wordpress.. e não uso CMS ...

[guilomaker 31]

antes de qual quer coisa você tem que criar um app no facebook

 

pagina para criar app:

https://developers.facebook.com/apps/

 

artigo de como criar um app

http://blog.difluir.com/2013/03/como-criar-uma-app-no-facebook/

 

e depois que já tiver criado o app você vai configurar o plugin e usar o app que você criou.

 

pagina pra configurar o plugin de like

https://developers.facebook.com/docs/plugins/like-button

 

ai e só seguir os passos ai que não tem erro, se tiver maiores duvidas só falar que te dou uma ajuda maior ok

[JEANDAMIN 0]

Brother .. Obrigado pela atenção e ajuda .. porem eu ja fiz esses procedimentos e não consegui.... olha só como que aparece no site quando abro a imagem, Aparece só o nome da pagina e em forma de link como na imagem abaixo:

 

 

 

Eu gostaria de visualizar desse jeito aqui:

 

 

Vou postar aqui um print dos codigos que aparece pra mim colocar ... ai sobre isso tenho uma duvida ... quando gero os codigos da fanpage aparece dois codigos , e a minha duvisa é sobre o primeiro Javascript SKD.. esse primeiro codigo eu tambem devo colocar no meu site ?

Olha a imagem que tirei o print :

 

 

[guilomaker 31]

o primeiro codigo você vai colocar depois de abrir a tag body

 

<html>

 

<head>

 

</head>

<body>

coloque o primeiro codigo aqui

</body>

 

</html>

 

o segundo codigo você coloca onde você quer que que apareça o plugin.

 

seu plugin esta aparecendo todo desconfigurado, e exatamente por problema dos codigos incluidos.

[JEANDAMIN 0]

guilomaker

 

Só para esclarecer... o codigo Javascript SKD que vai entre as tags <body> eu devo colocar na pagina Index.html ou na Portfolio.html ?

[guilomaker 31]

se você usa a mesma estrutura pra todas as paginas, e não usa um carregamento de paginas dinâmico, você tem que colocar na pagina que você quer exibir o plugin, no seu caso na portifolio.html.