在自定义 Twitter 分享图标中分享链接、标题和一张图片

Posted 2023-02-24

【中文标题】在自定义 Twitter 分享图标中分享链接、标题和一张图片

【英文标题】：Share the link , title and one image in custom twitter share icon

【发布时间】：2015-07-06 04:33:10

【问题描述】：

这是自定义推特图标代码：

html：

<i id="twitter_share" class="fa fa-twitter fs20" style="position: relative; bottom: 4px;"></i>

还有 Jquery：

$('#twitter_share').click(function (e) 
    e.preventDefault();
    var loc = "<?= base_url(uri_string()); ?>";
    var title = "<?= $video->title; ?>";
    window.open('http://twitter.com/share?url=' + loc + '&text=' + title + '&', 'twitterwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + $(window).width() / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
);

它适用于 url 和标题。问题是，我怎样才能分享一张图片呢？

非常感谢您的帮助。

更新：在 facebook 中参考 在 facebook 我可以分享这样的内容，也可以在 twitter 上完成吗？谢谢。 ！

【参考方案1】：

图片来自您的 HTML 标记，当有人发布您的网址时，Twitter 会抓取该标记。

Twitter 将伴随推文的元信息集合称为卡片，在其出现在网络上之前需要得到他们的批准。

好好阅读Twitter Cards Developer 页面 选择一张合适的卡片（summary_large_image 是一张不错的卡片）并在 HTML 的头部包含合适的 twitter 元标记 在Cards Validator 页面上验证您的卡 一旦您的域被列入白名单，任何带有您网址的推文也将包含您的卡片

【讨论】：

感谢帮助。你提到的图片需要经过twitter批准，那我如何分享动态内容？

图片不需要被批准，只需要你的域。它也是自动的，您通常会在几分钟内收到一封电子邮件。这是卡验证的一部分：cards-dev.twitter.com/validator

谢谢，现在是白名单，剩下的唯一问题是如何创建分享对话框

如果这样 :gpiot.s1.cotidia.com/twitter-share-demo ，那么对话框没有分享图片预览

这些说明可以正常工作，或者您可以使用推文按钮 dev.twitter.com/web/tweet-button。该图像将在推文发布后显示。如果您想查看它的外观，并确保您的图像被正确嵌入，请使用验证器（上面的链接）

【参考方案2】：

我搜索了一些解决方案，一个解决方案是使用Twitter Cards

也许这个帖子会帮助你Twitter - share button, but with image