"TR: "Mano kuklia nuomone..."
Jei kalbėtume apie optimizavimą, geriausias įskiepis yra tas, kuris nenaudojamas.
Tai nereiškia, kad nėra gerų, lengvų ir funkcionalių įskiepių, kuriuos būtų galima naudoti norint į "WordPress" pridėti socialinės žiniasklaidos dalijimosi mygtukus. Kartais alternatyvos nėra. Tačiau jei ieškote ko nors paprasto ir tikrai lengvo, be jokių įmantrybių, skaitiklių, skriptų ar išorinių užklausų, geriausias variantas - naudoti tam tikrą kodą ir CSS.
Tris mėnesius atlikęs kelių lankomiausių pranešimų A/B testą, pastebėjau, kad stačiakampiai naudojami dažniau nei apvalūs pradmenys.
Pirminis kodas buvo pagrįstas šiuo kodu iš WPLogout, skirtu GeneratePress šablonui, ir jį vis dar galima derinti ir tobulinti, nes tai yra tos versijos (kurioje buvo rodomi apvalūs mygtukai) pataisymas, tačiau jis tinka bet kuriam šablonui.
Kaip matote, kiekvienam mygtukui sukurta CSS klasė, todėl labai lengva pridėti ar pašalinti mygtukus, keisti jų dydžius, spalvas, eiliškumą ir t. t.
Kartais sudėtingiausia rasti tam tikrų tinklų dalijimosi URL struktūrą, nors ir tam yra gudrybių, ir gauti SVG piktogramų HTML, jei jo nėra.
Čia palieku tikrąjį savo mygtukų kodą. Jie yra stačiakampio formos ir prisitaiko prie bet kurio ekrano pločio.
Jei norite juos pridėti, tiesiog įrašykite kodą ten, kur norite juos rodyti:
/* 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>
Tuomet pridėkite CSS į savo šablono(arba antrinės temos) style.css ir viskas.
/* 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 */
}Jei esate vienas iš tų, kurie nori naudoti įskiepį ir neapsunkinti savo egzistencijos arba jums reikia daug daugiau funkcijų, labiausiai išsamus tarp mokamų yra"Easy Social Share Buttons for WordPress". Jis kainuoja mažiau nei 15 dolerių. Tai vienkartinis mokėjimas, jokios metinės prenumeratos ir atnaujinimai visam laikui. Galite aktyvuoti tik tas funkcijas, kurių jums reikia, o naujus tinklus galite pridėti rankiniu būdu.
Kita galimybė, daug ribotesnė ir paprastesnė, nes neleidžia pridėti naujų tinklų, yra " Perfmatters" kūrėjų " Novashare". Jis kainuoja 19,95 USD per metus ir yra lengviausias įskiepis (mažiau nei 4 KB priekyje).
*Nė viena iš šių nuorodų nėra susijusi su filialais ar remiamomis nuorodomis. Abu įskiepiai, kuriuos išbandžiau ir (arba) naudojau tą pačią dieną.
Kurį laiką bandžiau labai lengvą nemokamą: Tačiau jis nebuvo atnaujintas daugiau nei metus ir jo naudoti nerekomenduojama.
