Twitter - 分享按钮，但带有图像

Question

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

我了解 1.1 api 和上传的所有信息，但是制作一个 tw 应用程序，然后要求我网站上的访问者授予在他的时间轴上写入的权限只是分享我网站上的一张图片不太可能出现，所以我考虑替代方案。

我注意到，当将 Twitter 上已上传的图片链接粘贴到推文中时，如果您粘贴像

https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg

这样的链接，则不会被嵌入，但如果您像这样

pic.twitter.com/NuDSx1ZKwy

那样粘贴链接，它将被嵌入。所以我认为，如果我创建将调用

https://upload.twitter.com/1/statuses/update_with_media.json

并上传图片的配置文件和应用程序，然后将链接粘贴到共享按钮中，我将获得嵌入图片的推文。或者有更好的办法吗？我用的是php。

Answer 1

查看推特卡。

诀窍不在于按钮，而在于您共享的页面。 Twitter 卡从元标签中提取图像，类似于

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

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>

Answer 3

您的想法是对的，为了以这种方式共享图像而不走 Twitter 卡路线，您需要已经在 Twitter 上发布过该图像。正如您所说，获取

pic.twitter.com/NuDSx1ZKwy

形式的图像链接也很重要

对于任何想要实现“tweet this”链接或按钮的人来说，这个分步指南值得一看：http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable -您的博客文章中的图片/。

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>

如果图像链接已先发布，您可以获取该图像链接。 转到推文，单击选项并单击嵌入推文。您将在嵌入推文中找到图像链接。

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

Answer 6

    $('#twitter').on('click', function () {
        debugger
        var base_url = window.location.href;
        var CollectionName = "@collection.Data.Name";
        var CollectionLogo = "@S3Baseurl" + "@collection.Data.LogoImg";
        var encodedImageUrl = encodeURIComponent(CollectionLogo);

        var cardMarkup = `
            <meta name="twitter:card" content="summary_large_image">
           
            <meta name="twitter:title" content="${CollectionName}">
            <meta name="twitter:description" content="Check out this collection on Agora">
            <meta name="twitter:image" content="${encodedImageUrl}">
            <meta name="twitter:url" content="${base_url}/collection/${CollectionName}">
        `;

        $("head").append(cardMarkup);
        var twitterUrl = `https://twitter.com/intent/tweet?text=Check%20out%20this%20${CollectionName}%20collection%20on%20Agora&url=${base_url}`;

        window.open(twitterUrl, '_blank');
    });

我正在 Twitter 上分享带有照片的收藏，但仅附加我的文字而不是图像 提出解决方案 谢谢

Answer 7

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

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

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