seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] compartilhar site no facebook

[tutorial] compartilhar site no facebook

Ir em baixo  Mensagem [Página 1 de 1]

1 [tutorial] compartilhar site no facebook em Sex Ago 01, 2014 2:54 am

Kodo no Kami

avatar
master
master
e ae galera as vezes temos um site ou blog e queremos compartilhar esse conteudo postado no facebook ou para um visitante compartilhar, para compartilhar usamos o script sharer do facebook nele passamos o metodo get u= seguido da url que queremos compartilhar (no caso to fazendo esse tutorial usando um servidor local entao coloquei o ip de localhost)

Código:
http://www.facebook.com/sharer.php?u=http://127.0.0.1

[Você precisa estar registrado e conectado para ver esta imagem.]

para ficar interessante podemos criar um link para redirecionar com a tag <a> do html

Código:
<a href="http://www.facebook.com/sharer.php?u=http://127.0.0.1">compartilhar no facebook by kodo</a>

podemos usar o atributo target com _blank para abrir uma nova aba

Código:
<a href="http://www.facebook.com/sharer.php?u=http://127.0.0.1" target="_blank">compartilhar no facebook by kodo</a>

[Você precisa estar registrado e conectado para ver esta imagem.]

podemos usar um botao junto com um link

Código:
<a href="http://www.facebook.com/sharer.php?u=http://127.0.0.1" target="_blank"><input type="button" value="compartilhar no facebook by kodo"></a>

[Você precisa estar registrado e conectado para ver esta imagem.]

ou usar uma imagem junto com o link

Código:
<a href="http://www.facebook.com/sharer.php?u=http://127.0.0.1" target="_blank"><img src="http://png.findicons.com/files/icons/2155/social_media_bookmark/122/facebook_button.png"></a>

[Você precisa estar registrado e conectado para ver esta imagem.]

no caso dos exemplo acima é tudo estatico ou seja nao muda vai compartilhar apenas a pagina index e nao a pagina atual, podemos usar javacript para modificar o atributo href do link com o url da pagina atual, para fazer isso usamos o atributo onclick na tag do link, esse atributo serve para detectar o evento de clique do mouse em cima daquele link e ao mesmo tempo chama a nossa função javascript antes de redirecionar e ela vai modificar a url em href assim passando a url correta da pagina atual, nao precisamos especificar o href no link ja que vamos modificar ela, no caso precisamos criar um atributo id na tag do link para manipular ele

Código:
<a href="" target="_blank" onclick="ftsfun()" id="botaoface"><img src="http://png.findicons.com/files/icons/2155/social_media_bookmark/122/facebook_button.png"></a>

agora criamos a parte do javascript e nossa função

Código:
<script type="text/javascript">
 function ftsfun()
 {
 }
 </script>
 <a href="" target="_blank" onclick="ftsfun()" id="botaoface"><img src="http://png.findicons.com/files/icons/2155/social_media_bookmark/122/facebook_button.png"></a>

dentro do escopo da função javascript usamos o metodo document.getElementById passamos como argumento para ele o id do link e atribuimos ele para uma variavel

Código:
<script type="text/javascript">
 function ftsfun()
 {
 var kodo = document.getElementById("botaoface");
 }
 </script>
 <a href="" target="_blank" onclick="ftsfun()" id="botaoface"><img src="http://png.findicons.com/files/icons/2155/social_media_bookmark/122/facebook_button.png"></a>

agora usamos o atributo href da variavel e atribuimos para ele a url do script sharer do facebook concatenada com document.location que seria a url da pagina atual

Código:
<script type="text/javascript">
 function ftsfun()
 {
 var kodo = document.getElementById("botaoface");
 kodo.href = "http://www.facebook.com/sharer.php?u=" + document.location;
 }
 </script>
 <a href="" target="_blank" onclick="ftsfun()" id="botaoface"><img src="http://png.findicons.com/files/icons/2155/social_media_bookmark/122/facebook_button.png"></a>

[Você precisa estar registrado e conectado para ver esta imagem.]

depois so apertertar no botao compartilhar e pronto vai compartilhar a pagina exata que no caso aqui seria a pagina "http://127.0.0.1/kodonokami.html"

[Você precisa estar registrado e conectado para ver esta imagem.]

by kõdo no kami


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

2 Re: [tutorial] compartilhar site no facebook em Sex Ago 01, 2014 8:04 am

susp3it0virtu@l

avatar
master
master
muito bom mano,


_________________ASSINATURA_________________

[Você precisa estar registrado e conectado para ver esta imagem.]

Frases:

-"Ninguém baterá tão forte quanto a vida.Porém,não se trata de quão forte pode bater,se trata de quão forte pode ser atingido e continuar seguindo em frente.É assim que a vitória é conquistada" - Rocky Balboa

-"Um homem não está acabado quando enfrenta a derrota. Ele está acabado quando desiste." - Richard Nixon

-"Sometimes,you have to demo a threat to spark a solution" - Barnaby Jack

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum