[tutorial] compartilhar site no facebook

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

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>

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>

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>

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>

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"



by kõdo no kami