logo标签列表

在Twitter上分享带有查询字符串的URL

twitterquery-stringshareurl-encoding
165
我想在电子邮件中放置一个 Twitter 分享链接。 因为这是在电子邮件中，我不能依赖 JavaScript，并且必须使用“创建自己的”推文按钮。
例如，分享到 Google 的链接：
<a href="http://www.twitter.com/share?url=http://www.google.com/>Tweet</a>

这个很好用。但当URL有查询字符串时，我遇到了问题。

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

使用查询字符串的URL会混淆 Twitter 的 URL 缩短服务 t.co。我已经尝试以各种方式对其进行 URL 编码，但无法使其正常工作。我最接近成功的尝试是这样的。

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

我只对查询字符串进行了编码。这样做，t.co可以成功地缩短URL，但是在跟随缩短链接时，它会将您带到已编码的URL。我在地址栏中看到http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456，并在浏览器中收到以下错误：

Not Found

The requested URL /foo.htm?bar=123&baz=456 was not found on this server.

我不知道如何解决这个问题。

编辑：关于onteria_的回复

我已经尝试过对整个URL进行编码。那样做会导致推文中不显示任何URL。

1
你需要对整个URL进行URL编码。这包括从“http://”开始的所有内容。 - onteria_
13个回答
236
3
如果它回答了原问题，那么这就是一个很好的回答。 - Dave Land
这个共享链接结构已经不再起作用了。请改用https://twitter.com/intent/tweet?text={your text}。 - kimomat
136
这可以通过使用https://twitter.com/intent/tweet而不是http://www.twitter.com/share来解决。使用intent/tweet功能，只需对整个URL进行URL编码即可实现良好的效果。 https://dev.twitter.com/web/intents
Plume和Tweetcaster不能处理这种格式（它们只显示意图或分享的个人资料，具体取决于URL）。Tweetdeck似乎根本无法处理twitter.com的URL。 - Pierre-Luc Paour
还可以查看这个链接 - http://blog.socialsourcecommons.org/2011/03/creating-share-this-on-facebooktwitter-links/ - Alpesh Trivedi
6
"https://twitter.com/intent/tweet?text={text_to_share}" 在所有平台上都能正常使用。一直在苦苦寻找这个方法..谢谢！ - Jack Dewhurst
35
22

对我来说它是有效的：

<div class="links">
    <ul>
    <li class="social-share facebook">Share on Facebook</li>
    <li class="social-share twitter">Share on Twitter</li>
    <li class="social-share linkedin">Share on LinkedIn</li>
    </ul>
</div>

并在js文件中添加以下内容：


setShareLinks();

    function socialWindow(url) {
    var left = (screen.width -570) / 2;
    var top = (screen.height -570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;  window.open(url,"NewWindow",params);}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

$(".social-share.facebook").on("click", function() { url="https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});

$(".social-share.twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
});

$(".social-share.linkedin").on("click", function() {
    url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
socialWindow(url);
})
}

希望这个能够顺利运行。

1
很好，我喜欢这个。 - Inspired Prynce Kaka
这里是相同的代码，但格式更加清晰：https://codepen.io/emohamed/pen/jOzPxgv - Emil M
14
您可以使用以下函数：
 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>
一种不依赖于JavaScript的解决方案就是在生成电子邮件时直接构建这些链接（在“var url = ...”中）。 - Thomas Ebert
9
这真的再简单不过了：
<a href="https://twitter.com/intent/tweet?text=optional%20promo%20text%20http://example.com/foo.htm?bar=123&baz=456" target="_blank">Tweet</a>
5
5

我引用了所有的方法。

将查询编码两次是快速解决方案。

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


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

如果您对URL进行编码，就不一定需要使用意图（intent），这样Twitter分享功能也会正常工作。

2

正如 @onteria_ 提到的那样，您需要对整个参数进行编码。对于其他遇到相同问题的人，您可以使用以下书签工具生成正确编码的url。将其复制粘贴到浏览器地址栏中创建 twitter分享url。确保在复制到地址栏时有javascript:前缀，Google Chrome在复制时会删除它。

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))})();

JS Fiddle源代码 http://jsfiddle.net/2frkV/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接