Criando um botão de compartilhamento do LinkedIn

Por
| 

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

Botão de compartilhamento do LinkedIn

Link de compartilhamento do LinkedIn

O link de compartilhamento do LinkedIn é [1]

https://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITULO]&summary=[RESUMO]&source=[NOME-DA-FONTE]

  • url é o endereço da página que será compartilhada e é um parâmetro obrigatório;
  • title é o título da página ou um título qualquer que você deseja atribuir ao conteúdo. É um parâmetro opcional;
  • summary é um resumo/descrição do conteúdo da página e é um parâmetro opcional;
  • source é o nome da fonte do conteúdo, como, por exemplo, o nome do site ou blog onde o conteúdo está. Também é um parâmetro opcional.

Todos os parâmetros devem estar codificados para URL (faremos isso com a função encodeURIComponent do JavaScript). Observe que há um outro parâmetro no link, o mini. Esse parâmetro é obrigatório e seu valor deve ser sempre true. Portanto, não o modifique.

Utilizaremos todos os parâmetros, exceto source, pois ele depende do contexto de utilização do botão e eu irei construir um botão genérico.

A url será obtida através da propriedade window.location.href. O título (title) será a propriedade document.title. Já o resumo (summary) será o conteúdo da meta tag description ou da meta tag og:description (se as duas estiverem presentes, a meta tag description terá prioridade). Inicialmente, vamos utilizar o seguinte código HTML

<a href="" id="linkedin-share-btt" rel="nofollow" target="_blank" class="linkedin-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 titulo = encodeURIComponent(document.title); //título
            var linkedinLink = "https://www.linkedin.com/shareArticle?mini=true&url="+url+"&title="+titulo;
            
            //tenta obter o conteúdo da meta tag description
            var summary = document.querySelector("meta[name='description']");
            summary = (!!summary)? summary.getAttribute("content") : null;
            
            //se a meta tag description estiver ausente...
            if(!summary){
                //...tenta obter o conteúdo da meta tag og:description
                summary = document.querySelector("meta[property='og:description']");
                summary = (!!summary)? summary.getAttribute("content") : null;
            }
            //altera o link do botão
            linkedinLink = (!!summary)? linkedinLink + "&summary=" + encodeURIComponent(summary) : linkedinLink;
            document.getElementById("linkedin-share-btt").href = linkedinLink;
        }, 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 LinkedIn do Iconfinder
Ícone do LinkedIn 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

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

Considerações finais

O LinkedIn utiliza o conteúdo das meta tags Open Graph para a criação de um card/snippet com um resumo da página compartilhada [1], algo similar ao Facebook.

Portanto, é conveniente implementar essas meta tags no código da página para enriquecer a apresentação do seu conteúdo no LinkedIn.

Leia também

Mais botões de compartilhamento:

Referências

Sugestões de livros para estudantes de computação na Amazon (patrocinado): Lista de Livros

Obrigado pela leitura! Se você puder, considere apoiar financeiramente o Blog Cyberini, Chave Pix: cyberpix9@gmail.com

Doar com PayPal

Siga o blog

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

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

5 comentários:

  1. Olá, realizei a configuração no meu blog, porém ao abrir a tela do linkedin ele carrega e retorna errro, não aparece a opção de compartilhar, o que pode estar errado? segui examente como o post.

    ResponderExcluir
    Respostas
    1. Aqui está funcionando normalmente (testei no desktop e no celular). Que erro ele está retornando? É importante lembrar que algumas partes do código dependem de quais metatags você colocou no head do seu blog.

      Excluir
    2. Olá Henrique, obrigado pelo retorno. A questão é que não retorna erro, na pagina que abre do linkedin aparece tente novamente. Não tem um erro especifico.

      Excluir
    3. Que estranho, eu nunca vi isso. Na prática, quando você clica no botão e acessa o link de compartilhamento, já deveria abrir a tela com um post pronto: Exemplo

      Excluir
    4. Olá Henrique, verdade, vou rever o codigo, devo ter alguma coisinha fora do lugar.
      Obrigado pela força

      Excluir