Δημιουργία responsive social sharing buttons για site

Ιάκωβος Φρούντας 571 views0

Μοιράσου το

Δεν μπορούμε να φανταστούμε ένα site χωρίς responsive social sharing buttons. Όπως λοιπόν μπορείτε να δείτε κ απο τον τίτλο σε αυτό το άρθρο θα δούμε τα βήματα για να εισάγουμε τα social sharing buttons στο site μας:

  • xωρίς την χρήση κάποιου plugin
  • χωρίς κώδικα Javascript
  • χωρίς καμία επίπτωση στην ταχύτητα του site

Γιατί να δημιουργήσετε τα δικά σας social sharing buttons

  • Τα περισσότερα απο τα social sharing buttons plugins δεν είναι παραμετροποιημένα όπως τα θέλετε και σύμφωνα με τις ανάγκες σας
  • Υπάρχει πιθανότητα να φορτώνουν τα εικονίδια ξεχωριστά όπου αυξάνονται  τα άχρηστα HTTP request προς τον σέρβερ σας.
  • Πάρα πολλά plugins για να φορτώσουν χρησιμοποιούν Java script για κάθε ένα απο τα κουμπιά ξεχωριστά πράγμα το οποίο επηρεάζει την ταχύτητα και την απόδοση της σελίδας σας.
  • Εάν η σελίδα σας είναι γρήγορη, το site σας θα αναριχηθεί ψηλά στην κατάταξη της Google.
  • Εάν έχετε έναν γρήγορο ιστότοπο έχετε περισσότερες πιθανότητες να σας ξαναεπισκεφθεί κανείς.

Βήμα 1ο

Ανοίγουμε το style.css του θέματός μας και εισάγουμε τον παρακάτω κώδικα:

.social-link {
padding: 9px 10px;
color: white;
font-size: 16px;
margin: auto;
font-weight: 500;
}.social-link:hover,.social-link:active, .social-link:visited{
color: #fff;
}
.social-twitter {
background: #1dcaff;
}

.social-twitter:hover,.social-twitter:active {
background: #279ebf;
}

.social-facebook {
background: #3b5998;
}

.social-facebook:hover,.social-facebook:active {
background: #2d4372;
}

.social-googleplus {
background: #dd4b39;
}

.social-googleplus:hover,.social-googleplus:active {
background: #b53525;
}

.social-buffer {
background: #007ab6;
}

.social-buffer:hover,.social-buffer:active {
background: #006190;
}

.social-tumblr {
background: #36465d;
}

.social-tumblr:hover,.social-tumblr:active {
background: #202e42;
}

.social-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}

.social-share {
font-size: 21px;
font-weight: 700;
color: #B8B8B8;
}

.social-pinterest {
background: #cb2026;
}

.social-pinterest:hover,.frountas-pinterest:active {
background: #a61d21;
}

@media (max-width: total_site_width()) {
.social-social, .social-share, .social-pinterest, .social-buffer, .social-googleplus, .social-facebook, .social-twitter,.social-tumblr, .social-link {
display:inline-block;
top: auto;
left:auto;
width: 100%;
text-align:center;
}
}

Βήμα 2ο

Σιγουρευτείτε ότι έχετε καθαρίσει την μνήμη cache. Εγώ χρησιμοποιώ το WP Super Cache στο Technode.

Βήμα 3ο

Διαγράψτε όλα τα υπόλοιπα responsive social sharing buttons που έχετε εγκαταστήσει πριν.

Εάν θελετε να εμφανίζονται τα social sharing buttons στην κορυφή των άρθρων σας εισάγετε τον παρακάτω κώδικα στο αρχείο functions.php

function social_sharing_buttons($content) {
if(is_singular() || is_home()){

// Get current page URL
$socialURL = get_permalink();

// Get current page title
$socialTitle = str_replace( ‘ ‘, ‘%20’, get_the_title());

// Get Post Thumbnail for pinterest
$socialThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );

// Construct sharing URL without using any script
$twitterURL = ‘https://twitter.com/intent/tweet?text=’.$socialTitle.’&url=’.$socialURL.’&via=technodegr’;
$facebookURL = ‘https://www.facebook.com/sharer/sharer.php?u=’.$socialURL;
$googleURL = ‘https://plus.google.com/share?url=’.$socialURL;
$bufferURL = ‘https://bufferapp.com/add?url=’.$socialURL.’&text=’.$socialTitle;

// Based on popular demand added Pinterest too
$pinterestURL = ‘https://pinterest.com/pin/create/button/?url=’.$socialURL.’&media=’.$socialThumbnail[0].’&description=’.$socialTitle;

// Add sharing button at the end of page/page content
$variable .= ‘

‘;

return $variable.$content;
}else{
// if not a post/page then don’t include sharing button
return $variable.$content;
}
};
add_filter( ‘the_content’, ‘social_sharing_buttons’);

Eάν χρειάζεστε περισσότερη βοήθεια παρακαλώ σχολιάστε ελεύθερα 🙂