[tutorial] compartilhar site no facebook

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] compartilhar site no facebook

Post by Kodo no Kami » Sun May 03, 2015 9:25 am

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)

Code: Select all

http://www.facebook.com/sharer.php?u=http://127.0.0.1
Image

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

Code: Select all

<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

Code: Select all

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

podemos usar um botao junto com um link

Code: Select all

<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>
Image

ou usar uma imagem junto com o link

Code: Select all

<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>
Image

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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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>
Image

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"

Image

by kõdo no kami
Image

que desagradavel ~ mirai kuriyama

User avatar
51M0N
Admin
Admin
Posts: 877
Joined: Fri Jan 02, 2015 2:06 pm

Re: [tutorial] compartilhar site no facebook

Post by 51M0N » Sun May 03, 2015 9:32 am

legal mano, vou fazer os testes por aqui, valeu por compartilhar ;)
Image
"Você, eu, nem ninguém vai bater tão duro como a vida. Mas não se trata de bater duro. Se trata de quanto você aguenta apanhar e seguir em frente (...). É assim que se consegue vencer." by Rocky Balboa

Post Reply

Return to “Javascript”