Criando um botão de compartilhamento do LinkedIn

Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no 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

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

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

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:

• WhatsApp
• Facebook
• Google+
• Twitter
• Pinterest
• e-mail

Referências

• [1] Share on LinkedIn. Acesso em 1 de junho de 2018.
• [2] IconFinder: LinkedIn Icon by Xinh Studio. Acesso em 20 de junho de 2018.