Twitter 分享:如何在视频中显示链接 [内有示例]

Posted

技术标签:

【中文标题】Twitter 分享:如何在视频中显示链接 [内有示例]【英文标题】:Twitter share: How to show a link on video [example inside] 【发布时间】:2021-02-07 19:49:23 【问题描述】:

如何在 Twitter 上共享的视频上显示浮动链接。如下图:

https://twitter.com/TheNationalNews/status/1319169113110040578

当用户将光标悬停在视频上时出现。检查此屏幕截图:

A tweet from @TheNationalNews

它看起来像一个辅助功能。这是我在检查元素时得到的结果:

<div>
  <div style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;">
    <div aria-label="Visit thenationalnews.com" role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-loe9s5 r-42olwf r-sdzlij r-1phboty r-rs99b7 r-1w2pmg r-1t68eob r-1vuscfd r-1dhvaqw r-1ny4l3l r-1fneopy r-u8s1d r-1ki14p2 r-o7ynqc r-6416eg r-lrvibr">
      <div dir="auto" class="css-901oao r-1awozwy r-jwli3a r-6koalj r-18u37iz r-16y2uox r-1qd0xha r-a023e6 r-vw2c0b r-1777fci r-eljoum r-dnmrzs r-bcqeeo r-q4m81j r-qvutc0">
        <svg viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-1sp7lne r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue">
          <g>
            <path d="M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z"></path>
            <path d="M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z"></path>
          </g>
        </svg>
        <span class="css-901oao css-16my406 css-bfa6kz r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">
          <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Visit thenationalnews.com</span>
        </span>
      </div>
    </div>
  </div>
</div>

【问题讨论】:

【参考方案1】:

你找错地方了。这不是代码问题,而是 Twitter 用户选项问题。

解决方案: 您需要登录 Twitter,然后转到 https://ads.twitter.com/ 并从那里创建一个新的 Twitter 视频卡。填写框(标题、描述和您的站点链接)后,您可以单击以在您的页面上发布状态推文。视频现在将悬停您的网站链接。

PS:您可以查看有关此主题的一些 Youtube 教程:(1)0:50 开始观看:@ 987654322@

(2) 在时间 3:20 他们向您展示如何添加网站 URL(悬停时显示的链接):https://www.youtube.com/watch?v=OBJA9MYI7tk

【讨论】:

谢谢@VC.One,这真的很有帮助!

以上是关于Twitter 分享:如何在视频中显示链接 [内有示例]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 android 本机页面中显示 Twitter 视频

在 Facebook、Twitter 和电子邮件上捕获视频共享

推特分享链接失效

如何在分享我的主页 URL 时告诉 Facebook 和 Twitter 显示我的主页图像?

将php变量传递给模态twitter bootstrap不起作用

Twitter 禁止未经用户同意分享照片和视频