Compartilhando um URL com uma string de consulta no Twitter


117

Estou tentando colocar um link de compartilhamento do Twitter em um e-mail. Como estou em um e-mail, não posso confiar em JavaScript e preciso usar o botão "Crie seu próprio" Tweet.

Por exemplo, compartilhando um link para o Google:

<a href="http://www.twitter.com/share?url=http://www.google.com/>Tweet</a>

Isso funciona bem. O problema que estou tendo é quando o URL tem uma string de consulta.

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm?bar=123&baz=456">Tweet</a>

URLs com strings de consulta confundem o serviço de encurtamento de URL do Twitter, t.co. Tentei a codificação de URL de várias maneiras e não consigo fazer nada funcionar. O mais próximo que cheguei foi fazendo isso.

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456">Tweet</a>

Aqui, codifiquei apenas a string de consulta. Quando eu faço isso, t.co encurta o URL com sucesso, mas ao seguir o link encurtado, ele leva você para o URL codificado. Eu vejo http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456na barra de endereço e recebo o seguinte erro no navegador

Não encontrado

O URL solicitado /foo.htm?bar=123&baz=456 não foi encontrado neste servidor.

Não sei como resolver esse problema.

Editar: Re: onteria_

Tentei codificar o URL inteiro. Quando eu faço isso, nenhuma URL aparece no Tweet.


1
Você precisa codificar url para o URL INTEIRO. Isso inclui tudo, de http://baixo para cima
onteria_

Respostas:



110

Isso pode ser resolvido usando em https://twitter.com/intent/tweetvez de http://www.twitter.com/share. Usando a intent/tweetfunção, você simplesmente codifica a URL toda a sua URL e funciona perfeitamente.

https://dev.twitter.com/web/intents


Plume e Tweetcaster não aceitam este formato (eles apenas mostram o perfil para intenção ou compartilhamento, dependendo da URL). O Tweetdeck não parece lidar de forma alguma com os URLs do twitter.com.
Pierre-Luc Paour


2
https://twitter.com/intent/tweet?text={text_to_share}funciona perfeitamente em todas as plataformas. Estive pesquisando alto e baixo para isso .. Obrigado!
Jack Dewhurst


6

Não fica mais simples do que isso:

<a href="https://twitter.com/intent/tweet?text=optional%20promo%20text%20http://example.com/foo.htm?bar=123&baz=456" target="_blank">Tweet</a>

4

Você pode usar estas funções:

 function shareOnFB(){
       var url = "https://www.facebook.com/sharer/sharer.php?u=https://yoururl.com&t=your message";
       window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
       return false;
  }


function shareOntwitter(){
    var url = 'https://twitter.com/intent/tweet?url=URL_HERE&via=getboldify&text=yourtext';
    TwitterWindow = window.open(url, 'TwitterWindow',width=600,height=300);
    return false;
 }


function shareOnGoogle(){
     var url = "https://plus.google.com/share?url=https://yoururl.com";
     window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=480');
     return false;
}


<a onClick="shareOnFB()"> Facebook </a>
<a onClick="shareOntwitter()"> Twitter </a>
<a onClick="shareOnGoogle()"> Google </a>

Uma solução que não dependa de javascript seria apenas construir esses links (in var url = ...) ao gerar o e-mail.
Thomas Ebert


3

Eu faço referência a todos os métodos.

Codificar a consulta duas vezes é a solução mais rápida.

const query = a=123&b=456;
const url = `https://example.com/test?${encodeURIComponent(encodeURIComponent(query),)}`;


const twitterSharingURL=`https://twitter.com/intent/tweet?&url=${url}`

2

Você não precisa necessariamente usar a intenção, se você codificar sua URL, ela funcionará com o twitter share também.


1

Como @onteria_ mencionou, você precisa codificar todo o parâmetro. Para qualquer outra pessoa que enfrente o mesmo problema, você pode usar o seguinte bookmarklet para gerar o url codificado corretamente. Copie e cole na barra de endereço do seu navegador para criar o url de compartilhamento do Twitter . Certifique-se de que o javascript:prefixo esteja lá quando você copiá-lo na barra de endereço, o Google Chrome o remove durante a cópia.

javascript:(function(){var url=prompt("Enter the url to share");if(url)prompt("Share the following url - ","http://www.twitter.com/share?url="+encodeURIComponent(url))})();

Fonte em JS Fiddle http://jsfiddle.net/2frkV/


1

Se você adicionar o manual no site html, basta substituir:

&

Com

&amp;

Código html padrão para &


0

O Twitter agora permite enviar a URL por meio de um atributo de dados. Isso funciona muito bem para mim:

<a href="javascript:;" class="twitter-share-button" data-lang="en" data-text="check out link b" data-url="http://www.lyricvideos.org/tracks?videoURL=SX05JZ4FisE">Tweet</a>

Alguém testou para ver se isso depende do javascript da API do Twitter para puxar a url do atributo e, em seguida, redirecionar o navegador para a URL certa?
Marcos

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.