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

 
 
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

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

Ou assim, se seleccionar “mostrar nomes”.

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

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
Scriptless Social Sharing, o plug-in leve do botão de partilha social

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.

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

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.


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting

Grandes personan que patrocinan.

Patreon

Recibe contenido extra y adelantos desde sólo un dolarcito al mes como ya hacen estos amables lectores:

César D. Rodas - Jorge Zamuz - David Jubete Rafa Morata - Sasha Pardo - Ángel Mentor - Jorge Ariño - Vlad SabouPedro - Álvaro RGV - Araq