Criar botões de partilha sem recorrer a qualquer plugin

Em resposta a alguns pedidos, resolvi publicar uma forma simples de criar botões de partilha do Facebook e do Google+, sem recorrer a qualquer plugin do WordPress e sem o uso de qualquer script adicional.

Os plug-ins e aplicativos são softwares de terceiros que você pode usar em sua plataforma para adicionar novos recursos mas que trazem algumas desvantagens, tal como a velocidade do site e mesmo a necessidade de updates frequentes.

O código para criar botões de partilha, que disponibilizo abaixo, é o que uso neste site, pelo que poderá antecipadamente verificar como funciona. O mesmo não usa qualquer Script adicional e pode facilmente ser mudado para adicionar novos botões de partilha (no meu caso uso apenas o Facebook e o Google+), ou mesmo para aparecer no início dos posts. No meu caso pessoal, os botões de partilha aparecem apenas no final do conteúdo das publicações.

Criar botões de partilha sem recorrer a qualquer plugin

Criar botões de partilha sem recorrer a qualquer plugin e sem o uso de scripts

A forma mais fácil seria editar o ficheiro das funções do tema que está a usar e ainda a folha de estilos do mesmo tema. A desvantagem deste processo é que cada vez que houver uma atualização do tema, as alterações seriam perdidas. Por isso mesmo, este código usa um mu-plugin para adicionar os botões.

1- Criar um mu-plugin e adionar o seguinte código no ficheiro .php

Se não sabe como criar um mu-plugin, verifique neste post “Como tornar os perfis de membros do buddypress privados para todosque explica passo a passo como o criar.

Dentro da pasta mu-plugins crie um ficheiro php, por exemplo, “partilha.php” e insira nele o seguinte código:

<?php
function social_sharing_buttons($content) {
 global $post;
 if(is_singular() || is_home()){
 
 // URL que vamos compartilhar 
 $newsocialURL = urlencode(get_permalink());
 
 // Título da publicação que vamos compartilhar
 $newsocialTitle = str_replace( ' ', '%20', get_the_title());
 
 // Construir o URL de partilha sem o uso de qualquer Script adicional
 $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$newsocialURL;
 $googleURL = 'https://plus.google.com/share?url='.$newsocialURL;
 
 // Adicionar os botões de partilha no final do conteúdo do Post/Página
 $content .= '<div class="newsocial-social">';
 $content .= '<h4>Compartilhe nas Redes Socias</h4>';
 $content .= '<a class="newsocial-link newsocial-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
 $content .= '<a class="newsocial-link newsocial-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
 $content .= '</div>';
 
 return $content;
 }else{
 // Se não se tratar de um Post ou Página, não incluir os botões de partilha
 return $content;
 }
};
add_filter( 'the_content', 'social_sharing_buttons');

Agora vamos deixar os botões de partilha mais lindos 🙂

2- Criar o CSS para os botões de partilha nas redes sociais

Este código pode ser adicionado à folha de estilos do próprio tema que está a usar, com a desvantagem de ser perdido cada vez que o tema for atualizado.

O tema que uso permite personalizar o tema com o uso de CSS adicional que nunca é perdido aquando de uma atualização.

Em qualquer dos casos adicionem o seguinte CSS:

/* CSS para botões de partilha no Facebook e Google+ */

.newsocial-link {
padding: 10px 28px 10px 30px !important;
font-size: 18px;
border-radius: 10px;
margin-right: 10px;
cursor: pointer;

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
margin-top: 1px;
margin-bottom: 30px;
display: inline-block;
text-decoration: none;
}
.newsocial-link:first-line {
color: white;
}

.newsocial-link:hover,.newsocial-link:active {
color: white;
}
.newsocial-facebook {
background: #3B5997;
}
.newsocial-facebook:hover,.newsocial-facebook:active {
background: #2d4372;
}
.newsocial-googleplus {
background: #D64937;
}
.newsocial-googleplus:hover,.newsocial-googleplus:active {
background: #b53525;
}

Este código poderá facilmente ser alterado ao gosto de cada um, deixando os botões maiores ou mais pequenos, alterando o tamanho das letras ou mesmo as cores usadas.

Criar botões de partilha sem recorrer a qualquer plugin e sem o uso de scripts, é uma de muitas dicas de informática que pode encontrar no New Social.

Pode pesquisar por muito mais dicas e/ou tutoriais de informática no topo superior direito do site. Se procura por algo que não encontra, não hesite em deixar uma proposta na nossa página de contatos.

Deixe um Comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *