Criando um botão de compartilhamento do Telegram

Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no Telegram.

Aproveite e se inscreva no nosso canal: Blog Cyberini (Telegram).

Link de compartilhamento do Telegram

O link do Telegram para compartilhamento de conteúdo é [1]

https://telegram.me/share/url?url=[URL]&text=[TEXTO]

• url é o link da página que será compartilhada;
• text é o texto da mensagem (a url será anexada à mensagem).

Todos os parâmetros devem estar codificados para URL (faremos isso com a função encodeURIComponent do JavaScript).

O texto da mensagem (text), será o título da página onde está o botão, obtido através da propriedade document.title.

A URL será obtida através da propriedade window.location.href. Inicialmente, vamos utilizar o seguinte código HTML

<a href="" id="telegram-share-btt" rel="nofollow" target="_blank" class="telegram-share-button"></a>

O script a seguir cria a URL de compartilhamento e a atribui ao link do HTML anterior.

//Constrói a URL depois que o DOM estiver pronto
document.addEventListener("DOMContentLoaded", function() {
   var url = encodeURIComponent(window.location.href); //url
   var title = encodeURIComponent(document.title); //título
   var telegramLink = 'https://telegram.me/share/url?url=' + url + '&text=' + title;
   document.getElementById("telegram-share-btt").href = telegramLink;
}, false);

Esse método não funciona em páginas AMP, pois este tipo de página impede o uso de scripts que não façam parte do projeto AMP. Além disso, o botão também não funcionará se usuário bloquear os scripts do navegador.

Observação: você não precisa utilizar o evento DOMContentLoaded se o script for colocado abaixo do código HTML do botão.

Personalização do botão

Utilizarei a seguinte imagem para ser o ícone do botão [2]:

Ícone do Telegram do Iconfinder

Você pode utilizar a imagem que quiser. A única recomendação é que ela seja quadrada. O código em CSS é dado a seguir

.telegram-share-button{
    display: inline-block;            
    width: 40px;
    height: 40px;
    margin: 5px;
    background-size: 100% 100%; /* ou 'contain' */
    background-image: url("[URL-DO-ICONE]");
    background-repeat: no-repeat;
    background-position: center;
}

Em [URL-DO-ICONE], você deve colocar o link da imagem escolhida. Se preferir, utilize uma URL de dados em Base 64. Normalmente, sites de ícones, como o Iconfinder, disponibilizam uma opção para criar a URL em Base 64 de seus ícones. A principal vantagem dessa opção é que fica tudo embutido no código da página, isto é, você não depende de arquivos externos.

Se a imagem que você escolher não for quadrada, utilize o valor contain na propriedade background-size para que não haja distorções.

Você pode testar o botão a seguir:

Nesse exemplo, utilizei um ícone em Base 64.

Download dos códigos

A versão final desse botão pode ser obtida nos links abaixo

• Botão do Telegram no GitHub
• Botão do Telegram no Google Drive

Leia também

Mais botões de compartilhamento:

• WhatsApp
• Facebook
• Twitter
• Pinterest
• LinkedIn
• e-mail

Referências

• [1] Telegram: Share Web Page. Acesso em 6 de novembro de 2018.
• [2] IconFinder: Telegram Icon by Hopnguyen Mr. Acesso em 6 de novembro de 2018.