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

Posted

技术标签:

【中文标题】在 Twitter 上共享带有查询字符串的 URL【英文标题】:Sharing a URL with a query string on Twitter 【发布时间】:2011-09-06 16:37:39 【问题描述】:

我正在尝试在电子邮件中添加 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,在浏览器中出现以下错误

找不到

在此服务器上找不到请求的 URL /foo.htm?bar=123&baz=456。

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

编辑:回复:onteria_

我已尝试对整个 URL 进行编码。当我这样做时,推文中不会显示任何 URL。

【问题讨论】:

您需要对整个 URL 进行 url 编码。这包括从http:// 向下的所有内容 【参考方案1】:

这可以通过使用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。 另见此链接 - blog.socialsourcecommons.org/2011/03/… https://twitter.com/intent/tweet?text=text_to_share 在所有平台上都能完美运行。一直在寻找这个..谢谢!【参考方案2】:

您不一定需要使用意图,如果您对 URL 进行编码,它也可以与 twitter 分享一起使用。

【讨论】:

【参考方案3】:

这对你有用

http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3

这是一个关于它的实时示例


http://twitter.com/share?text=Im Sharing on Twitter&url=https://***.com/users/2943186/youssef-subehi&hashtags=***,example,youssefusf

【讨论】:

如果它......你知道......回答了原始问题,那将是一个很好的答案。【参考方案4】:

正如@onteria_ 提到的,您需要对整个参数进行编码。对于面临相同问题的其他人,您可以使用以下书签生成正确编码的 url。将其复制粘贴到浏览器的地址栏中以创建 twitter 分享网址。将javascript:复制到地址栏时,请确保前缀存在,谷歌浏览器会在复制时将其删除。

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/

【讨论】:

【参考方案5】:

Twitter 现在允许您通过数据属性发送 URL。这对我很有用:

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

【讨论】:

有没有人测试过这是否依赖于 twitter API 中的 javascript 从属性中提取 url,然后将浏览器重定向到正确的 URL?【参考方案6】:

您必须在您的 url 中将查询字符串中的 & 更改为 %26

看看这个:https://dev.twitter.com/discussions/8616

【讨论】:

【参考方案7】:

使用 Twitter Intent 资源https://dev.twitter.com/web/tweet-button/web-intent

【讨论】:

包括一个关键的 sn-p 来回答问题会有所帮助【参考方案8】:

使用推文网络意图,这是简单的链接:

https://twitter.com/intent/tweet?url=<?=urlencode($url)?>

https://dev.twitter.com/web/tweet-button/web-intent 上的更多变量

【讨论】:

【参考方案9】:

您可以使用这些功能:

 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 = ... 中)。【参考方案10】:

没有比这更简单的了:

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

【讨论】:

【参考方案11】:

如果您在html网站上手动添加,只需替换:

&

&amp;

& 的标准 html 代码

【讨论】:

使用 js 构建共享链接的完整文档 css-tricks.com/simple-social-sharing-links【参考方案12】:

我参考了所有的方法。

对查询进行两次编码是快速解决方案。

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


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

【讨论】:

【参考方案13】:

它对我有用:

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

希望一切顺利。

【讨论】:

很好,我喜欢这个

以上是关于在 Twitter 上共享带有查询字符串的 URL的主要内容,如果未能解决你的问题,请参考以下文章

带有查询字符串的 Laravel 路由 url

Twitter文本js,不计算包含带有#的url的文本的长度!

Twitter 喜欢 URL,但带有 @'s?

是否可以将共享文本作为查询字符串添加到 LinkedIn 共享 URL 并使其与 LinkedIn 移动应用程序一起使用?

多个Facebook,Twitter共享按钮在一个页面中具有自定义图像和标题

在页面刷新之前从 URL 中删除查询字符串