
"TR: "Nun, meiner bescheidenen Meinung nach..."
Wenn wir von Optimierung sprechen, ist das beste Plugin für etwas dasjenige, das nicht benutzt wird.
Das soll nicht heißen, dass es keine guten, einfachen und funktionalen Plugins gibt, die verwendet werden können, um diese Social-Media-Sharing-Buttons zu WordPress hinzuzufügen. Manchmal gibt es keine Alternative. Wenn Sie jedoch nach etwas Einfachem und wirklich Leichtem suchen, ohne Schnickschnack, Zähler, Skripte oder externe Anfragen jeglicher Art, ist die beste Option, etwas Code und CSS zu verwenden.
Nachdem ich drei Monate lang einen A/B-Test mit einigen der am häufigsten besuchten Beiträge durchgeführt habe, ist mir aufgefallen, dass rechteckige Elemente häufiger verwendet werden als runde Primitive.


Der ursprüngliche Code basierte auf diesem von WPLogout, für die GeneratePress-Vorlage, und es kann immer noch debuggt und verbessert werden, weil es eine Korrektur von dieser Version ist (die die runden Tasten zeigte), aber es funktioniert für jede Vorlage.
Wie Sie sehen können, wird für jede Schaltfläche eine CSS-Klasse erstellt, so dass es sehr einfach ist, Schaltflächen hinzuzufügen oder zu entfernen, Größen und Farben zu ändern, sie neu anzuordnen usw.
Am kompliziertesten ist es manchmal, die Struktur der Freigabe-URL bestimmter Netzwerke zu finden, obwohl es auch dafür Tricks gibt, und den HTML-Code der SVG-Symbole zu bekommen, wenn er nicht vorhanden ist.
Hier lasse ich den eigentlichen Code meiner Schaltflächen stehen. Sie sind rechteckig und passen sich der Breite eines jeden Bildschirms an.
Um sie hinzuzufügen, platzieren Sie einfach den Code an der Stelle, an der Sie sie anzeigen möchten:
/* CODE SHARE BUTTONS WITHOUT PLUGIN ADDED WITH GENERATEPRESS ELEMENT */
<?php
$botonesURL = urlencode(get_the_permalink());
$botonesTitle = urlencode(get_the_title());
$botonesImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="botones-compartir-wrapper">
<a class="botones-compartir-sharing botones-compartir-email" href="mailto:?subject=<?php echo wp_title(''); ?>&body=<?php echo $botonesURL; ?>" target="_blank" rel="nofollow" aria-label="Mail" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Enviar por e-mail</title> <!-- Title within SVG -->
<path d="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $botonesURL; ?>&media=<?php echo $botonesImage; ?>&description=<?php echo $wplogoutTitle; ?>" target="_blank" rel="nofollow" aria-label="Pinterest" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Send to Pinterest</title> <!-- Title within SVG -->
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-telegram" href="https://t.me/share/url?url=<?php echo $botonesURL;?>&text=<?php echo $botonesTitle;?>" target="_blank" rel="nofollow"><svg width="17px" height="17px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421; " aria-label="Telegram" focusable="false">
<title>Send to Telegram</title> <!-- Title within SVG -->
<path id="telegram-1" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>" target="_blank" rel="nofollow" aria-label="Whatsapp" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Share in Whatsapp</title> <!-- Title within SVG -->
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-reddit" href="https://reddit.com/submit?url=<?php echo $botonesURL;?>&title=<?php echo $botonesTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-label="Reddit" focusable="false">
<title>Send to Reddit</title> <!-- Title within SVG -->
<path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-meneame" href="https://meneame.net/submit?url=<?php echo $botonesURL;?>&title=<?php echo $botonesTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0.162 0.907 15.873 14.384" xml:space="preserve" width="18" height="18" aria-label="Send to Menéame" focusable="false">
<title>Share in Menéame</title> <!-- Title within SVG -->
<path d="M8.228 7.64a3.096 3.096 0 0 1 -1.029 0.401 3.924 3.924 0 0 1 -1.563 0.01c-0.449 -0.086 -0.818 -0.329 -1.114 -0.666 -0.59 -0.669 -1.014 -1.427 -1.14 -2.325 -0.172 -1.229 0.259 -2.226 1.202 -3.009 0.677 -0.561 1.481 -0.833 2.335 -0.985 1.34 -0.239 2.606 0.023 3.833 0.554 0.63 0.272 1.238 0.595 1.887 0.82 0.144 0.05 0.288 0.094 0.439 0.117a0.723 0.723 0 0 0 0.676 -0.256c0.235 -0.266 0.318 -0.583 0.316 -0.93 0.067 -0.004 0.079 0.047 0.101 0.086 0.199 0.368 0.142 0.966 -0.128 1.276 -0.284 0.326 -0.661 0.384 -1.063 0.337a4.134 4.134 0 0 1 -1.306 -0.384c-0.781 -0.373 -1.575 -0.716 -2.424 -0.909a5.782 5.782 0 0 0 -3.149 0.144C4.599 2.421 3.809 3.913 4.218 5.446c0.237 0.885 0.733 1.581 1.51 2.072 0.336 0.214 0.707 0.28 1.097 0.275 0.395 -0.006 0.781 -0.083 1.166 -0.156 0.068 -0.012 0.132 -0.028 0.236 0.003z"/><path d="M9.809 15.176c-0.071 -0.024 -0.207 0.057 -0.229 -0.044 -0.021 -0.099 0.12 -0.131 0.201 -0.166 0.499 -0.207 1.001 -0.405 1.499 -0.612 0.311 -0.13 0.612 -0.274 0.891 -0.465 0.095 -0.065 0.183 -0.14 0.261 -0.227a0.408 0.408 0 0 0 0.081 -0.464c-0.379 -0.95 -0.802 -1.881 -1.134 -2.849 -0.267 -0.781 -0.48 -1.571 -0.536 -2.402 -0.067 -0.98 0.272 -1.742 1.118 -2.264 0.399 -0.248 0.826 -0.433 1.254 -0.617 0.53 -0.229 1.053 -0.464 1.518 -0.818 0.695 -0.53 0.923 -1.241 0.863 -2.08a7.078 7.078 0 0 0 -0.176 -1.116c-0.01 -0.042 -0.067 -0.104 0.008 -0.136 0.068 -0.029 0.104 0.023 0.133 0.077 0.227 0.411 0.403 0.838 0.458 1.31 0.107 0.909 -0.292 1.602 -0.92 2.203 -0.401 0.383 -0.895 0.62 -1.381 0.867 -0.439 0.223 -0.893 0.421 -1.306 0.692 -0.45 0.295 -0.824 0.654 -0.95 1.203 -0.101 0.447 -0.02 0.889 0.071 1.327 0.198 0.962 0.588 1.859 0.972 2.754 0.199 0.462 0.411 0.92 0.569 1.398 0.255 0.771 0.042 1.365 -0.644 1.798 -0.494 0.311 -1.047 0.447 -1.614 0.538 -0.329 0.055 -0.663 0.073 -1.007 0.094zM3.167 5.929c-0.013 0.081 -0.059 0.141 -0.101 0.203 -0.733 1.048 -1.362 2.151 -1.837 3.342 -0.33 0.83 -0.41 1.677 -0.191 2.543 0.271 1.073 0.984 1.733 1.989 2.122 0.729 0.282 1.49 0.418 2.262 0.508 1.073 0.126 2.148 0.212 3.224 0.316 0.104 0.01 0.206 0.039 0.306 0.067 0.049 0.013 0.112 0.032 0.105 0.099 -0.008 0.077 -0.079 0.053 -0.126 0.057 -0.695 0.057 -1.391 0.087 -2.09 0.099 -0.982 0.014 -1.967 0.021 -2.936 -0.141 -1.573 -0.266 -2.793 -1.048 -3.384 -2.594 -0.318 -0.831 -0.279 -1.696 -0.023 -2.538 0.384 -1.264 0.964 -2.424 1.907 -3.373 0.245 -0.247 0.52 -0.457 0.789 -0.674 0.027 -0.019 0.051 -0.053 0.104 -0.035z"/><path d="M5.852 11.68c1.113 -0.183 2.223 -0.282 3.342 -0.149 0.533 0.065 0.634 0.174 0.646 0.711a8.118 8.118 0 0 1 -0.34 2.501 1.264 1.264 0 0 1 -0.175 0.385c-0.034 0.045 -0.069 0.104 -0.14 0.079 -0.06 -0.021 -0.052 -0.085 -0.055 -0.136 -0.016 -0.363 0.044 -0.723 0.077 -1.082 0.049 -0.517 0.134 -1.03 0.087 -1.552 -0.014 -0.166 -0.091 -0.266 -0.239 -0.337 -0.434 -0.207 -0.899 -0.275 -1.369 -0.322 -0.575 -0.057 -1.154 -0.05 -1.729 -0.085 -0.035 -0.002 -0.069 -0.01 -0.106 -0.014z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-mastodon" href="https://mastodon.social/share?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>" target="_blank" rel="nofollow" aria-label="Mastodon" focusable="false"><title>Compártelo en Mastodon</title><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" class="bi bi-mastodon" viewBox="0 0 16 16">
<title>Share in Mastodon</title> <!-- Title within SVG -->
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/>
</svg></a>
<a class="botones-compartir-sharing botones-compartir-bluesky"
href="https://bsky.app/intent/compose?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>"
target="_blank"
rel="nofollow"
aria-label="Bluesky"
focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Share in Bluesky</title> <!-- Title within SVG -->
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"/>
</svg>
</a>
</div>
Dann fügen Sie das CSS in die style.css Ihres Templates(oder Child-Themes) ein und das war's.
/* CSS SHARE BUTTONS WITHOUT PLUGIN */
.botones-compartir-wrapper {
margin: 10px 0;
font-size: 0;
display: flex;
flex-wrap: nowrap; /* Evita que los botones se envuelvan a la siguiente línea */
justify-content: flex-start; /* Alinea los botones a la izquierda */
align-items: center; /* Centra verticalmente los botones */
width: 100%; /* Ocupa todo el ancho disponible */
overflow-x: auto; /* Permite desplazamiento horizontal en pantallas pequeñas */
}
.botones-compartir-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
display: inline-block;
vertical-align: middle;
margin: 3px 0;
white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}
.botones-compartir-sharing {
font-size: 17px;
margin: 0;
padding: 8px 12px;
display: inline-block;
border-radius: 0 !important;
border: none;
line-height: 1;
transition: all 0.3s ease;
flex: 1; /* Causes the buttons to expand to fill the available space. */
min-width: fit-content; /* Ensure that the button is not smaller than its content. */
text-align: center; /* Centres the content of the button */
}
@media only screen and (max-width: 600px) {
.botones-compartir-sharing {
font-size: 14px;
padding: 6px 10px;
}
}
.botones-compartir-sharing svg {
position: relative;
top: 0.10em;
display: inline-block;
width: 1em;
height: 1em;
fill: #fff; /* White colour for icons (as in the first code) */
}
/* Removing rounded edges and previous colour styles */
.botones-compartir-sharing:first-of-type,
.botones-compartir-sharing:last-of-type {
border-radius: 0 !important;
}
/* Original background colours */
.botones-compartir-facebook { background-color: rgba(59, 89, 152, 1); }
.botones-compartir-email { background-color: rgba(19,20,24 ,1); }
.botones-compartir-twitter { background-color: rgba(0, 0, 0, 1); }
.botones-compartir-pinterest { background-color: rgba(189, 8, 28, 1); }
.botones-compartir-whatsapp { background-color: rgba(37, 211, 102, 1); }
.botones-compartir-telegram { background-color: rgba(0,136,204 ,1); }
.botones-compartir-reddit { background-color: rgba(255, 87, 0, 1); }
.botones-compartir-meneame { background-color: rgba(227, 86, 20 ,1); }
.botones-compartir-mastodon { background-color: rgba(6, 21, 255 ,1); }
.botones-compartir-bluesky { background-color: rgba(0, 133, 255 ,1); }
/* Original hover states */
.botones-compartir-facebook:hover { background-color: rgba(59, 89, 152, .8); }
.botones-compartir-email:hover { background-color: rgba(19,20,24 ,.8); }
.botones-compartir-twitter:hover { background-color: rgba(0, 0, 0, .7); }
.botones-compartir-pinterest:hover { background-color: rgba(189, 8, 28, .8); }
.botones-compartir-whatsapp:hover { background-color: rgba(37, 211, 102, .8); }
.botones-compartir-telegram:hover { background-color: rgba(0,136,204 ,.8); }
.botones-compartir-reddit:hover { background-color: rgba(255, 87, 0, .8); }
.botones-compartir-meneame:hover { background-color: rgba(227, 86, 20, .8); }
.botones-compartir-mastodon:hover { background-color: rgba(6, 25, 255, .8); }
.botones-compartir-bluesky:hover { background-color: rgba(0, 133, 255, .8); }
/* Delete !important from fills */
.botones-compartir-meneame,
.botones-compartir-mastodon,
.botones-compartir-bluesky {
fill: #fff !important; /* Ensure that the icons are white */
}
Wenn Sie zu denjenigen gehören, die es vorziehen, ein Plugin zu verwenden, das Ihre Existenz nicht kompliziert macht, oder wenn Sie viele weitere Funktionen benötigen, ist das vollständigste unter den kostenpflichtigen Plugins"Easy Social Share Buttons for WordPress". Es kostet weniger als 15 Dollar. Es ist eine einmalige Zahlung, kein Jahresabonnement und Updates für immer. Sie können nur die Funktionen aktivieren, die Sie benötigen, und Sie können neue Netzwerke manuell hinzufügen.
Die andere Option, die sehr viel eingeschränkter und einfacher ist, da sie das Hinzufügen neuer Netzwerke nicht erlaubt, ist Novashare, von den Machern von Perfmatters. Es kostet 19,95 $ pro Jahr und ist das leichteste Plugin (weniger als 4 KB auf dem Front-End).
*Keiner dieser Links ist ein Affiliate-Link oder ein gesponserter Link. Beide Plugins habe ich früher getestet und/oder benutzt.
Eine Zeit lang habe ich ein sehr leichtes kostenloses Programm getestet: Scriptless Social Sharing, aber es wurde seit mehr als einem Jahr nicht mehr aktualisiert und von seiner Verwendung wird abgeraten.