Twitter - 具有图像的分享按钮

Question

我想要使用类似于此页面上的常规分享按钮https://twitter.com/about/resources/buttons#tweet，但是要添加来自我的网站的嵌入式图像，而不仅仅是链接。

我知道所有关于1.1 API和上传的知识，但是创建一个Twitter应用程序，然后要求访问者在我网站上“授权写入他的时间轴”，只是为了共享我的网站上的一张图片，这不太可能，所以我考虑其他方案。

我注意到，当我只将已经上传到Twitter的图片链接粘贴到推文中时，如果您粘贴像这样的链接https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg那么它不会被嵌入，但如果您粘贴像这样的链接pic.twitter.com/NuDSx1ZKwy，它将被嵌入。因此，我想如果我创建一个基于PHP的配置文件和应用程序，并调用https://upload.twitter.com/1/statuses/update_with_media.json来上传图片，然后在分享按钮中粘贴链接，我将获得带有嵌入式图片的推文。还有更好的方法吗？

- S S

Answer 1

了解Twitter Cards。

窍门不在于按钮，而在于你分享的页面。Twitter Cards从类似于Facebook分享的元标记中提取图像。

例如：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">

- t q

---

确实，这是一个不错的功能，但不幸的是它只适用于静态页面。如果您有一种基于用户输入生成结果的测验页面，就无法为每个用户共享不同的图片。 - Raul Rene

@RaulRene，你不能使用服务器语言使元素动态化吗？ - t q

好的。那么生成类似于mypage?{hash}这样的页面就可以达到效果。只需创建一个单一页面，并基于某个哈希值提供不同的元数据内容即可。 - Raul Rene

我认为你的<meta name="twitter:image:src" content="http://placekitten.com/250/250">应该改成<meta name="twitter:image" content="http://placekitten.com/250/250">，根据https://dev.twitter.com/cards/types/photo没有:src。 - Prodigy

重要的是确保 twitter:card 的值设置为字符串 summary_large_image。我先前曾经犯过错误并更改了这个字符串。使用 https://cards-dev.twitter.com/validator 可以验证结果。 - wittich

Answer 2

要在 Twitter 分享链接中添加照片，您首先需要从您的 Twitter 帐户上发布带有照片的推文。推文成功后，您需要获取 pic.twitter.com 的链接，并将其放置在您的 Twitter 分享链接中。

注意：您无法直接查看 pic.twitter.com 链接，所以我会使用另一个账号并点击转发按钮。这样会弹出一个对话框，里面包含了该链接。

您的 Twitter 分享链接将类似于以下内容：

<a href="https://twitter.com/home?status=This%20photo%20is%20awesome!%20Check%20it%20out:%20pic.twitter.com/9Ee63f7aVp">Share on Twitter</a>

- Amy Leaman

---

您不需要单独的账户。只需点击删除按钮，该网址将显示在确认对话框中。 - tenphi

然而，对于一个生成照片的应用程序来说，这并不是非常实用的。 - Alexis Wilke

这确实是一个非常有趣的答案。静态页面元标记对于创建类似于 Facebook 和 Pinterest 可以做的个人分享链接毫无帮助。 - Garavani

这以前是可行的。但是因为他们似乎改变了一些东西，现在不再起作用了。有人知道解决方法吗？ - Garavani

Answer 3

您想分享图片而不通过Twitter Cards路线，需要已经在推特上发布过该图片。您需要获取以下格式的图片链接：pic.twitter.com/NuDSx1ZKwy。

对于任何想实现“点击此处发推”链接或按钮的人来说，这个逐步指南值得一看：http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/。

- philipnye

Answer 4

您可以像这样创建一个 href 链接：

<a href="https://twitter.com/intent/tweet?url=myUrl&text=myTitle https://pic.twitter.com/kyQ3DWS9LH&name=medium&hashtags=quickbankingapp,USSD,ussd" target="_blank">Click to tweet</a>

如果图片已被推文发布，您可以获取图片链接。 前往推文，点击选项并点击嵌入推文。您将在嵌入推文中找到图片链接。

- CodeGreenie

Answer 5

使用JavaScript创建Twitter按钮，我使用Fontawesome的类来获取设计。请记得在HTML头部添加Fontawesome脚本。

let twitter_btn = document.createElement("i")
twitter_btn.className = "fa-brands fa-twitter-square fa-xl"
twitter_btn.setAttribute("index", array_index)
element.appendChild(twitter_btn)
twitter_btn.addEventListener("click", () => {
   let url = "https://twitter.com/intent/tweet?url=" + params.url + 
   "&text=" + params.text
   window.open(url)
})

- Crypto-Frank

Answer 6

我使用了这段代码来解决这个问题。

<a href="https://twitter.com/intent/tweet?url=myUrl&text=myTitle" target="_blank"><img src="path_to_my_image"/></a>

您可以在这里查看推文按钮的文档 tweet-button

- Kenany

---

他们并不是在问如何将图像变成按钮，他们是在询问如何通过分享链接向推文添加媒体。 - BritishSam