Πώς να προσθέσετε κουμπιά κοινής χρήσης κοινωνικών μέσων χωρίς plugins

Publicado: 04/02/2025 : 13:56 | Actualizado: 04/02/2025 : 14:25 |

No comments

 
Πώς να προσθέσετε κουμπιά κοινής χρήσης κοινωνικών μέσων χωρίς plugins 0

"TR: "Λοιπόν, κατά την ταπεινή μου γνώμη..."

Αν μιλάμε με όρους βελτιστοποίησης, το καλύτερο πρόσθετο για οτιδήποτε είναι αυτό που δεν χρησιμοποιείται.

Αυτό δεν σημαίνει ότι δεν υπάρχουν καλά, ελαφριά και λειτουργικά πρόσθετα που μπορούν να χρησιμοποιηθούν για να προσθέσετε αυτά τα κουμπιά κοινής χρήσης κοινωνικών μέσων στο WordPress. Μερικές φορές δεν υπάρχει εναλλακτική λύση. Ωστόσο, αν ψάχνετε για κάτι απλό και πραγματικά ελαφρύ, χωρίς διακοσμητικά στοιχεία, μετρητές, σενάρια ή εξωτερικές αιτήσεις οποιουδήποτε είδους, η καλύτερη επιλογή είναι να χρησιμοποιήσετε λίγο κώδικα και λίγο CSS.

Αφού έκανα μια δοκιμή A/B σε αρκετές από τις πιο δημοφιλείς αναρτήσεις για τρεις μήνες, παρατήρησα ότι τα ορθογώνια χρησιμοποιούνται περισσότερο από τα στρογγυλά πρωτότυπα.

Πώς να προσθέσετε κουμπιά κοινής χρήσης κοινωνικών μέσων χωρίς πρόσθετο
Έτσι έμοιαζαν τα κουμπιά πριν αφαιρεθούν οριστικά τα κουμπιά Facebook και X
Πώς να προσθέσετε κουμπιά κοινής χρήσης κοινωνικών μέσων χωρίς πρόσθετο
Αυτές είναι οι τρέχουσες: Τα Mail, Pinterest, Telegram, WhatsApp, Reddit, Menéame, Mastodon και Bluesky.

Ο αρχικός κώδικας βασίστηκε σε αυτόν από το WPLogout, για το πρότυπο GeneratePress, και μπορεί ακόμα να διορθωθεί και να βελτιωθεί, επειδή είναι μια διόρθωση από εκείνη την έκδοση (η οποία έδειχνε τα στρογγυλά κουμπιά), αλλά λειτουργεί για οποιοδήποτε πρότυπο.

Όπως μπορείτε να δείτε, δημιουργείται μια κλάση CSS για κάθε κουμπί, οπότε είναι πολύ εύκολο να προσθέσετε ή να αφαιρέσετε κουμπιά, να αλλάξετε μεγέθη, χρώματα, να τα αναδιατάξετε κ.λπ.

Το πιο περίπλοκο πράγμα μερικές φορές είναι να βρείτε τη δομή της διεύθυνσης URL κοινής χρήσης ορισμένων δικτύων, αν και υπάρχουν κόλπα και γι' αυτό, και να αποκτήσετε την HTML των εικονιδίων SVG, αν δεν υπάρχει.

Εδώ αφήνω τον πραγματικό κώδικα των κουμπιών μου. Είναι ορθογώνια και προσαρμόζονται στο πλάτος οποιασδήποτε οθόνης.

Για να τα προσθέσετε, απλά τοποθετήστε τον κώδικα στο σημείο που θέλετε να τα εμφανίσετε:

/* 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(''); ?>&amp;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; ?>&amp;media=<?php echo $botonesImage;   ?>&amp;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>

Στη συνέχεια, προσθέτετε το CSS στο style.css του προτύπου σας(ή του παιδικού σας θέματος) και αυτό είναι όλο.

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

Εάν είστε από εκείνους που προτιμούν να χρησιμοποιούν ένα πρόσθετο και να μην περιπλέκουν την ύπαρξή σας ή χρειάζεστε πολλά περισσότερα χαρακτηριστικά, το πιο ολοκληρωμένο μεταξύ των επί πληρωμή είναι το"Easy Social Share Buttons for WordPress". Κοστίζει λιγότερο από 15 δολάρια. Είναι μια εφάπαξ πληρωμή, χωρίς ετήσια συνδρομή και ενημερώσεις για πάντα. Μπορείτε να ενεργοποιήσετε μόνο τις λειτουργίες που χρειάζεστε και μπορείτε να προσθέσετε νέα δίκτυα με μη αυτόματο τρόπο.

Η άλλη επιλογή, πολύ πιο περιορισμένη και απλούστερη, καθώς δεν επιτρέπει την προσθήκη νέων δικτύων, είναι η Novashare, από τους δημιουργούς του Perfmatters. Κοστίζει 19,95 δολάρια ετησίως και είναι το ελαφρύτερο πρόσθετο (λιγότερο από 4 KB στο front-end).

*Κανένας από αυτούς τους συνδέσμους δεν είναι σύνδεσμος θυγατρικών ή χορηγίας. Και τα δύο plugins τα δοκίμασα ή/και τα χρησιμοποίησα παλαιότερα.

Για λίγο καιρό δοκίμαζα ένα πολύ ελαφρύ δωρεάν: Αλλά δεν έχει ενημερωθεί για περισσότερο από ένα χρόνο και η χρήση του αποθαρρύνεται.


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Σχετικά άρθρα

Σχολιάστε