Twitter - 分享按钮，但带有图片答案

【问题标题】：Twitter - share button, but with imageTwitter - 分享按钮，但带有图片
【发布时间】：2013-07-24 04:26:46
【问题描述】：

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

我知道所有关于 1.1 api 和上传的知识，但是制作一个 tw 应用程序然后要求我网站上的访问者允许在他的时间线上写字只是分享我网站上的一张图片是不可能的场景，所以我考虑替代方案。

我注意到，当只是将已经上传到推特上的图片链接粘贴到推文中时，如果你粘贴像 https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg 这样的链接不会被嵌入，但是如果你粘贴这样的链接 pic.twitter.com/NuDSx1ZKwy 它会被嵌入。所以我想如果我制作个人资料和应用程序，将调用https://upload.twitter.com/1/statuses/update_with_media.json 并上传图片，然后将链接粘贴到分享按钮中，我将获得嵌入图片的推文。还是有更好的方法？我用php。

【问题讨论】：

标签： twitter

【解决方案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">

【讨论】：

这确实是一个不错的功能，但不幸的是它只适用于静态页面。如果您有一种根据用户输入生成结果的测验页面，则无法为每个用户共享不同的图像
@RaulRene 你不能使用服务器语言使元动态化吗？
是的。嗯...生成像 mypage?{hash} 这样的页面就可以了。有一个页面并基于一些哈希服务不同的元内容
根据https://dev.twitter.com/cards/types/photo，我认为您的<meta name="twitter:image:src" content="http://placekitten.com/250/250"> 应该是<meta name="twitter:image" content="http://placekitten.com/250/250"> 没有:src
重要的是实际上twitter:card被设置为字符串summary_large_image。 我首先犯了错误并更改了这个字符串。为了验证结果，它有助于使用：cards-dev.twitter.com/validator

【解决方案2】：

你的想法是对的，为了以这种方式分享图片而不走 Twitter Cards 路线，你需要已经在 Twitter 上发布了图片。正如您所说，获取pic.twitter.com/NuDSx1ZKwy 形式的图像链接也很重要

此分步指南值得任何想要实现“推文”链接或按钮的人查看：http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/。

【讨论】：

【解决方案3】：

要创建带有照片的 Twitter 分享链接，您首先需要从 Twitter 帐户中发布照片。发布推文后，您需要获取 pic.twitter.com 链接并将其放在您的推特分享网址中。

注意：您将无法看到 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>

【讨论】：

您不需要单独的帐户。只需点击删除按钮，此网址将显示在确认对话框中。
这对于生成照片的应用来说并不实用，但是...
这确实是一个非常有趣的答案。静态页面元数据对于创建类似于 Facebook 和 Pinterest 的个人共享链接毫无帮助。
这曾经有效。但它不再是，因为他们似乎改变了一些东西。有人知道解决方法吗？

【解决方案4】：

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

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

您可以在此处查看推文按钮文档tweet-button

【讨论】：

【解决方案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)
})

【讨论】：