网站有一个新的 Telegram "button" - 需要帮助才能在 blogspot 上使用它

Question

我正在尝试为我的博客（在 Blogger 上）实现这个按钮，但我真的不能理解它是如何工作的，看看这个 post（你会看到电报按钮与在 post 末尾键入“转发”)：https://telegram.org/blog/supergroups

我找到了 HTML，这是标记：

<a href="https://telegram.me/share/url?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fsupergroups&amp;text=Group%20Admins%2C%20Supergroups%20for%20up%20to%201000%20members%2C%20new%20In-App%20Notifications%20and%20Quick%20Share." class="tl_telegram_share_btn" id="tl_telegram_share_btn" data-text="Group Admins, Supergroups for up to 1000 members, new In-App Notifications and Quick Share." data-url="https://telegram.org/blog/supergroups"><i class="tl_telegram_share_icon"></i><span class="tl_telegram_share_label" target="_blank">Forward</span></a>

这是 CSS:

.tl_telegram_share_btn {
    display: inline-block;
    border-radius: 15px;
    background-color: #54a9eb;
    cursor: pointer;
    line-height: 22px;
    margin-right: 15px;
    padding: 5px 12px 5px 5px;
    color: #FFF;
    font-weight: bold;
}
i.tl_telegram_share_icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(/img/share_logo.png) 0 0 no-repeat;
    background-size: 22px 22px;
    margin-right: 7px;
    vertical-align: top;
}
    .tl_telegram_share_label {
    line-height: 21px;
    vertical-align: top;
    display: inline-block;
    /* margin-top: 1px; */
}

尽管 CSS，似乎棘手的部分在于 HTML 标记，我知道在 blogspot 下有一些 html 标签和参数可以使用，如：

  data:post.canonicalUrl
  data:post.title

我尝试这样做，在“data-url”中使用 data:post.canonicalUrl，并在 href 值中使用，但没有任何效果。

Answer 1

这是一个 Telegram 函数，您可以在其中调用 url，它 returns 一个深度 linked URI，供应用程序打开特定操作。对于这种情况，您共享 link，因此它是 "/share/url?url=..."。

要使用该按钮，您可以将 CSS 添加到您的博客（如果 blogspot/Blogger 允许），然后将 CSS class 添加到 "Forward"按钮：

<a href="//telegram.me/share/url?url=myURL&amp;text=myTEXT" class="tl_telegram_share_btn">
  <i class="tl_telegram_share_icon"></i>
  <span class="tl_telegram_share_label">Forward</span>
</a>

或者，您可以为 link 本身放一张图片：

<a href="//telegram.me/share/url?url=myURL&amp;text=myTEXT" class="tl_telegram_share_btn">
  <img src="/path/to/mybtn.png" class="tl_telegram_share_img" />
</a>

Answer 2

对于 Blogspot 使用此代码：

<a expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title'>Share on Telegram</a>

Answer 3

只需插入此代码并根据您的其他分享图标添加一些CSS

<a class='telegram' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' target='_blank'/>

示例CSS 使用超赞字体图标

.telegram{background:#2DA5D9}.telegram:before{font-family:FontAwesome;content:&quot;\f2c6&quot}

Answer 4

这是 telegram.me 的 URL 选项。

https://t.me/share/url?url={url}&text={text}
https://telegram.me/share/url?url={url}&text={text}
tg://msg_url?url={url}&text={text}

官方API文档来源：Core.Telegram.org: Widgets -> Sharing Button

他们建议使用 t.me 格式，而不是 telegram.me。您可以分享：

url : 您要分享的URL。
text : 要分享的 URL 附带的文字。

如果您有兴趣观看跟踪这些 URL 的项目，请查看我们！：https://github.com/bradvin/social-share-urls#telegramme

网站有一个新的 Telegram "button" - 需要帮助才能在 blogspot 上使用它

There's a new Telegram "button" for websites - need help to use it on blogspot

blogger

button

telegram