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 uma resposta

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

Ao continuar a navegar no site, você concorda com o uso de cookies. Saber mais

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close