Scriptless Social Sharing, das leichtgewichtige Plugin für Social Sharing-Schaltflächen

Wie ich bereits mehr als einmal gesagt habe, erledige ich in der Regel kleine Aufträge für Blogs, die unter WordPress laufen optimierung für Blogs, die unter WordPress laufen. Alles, was ich anwende, teste und messe ich in der Regel vorher. Am Ende mache ich aus den Notizen einen Beitrag als Erinnerung und für den Fall, dass es für jemanden nützlich ist. Dies ist einer von ihnen.

Eines der Dinge, die das Laden manchmal wirklich verlangsamen, sind diese lahmen Schaltflächen zum Teilen von sozialen Netzwerken, weil sie entweder mit schweren visuellen Artefakten, Zählern und Dropdown-Scrolls daherkommen, oder sie laden Anfragen, auch wenn sie nicht verwendet werden, oder alles auf einmal.

Skriptlose soziale Freigabe ist ein leichtes und kostenloses Plugin, mit dem Sie Ihren Beiträgen und/oder Seiten die typischen Schaltflächen hinzufügen können, entwickelt von Robin Cornett die all das überflüssig macht.

Es ist so leichtgewichtig, dass es nur die einfachste Methode zum Teilen von Links hinzufügt, die jedes Netzwerk erlaubt. Es gibt kein Javascript, keine Animation, keinen Zähler, keinen Schnickschnack. Es erstellt einfach eine Reihe von Links mit einem eigenen kleinen Teil von CSS. Das Ergebnis ist, dass es die Anfragen auf Null reduziert, auf keine.

Es verfügt über eine ebenfalls sehr einfache Einstellungsseite, auf der Sie einstellen können, welche Arten von Inhalten über Schaltflächen zum Teilen verfügen sollen, welche Schaltflächen hinzugefügt werden sollen und ob die Stile des Plugins verwendet werden sollen oder nicht. Darüber hinaus können Sie auch einen Filter verwenden, um jedes andere Netzwerk hinzuzufügen, das sein entsprechendes .SVG-Symbol bereitstellt.

Alles, was das Plugin tut, kann auch von Hand erledigt werden, indem Sie die Symbole registrieren. Da es jedoch keine zusätzlichen Anfragen stellt, sein Gewicht minimal ist und sein Code sauber ist, ist es eine der besten Optionen, um ein wenig Arbeit zu sparen.

Sein Autor erklärt die volle Kompatibilität mit WordPress 5.8 und obwohl die Kompatibilität mit WordPress 5.8 noch nicht angekündigt wurde, funktioniert es perfekt in der neuen Version von WordPress 5.8 WordPress 5.9sie funktioniert in der neuen Version perfekt, da sie nichts Neues hinzufügt.

Einstellungen

Wenn Sie das Plugin aktivieren, sehen die Symbole standardmäßig wie folgt aus:

Oder so, wenn Sie "Namen anzeigen" wählen.

Und dies ist der Screenshot der Symbol-Einstellungen, die hier mit diesem Ergebnis funktionieren:

Aber um die Schaltflächen rund erscheinen zu lassen und die Menéame-Schaltfläche (oder jedes andere Netzwerk) hinzuzufügen, müssen Sie nur ihre Filter ziehen, um das Symbol zu registrieren, und ein wenig am CSS basteln. Nichts allzu Kompliziertes.

Schritte zum Hinzufügen einer neuen Schaltfläche

1- Suchen Sie das SVG-Symbol des Netzwerks, das Sie hinzufügen möchten, und laden Sie es herunter. In diesem Fall ist es das beste Symbol, das ich bei Menéame gefunden habe, auch wenn es noch verbessert werden könnte ist dies.

2. Laden Sie das Symbol in das Verzeichnis /assets/svg/ Ihrer Vorlage hoch (wenn dieser Pfad nicht existiert, müssen Sie ihn erstellen) und das Plugin wird es erkennen und automatisch verwenden

3. Registrieren Sie das Symbol mit dem entsprechenden Filter, indem Sie es zu Ihrem Funktions-Plugin hinzufügen, indem Sie Code-Schnipsel oder fügen Sie sie von Hand in die functions.php der Vorlage ein, die Methode bleibt Ihnen überlassen.

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;
}

Sie müssen Ihre Symboldatei"loquesea-square.svg" nennen, damit der Filter funktioniert.

Es ist auch wichtig, dass Sie auf die genaue Struktur des Freigabelinks des betreffenden Netzwerks achten, da dieser in 'url_base' hinzugefügt werden muss. Im Fall von Menéame ist es https://www.meneame.net/submit?url='.get_permalink().

Schließlich müssen Sie nur noch mit dem CSS spielen, bis Sie das endgültige Aussehen und die gewünschte Position gefunden haben. Für das Beispiel haben wir dieses CSS verwendet.

/* 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;
}

Wenn alles gut gegangen ist, finden Sie das Symbol jetzt in den Plugin-Einstellungen und können es bestellen, entfernen oder wie die anderen Standard-Symbole anordnen.

Gutenberg-Block und Shortcodes

Das Plugin fügt Gutenberg außerdem einen Block hinzu (den Sie deaktivieren können), mit dem Sie Ihre Schaltflächen zwischen Absätzen oder unter bestimmten Inhaltselementen platzieren können.

Sie haben auch shortcodes so dass Sie sie an beliebiger Stelle platzieren können und die Möglichkeit haben, die angezeigten Netzwerke auf einen bestimmten Punkt zu beschränken.

Hinzufügen [ ]

Allgemeiner" Shortcode.

scriptless

So entfernen Sie die Überschrift oder passen sie an.

scriptless heading=""

Um nur bestimmte Schaltflächen anzuzeigen (durch Kommas und keine Leerzeichen getrennt)

scriptless buttons="email,facebook"

Die Autorin fügt auf ihrer Website auch die spezifischen Filter hinzu, die zum Hinzufügen einer Facebook Messenger-Schaltfläche erforderlich sind.

Es gibt andere Plugins, die ebenfalls leichtgewichtig sind und über mehr ästhetische Funktionen verfügen, aber dieses Plugin ist perfekt, wenn Ihnen die Ladegeschwindigkeit am Herzen liegt. Als leichte, kostenpflichtige Alternative mit ein paar mehr Designoptionen, Novashare (von den Machern von Perfmatters) ist ebenfalls eine sehr gute Option.