Есть новая кнопка Telegram для веб-сайтов — нужна помощь, чтобы использовать ее на blogspot

Я пытаюсь реализовать эту кнопку для своего блога (на Blogger), но я не очень понимаю, как она работает, взгляните на этот пост (вы увидите кнопку Telegram с типом «Вперед» в конце сообщение): 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:post.canonicalUrl в «data-url» и внутри значения href, но ничего не работает.

Заранее большое спасибо!


button telegram social blogger blogspot
person Santiago    schedule 25.11.2015    source источник
comment
извините, я действительно новичок в этом: / что вы имеете в виду под суперпользователем? это раздел?   -  person Santiago    schedule 06.12.2015

Ответы (4)


arrow_upward
1
arrow_downward

Для 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>
person web_xaser    schedule 19.04.2016

arrow_upward
1
arrow_downward

Это функция Telegram, где вы вызываете URL-адрес, он возвращает URI с глубокой ссылкой для приложений, чтобы открыть определенное действие. В этом случае вы делитесь ссылкой, так что это "/share/url?url=...".

Чтобы использовать кнопку, вы можете добавить CSS в свой блог (если позволяет blogspot/Blogger), а затем добавить класс CSS к кнопке «Вперед»:

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

Или, вы можете разместить картинку для самой ссылки:

<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>
person lifehome    schedule 03.02.2016

arrow_upward
1
arrow_downward

Просто вставьте этот код и добавьте немного 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 с использованием значков Font Awesome

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

arrow_upward
1
arrow_downward

Вот ваши варианты URL для telegram.me.

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: Виджеты -> Кнопка общего доступа.

Они предлагают формат t.me, а не telegram.me. Вы можете поделиться:

  • url : URL-адрес, которым вы хотите поделиться.
  • text : Текст, сопровождающий URL-адрес, которым вы хотите поделиться.

Если вам интересно посмотреть проект, который отслеживает эти URL-адреса, загляните к нам!: https://github.com/bradvin/social-share-urls#telegramme

URL-адреса социальных сетей

person HoldOffHunger    schedule 12.05.2020
comment
большое спасибо, очень заинтересовался этим проектом! (Этот вопрос был задан 4 года назад, когда у них не было этой документации для их API) - person Santiago; 13.05.2020