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

Obrigado pela leitura! Se você puder, considere apoiar financeiramente o Blog Cyberini. Qualquer valor doado contribui muito para a difusão do conhecimento.

Doar com PagSeguroDoar com PayPal


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.

11 comentários:

  1. Cara, faz um vídeo explicando, eu não consegui fazer isso, não.

    ResponderExcluir
    Respostas
    1. Boa noite, Elem. Infelizmente, eu não tenho disponibilidade (e nem equipamentos) para fazer vídeos.

      Excluir
  2. Como compartilho imagens e textos do meu grupo do Telegram para o WhatsApp?

    ResponderExcluir
    Respostas
    1. Boa noite e desculpa a demora para responder. Eu acho que não existe uma API que conecta os dois aplicativos, porém atualmente o Telegram permite compartilhar imagens da seguinte forma: (1) clica na imagem; (2) clique no botão de compartilhamento no canto inferior direito da tela; (3) e selecione o WhatsApp.

      No caso de conteúdo textual, você tem que copiar a colar o texto no WhatsApp.

      O método apresentado nesta postagem só funciona para compartilhar páginas na internet via browser.

      Excluir
  3. Oi! Adorei a possibilidade, incrivelmente meu site não tem esses botões e muita gente me segue nos dois mensageiros, desculpe a infinita ignorância, copiei e at funcionando, mas quando clico no botão ele volta para a página, onde coloco o link que eu quero compartilhar no blog?
    abraços e obrigado desde já
    \

    ResponderExcluir
    Respostas
    1. O próprio código em Javascript pega o link da página e gera o link compartilhável, mas por via das dúvidas é só você alterar "URL" (em negrito) no link pelo link da página que você quer que esteja no botão https://telegram.me/share/url?url=[URL]&text=[TEXTO]

      Contudo, é importante lembrar que tudo neste botão depende do código em Javscript, verifica se o código foi implementado corretamente.

      No GitHub eu deixei um exemplo de implementação completa, clica aqui.

      Excluir
  4. No Telegram é possivel criar um Link com o menu numero, para compartilhar para as pessoas que precise falar comigo sem ter o menu numero salvo na sua agenda?

    ResponderExcluir
    Respostas
    1. Compartilhamento por número não, mas por nome de usuário dá. O link é https://t.me/SEU-NOME-DE-USUÁRIO. Se você não tiver nome de usuário no Telegram, então não consegue.

      Excluir
  5. Ola como faço para deixar o botão alinhado ao centro?Coloquei na barra lateral e ficou no canto o botão. Obrigado

    ResponderExcluir
    Respostas
    1. Você alinha ele como se fosse um texto comum. Em CSS você pode usar text-align: center !important; ou você pode colocar CSS in-line style="text-align: center".

      Excluir
  6. Se alguem quiser ter um encurtador de URL próprio do seu blog que encurta os links antes de enviar para o telegrama, basta me chamar.

    ResponderExcluir