Scriptless Social Sharing, o plug-in leve do botão de partilha social

Como já disse mais do que uma vez, normalmente faço pequenos trabalhos para blogs que funcionam sob o WordPress optimização para blogs que funcionam sob o WordPress. Tudo o que aplico normalmente testo e meço antes de aqui e no final acabo por transformar as notas num poste como lembrete e no caso de ser útil para alguém. Este é um deles.

Uma das coisas que por vezes atrasa realmente a carga são aqueles botões de partilha social em redes sociais porque ou vêm com artefactos visuais pesados, contadores e pergaminhos, ou carregam pedidos mesmo onde não estão a ser usados ou tudo ao mesmo tempo.

Partilha social sem guiões é um plugin gratuito e leve para adicionar os botões típicos aos seus posts e/ou páginas desenvolvidas por Robin Cornett que dispensa tudo isso.

É tão leve que apenas adiciona links de partilha usando o método mais básico que cada rede permite. Não há javascript, não há animação, não há contador, não há floreados. Ele simplesmente constrói um conjunto de ligações com a sua própria pequena parte de CSS. O resultado é que reduz os pedidos a zero, nenhum.

Tem uma página de definições, também muito simples, para que possa ajustar que tipos de conteúdo deve ter botões de partilha, que botões devem ser adicionados, e se deve ou não usar os estilos do plugin. Além disso, você também pode usar um filtro para adicionar qualquer outra rede que hospeda o seu correspondente ícone .SVG.

Tudo o que o plugin faz pode ser feito à mão registando os ícones, mas como não acrescenta nenhum pedido, o seu peso é mínimo e o seu código é limpo, é uma das melhores opções para poupar um pouco de trabalho.

Scriptless Social Sharing, o plug-in leve do botão de partilha social 1

O seu autor declara total compatibilidade com o WordPress 5.8 e embora ainda não tenha anunciado a compatibilidade com o WordPress 5.8, funciona perfeitamente na nova versão do WordPress 5.8 WordPress 5.9funciona perfeitamente na nova versão, pois não acrescenta nada de novo.

Definições

Por defeito, quando activa o plugin vai encontrar ícones como este:

Scriptless Social Sharing, o plug-in leve do botão de partilha social 2

Ou assim, se seleccionar "mostrar nomes".

E esta é a imagem do ecrã das definições de ícones que funcionam aqui com este resultado:

Scriptless Social Sharing, o plug-in leve do botão de partilha social 4

Scriptless Social Sharing, o plug-in leve do botão de partilha social 5

Mas para fazer os botões aparecerem redondos e para adicionar o botão Menéame (ou qualquer outra rede) basta puxar os seus filtros para registar o ícone e mexer um pouco com o CSS. Nada demasiado complicado.

Passos para adicionar um novo botão

1- Procure e descarregue o ícone .SVG da rede que pretende adicionar, neste caso o melhor, embora possa ser melhorado, que encontrei no Menéame é esta.

2. Carregue o ícone para o diretório /assets/svg/ do seu template (se este caminho não existir, você tem que criá-lo) e o plugin irá reconhecê-lo e usá-lo automaticamente

3. Registe o ícone com o seu correspondente filtro, adicionando-o ao seu plugin de funções, usando Código Snippets ou adicionando-o à mão às funções.php do modelo, o método depende de si.

add_filter( ‘scriptlesssocialsharing_register’, ‘prefix_scriptless_add_meneame_button’ );
/**
* Añade un botón personalizado a Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_meneame_button( $buttons ) {
$buttons[‘tumblr’] = array(
‘label’ => __( ‘Menéame’, ‘scriptless-social-sharing’ ),
‘url_base’ => ‘https://www.meneame.net/submit?url=’.get_permalink().’» target=»_blank’,
‘args’ => array(
‘query_args’ => array(
‘name’ => ‘%%title%%’,
‘url’ => ‘%%permalink%%’,
),
‘color’ => ‘#e35614’,
‘svg’ => ‘meneame-square’, //Subir a `assets/svg` de tu plantilla
‘icon’ => ‘f173’, // Para fuentes FontAwesome
),
);
return $buttons;
}

Você precisa de chamar ao seu ficheiro de ícones“loquesea-square.svg” para que o filtro funcione.

É também importante que preste atenção à estrutura exacta do link de partilha da rede em questão porque tem de ser adicionado em ‘url_base ‘. No caso do Menéame é https://www.meneame.net/submit?url=’.get_permalink()

Finalmente, você só tem de jogar com o CSS até encontrar a aparência e posição final que deseja, pelo exemplo que utilizámos este CSS:

/* CSS botones compartir del plugin */
.scriptlesssocialsharing__buttons a.button {
    /* CONVERTIR A colores parar linea background*/ 
    background-color: #7F7F7F !important; */
    color: #ffffff;
    border-radius: 100px;
	  margin-right: 1px;
    margin-left: 1px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 900; 
}

.scriptlesssocialsharing__buttons {
    justify-content: right;
}

.scriptlesssocialsharing__buttons a.button:hover {
  background-color: #ff2121 !important;
  color: #ffffff !important;
}

Se tudo correu bem, encontrará agora o ícone adicionado nas definições do plugin e poderá encomendá-lo, removê-lo ou defini-lo ao seu próprio estilo como o resto dos ícones predefinidos.

Bloco e atalhos de Gutenberg

O plugin também adiciona um bloco (que pode desactivar) ao Gutenberg que lhe permite colocar os seus botões entre parágrafos ou sob certos elementos de conteúdo.

Você também tem códigos de atalho para que as possa colocar onde quiser e com a possibilidade de limitar as redes que são exibidas num ponto específico.

Adicione [ ]

Atalho “genérico”.

scriptless

Para remover o título ou personalizá-lo.

scriptless heading=""

Para exibir apenas certos botões (separados por vírgulas e sem espaços)

scriptless buttons="email,facebook"

A autora também adiciona no seu site os filtros específicos necessários para adicionar um botão do Facebook Messenger.

Existem outros plugins, também leves e com mais características estéticas, mas este é perfeito se você é um fã da velocidade de carregamento. Como uma alternativa leve paga com mais algumas opções de design, Novashare (dos criadores de Perfmatters) é também uma opção muito boa.