"TR: "Manuprāt..."
Ja runājam par optimizāciju, tad labākais spraudnis ir tas, kas netiek izmantots.
Tas nenozīmē, ka nav labu, vieglu un funkcionālu spraudņu, ko var izmantot, lai pievienotu WordPress sociālo mediju koplietošanas pogas. Dažreiz nav alternatīvas. Tomēr, ja jūs meklējat kaut ko vienkāršu un patiešām vieglu, bez frills, skaitītājiem, skriptiem vai jebkāda veida ārējiem pieprasījumiem, labākais risinājums ir izmantot kodu un dažus CSS.
Pēc trīs mēnešu laikā veiktā A/B testa ar vairākiem visvairāk apmeklētajiem ziņojumiem esmu pamanījis, ka taisnstūra formas tiek izmantotas biežāk nekā apaļas.
Sākotnējais kods bija balstīta uz šo vienu no WPLogout, par GeneratePress veidni, un to joprojām var atkļūdošanas un uzlabot, jo tas ir noteikt no šīs versijas (kas parādīja apaļas pogas), bet tas darbojas jebkurā veidni.
Kā redzat, katrai pogai ir izveidota CSS klase, tāpēc ir ļoti viegli pievienot vai noņemt pogas, mainīt to izmērus, krāsas, mainīt to secību utt.
Sarežģītākais dažkārt ir atrast konkrētu tīklu koplietošanas URL struktūru, lai gan arī tam ir triki, un iegūt SVG ikonu HTML, ja tāda nav.
Šeit es atstāju savu pogu faktisko kodu. Tās ir taisnstūra formas un pielāgojas jebkura ekrāna platumam.
Lai tos pievienotu, vienkārši ievietojiet kodu vietā, kur vēlaties tos parādīt:
/* 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>
Pēc tam pievienojiet CSS šablona(vai bērnu tēmas) style.css un viss.
/* 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 */
}Ja esat viens no tiem, kas izvēlas izmantot spraudni un nesarežģīt savu eksistenci vai jums ir nepieciešams daudz vairāk funkciju, vispilnīgākais no maksas ir"Easy Social Share Buttons for WordPress". Tas maksā mazāk nekā 15 dolārus. Tas ir vienreizējs maksājums, bez ikgadējas abonēšanas un atjauninājumiem uz visiem laikiem. Jūs varat aktivizēt tikai tās funkcijas, kas jums nepieciešamas, un jūs varat pievienot jaunus tīklus manuāli.
Otra iespēja, kas ir daudz ierobežotāka un vienkāršāka, jo neļauj pievienot jaunus tīklus, ir Novashare, ko piedāvā Perfmatters radītāji. Tas maksā 19,95 ASV dolārus gadā un ir visvieglākais spraudnis (mazāk nekā 4 KB priekšpusē).
*Neviena no šīm saitēm nav filiāļu vai sponsorētas saites. Abi spraudņi, kurus es testēju un/vai izmantoju.
Kādu brīdi es testēju ļoti vieglu bezmaksas: Tas nav atjaunināts jau vairāk nekā gadu, un tā lietošana tiek atteikta.
