Criando um botão de compartilhamento do Telegram

Por
| 

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

Botão de compartilhamento do 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
Í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

Leia também

Mais botões de compartilhamento:

Referências


Siga o blog

Redes sociais: Facebook, Twitter, YouTube, Pinterest, Instagram, Telegram

Receba notificações de novas postagens e novidades do blog por e-mail.

Importante: utilize o bom senso na hora de comentar. Acesse a política de privacidade para maiores informações sobre comentários.

Nenhum comentário:

Postar um comentário

»