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

 
  • ES
  • JA
  • FR
  • EN
  • 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 !important;
    	  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