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)
para ficar interessante podemos criar um link para redirecionar com a tag <a> do html
podemos usar o atributo target com _blank para abrir uma nova aba
podemos usar um botao junto com um link
ou usar uma imagem junto com o link
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
agora criamos a parte do javascript e nossa função
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
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
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
- 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