Maak je eigen share buttons in WordPress zonder plugin
Er bestaan voor WordPress tal van plugins die de mogelijkheid geven om heel gemakkelijk berichten en pagina’s te delen op social media. Maar waarom zou je een plugin gebruiken wanneer je dit ook zelf kunt maken?
Het probleem met plugins
Er zijn meerdere redenen te bedenken waarom je geen plugin zou moeten gebruiken voor iets simpels als het toevoegen van een deeloptie in WordPress. Ik ga het nu niet hebben over een verbetering in de prestaties (al is dit zeker een ding). Waarom steeds meer mensen kiezen voor het elimineren van social sharing plugins is voor een verbetering van de privacy.
De meeste plugins laden meerdere cookies in op je website waardoor je bezoekers gevolgd kunnen worden. Met het oog op de AVG privacywet is dit natuurlijk not-done.
Social media share buttons maken
De sociale netwerken waar ik me op focus zijn Twitter, Facebook, LinkedIn, Google Plus, WhatsApp en Pinterest. Ieder van deze sociale netwerken heeft een eigen share url met enkele parameters. Door de juiste permalinks, pagina titels en eventueel featured image op te halen kan deze url geautomatiseerd worden gegenereerd.
Maak de functie in functions.php
function webdesignert_share_buttons() {
$shareURL = urlencode(get_the_permalink());
$shareTitle = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));
$shareMedia = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
include( locate_template('share-template.php', false, false) );
}
Maak het template bestand share-template.php
<ul class="share-buttons">
<li class="share-twitter">
<a href="https://twitter.com/intent/tweet?text=<?php echo $shareTitle; ?>&url=<?php echo $shareURL; ?>" target="_blank">
<svg id="twitter" data-name="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<title>twitter</title>
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
</svg>
</a>
</li>
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $shareURL; ?>" target="_blank">
<svg id="facebook" data-name="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512">
<title>facebook</title>
<path d="M215.8 85H264V3.6C255.7 2.5 227.1 0 193.8 0 124.3 0 76.7 42.4 76.7 120.3V192H0v91h76.7v229h94V283h73.6l11.7-91h-85.3v-62.7c0-26.3 7.3-44.3 45.1-44.3z"/>
</svg>
</a>
</li>
<li class="share-linkedin">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $shareURL; ?>&title=<?php echo $shareTitle; ?>" target="_blank">
<svg id="linkedin" data-name="linkedin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<title>linkedin</title>
<path d="M100.3 448H7.4V148.9h92.9V448zM53.8 108.1C24.1 108.1 0 83.5 0 53.8S24.1 0 53.8 0s53.8 24.1 53.8 53.8-24.1 54.3-53.8 54.3zM448 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448h-.1z"/>
</svg>
</a>
</li>
<li class="share-googleplus">
<a href="https://plus.google.com/share?url=<?php echo $shareURL; ?>" target="_blank">
<svg id="googleplus" data-name="googleplus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<title>googleplus</title>
<path d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"/>
</svg>
</a>
</li>
<li class="share-whatsapp">
<a href="whatsapp://send?text=<?php echo $shareTitle; ?> <?php echo $shareURL; ?>" target="_blank">
<svg id="whatsapp" data-name="whatsapp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<title>whatsapp</title>
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
</svg>
</a>
</li>
<li class="share-pinterest">
<a href="http://pinterest.com/pin/create/button/?url=<?php echo $shareURL; ?>&media=<?php echo $shareMedia; ?>&description=<?php echo $shareTitle; ?>" target="_blank">
<svg id="pinterest" data-name="pinterest" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<title>pinterest</title>
<path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/>
</svg>
</a>
</li>
</ul>
De styling van de buttons
.share-buttons {
font-size: 0.7rem;
line-height: 0.7rem;
letter-spacing: 1px;
margin: 0 0 3rem;
z-index: 2;
position: relative;
text-align: center;
list-style-type: none;
padding: 0;
display: flex;
max-width: 700px;
width: 100%;
}
.share-buttons svg {
fill: #fff;
width: 16px;
height: 16px;
}
.share-googleplus svg {
width: 20px;
height: 16px;
}
.share-buttons a {
display: block;
padding: 10px 20px 10px 20px;
text-align: center;
transition: opacity .15s ease-in-out;
}
.share-buttons a:hover {
opacity: .9;
}
.share-buttons li {
height: auto;
flex: 1;
}
.share-buttons li:first-child a {
border-radius: 3px 0 0 3px;
}
.share-buttons li:last-child a {
border-radius: 0 3px 3px 0;
}
.share-twitter a {
background: #1da1f2;
}
.share-facebook a {
background: #3b5998;
}
.share-linkedin a {
background: #0e76a8;
}
.share-googleplus a {
background: #db4437;
}
.share-whatsapp a {
background: #25d366;
}
.share-pinterest a {
background: #b5071a;
}
@media (min-width: 768px) {
.share-whatsapp {
display: none;
}
}
@media (max-width: 575.98px) {
.share-buttons {
display: block;
text-align: left;
}
.share-buttons li {
display: inline-block;
text-align: left;
margin: 0 1px 1px 0;
}
.share-buttons li:first-child a {
border-radius: 0;
}
.share-buttons li:last-child a {
border-radius: 0;
}
}
Je hoeft nu alleen nog maar de functie aan te roepen op de plek waar je ze wilt hebben.
<?php webdesignert_share_buttons(); ?>