Bagi pengguna WordPress, plugin adalah satu perkara yang sebenarnya agak banyak diperkatakan. Mencari plugin yang bagus untuk fungsi-fungsi tertentu kadang kala boleh menyebabkan laman sesawang kita menjadi berat atau perlahan. Ini kerana secara tidak langsung, skrip yang diperlukan oleh plugin tersebut akan ‘dipanggil’ sewaktu laman sesawang kita di layari pengunjung dan menambahkan lagi masa untuk memuat turun ke semua fail yang diperlukan. Saya sendiri pun tertarik dengan animasi dan rekabentuk plugin share button terutamanya.
Share Button Tanpa Guna Plugin : Fail Functions.php
Tutorial ini sesuai untuk mereka yang menggunakan ‘Child-Theme’. Ini kerana, sebarang perubahan atau update pada tema WordPress akan memadamkan kod ini secara tidak langsung kita perlu melakukannya semula. Selain itu kelebihan menggunakan ‘Child-Theme’ ini kita bebas membuat rekaan kita termasuk untuk tidak menggunakan fail css yang tidak diperlukan terutamanya plugin Woocommerce. Kod dibawah perlu di salin pada fail functions.php.
function crunchify_social_sharing_buttons($content) {
global $post;
if(is_singular() || is_home()){
// Get current page URL
$crunchifyURL = urlencode(get_permalink());
// Get current page title
$crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$crunchifyThumbnail = 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='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=Crunchify';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
$whatsappURL = 'whatsapp://send?text='.$crunchifyTitle . ' ' . $crunchifyURL;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&title='.$crunchifyTitle;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
// Add sharing button at the end of page/page content
$content .= '<!-- Crunchify.com social sharing. Get your copy here: http://crunchify.me/1VIxAsz -->';
$content .= '<div class="crunchify-social">';
$content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="crunchify-link crunchify-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';
$content .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$content .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$content .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
$content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');
Share Button Tanpa Guna Plugin : Fail Css
Kod dibawah pula adalah fail css untuk memberi stail dan warna mengikut butang ‘share’. Bergantung kepada anda, ianya boleh diubah mengikut citarasa anda sendiri. Ianya lebih fleksibel dan sangat ringkas. Apa yang penting adalah fungsi asas untuk berkongi post di media sosial.
/* Disable WhatsApp button on Desktop - Tutorial link: http://crunchify.me/1VIxAsz */
@media screen and (min-width: 1024px) {
.crunchify-whatsapp {
display: none !important;
}
}
.crunchify-link {
padding: 2px 8px 4px 8px !important;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
margin-top: 2px;
display: inline-block;
text-decoration: none;
}
.crunchify-link:hover,.crunchify-link:active {
color: white;
}
.crunchify-twitter {
background: #00aced;
}
.crunchify-twitter:hover,.crunchify-twitter:active {
background: #0084b4;
}
.crunchify-facebook {
background: #3B5997;
}
.crunchify-facebook:hover,.crunchify-facebook:active {
background: #2d4372;
}
.crunchify-googleplus {
background: #D64937;
}
.crunchify-googleplus:hover,.crunchify-googleplus:active {
background: #b53525;
}
.crunchify-buffer {
background: #444;
}
.crunchify-buffer:hover,.crunchify-buffer:active {
background: #222;
}
.crunchify-pinterest {
background: #bd081c;
}
.crunchify-pinterest:hover,.crunchify-pinterest:active {
background: #bd081c;
}
.crunchify-linkedin {
background: #0074A1;
}
.crunchify-linkedin:hover,.crunchify-linkedin:active {
background: #006288;
}
.crunchify-whatsapp {
background: #43d854;
}
.crunchify-whatsapp:hover,.crunchify-whatsapp:active {
background: #009688;
}
.crunchify-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}
Share Button Tanpa Guna Plugin : Purge Cache
Bagi mereka yang menggunakan plugin W3TC atau Super Cache bolehlah ‘refresh’ atau ‘purge cache’ laman sesawang anda untuk mendapatkan fail terkini. Begitu juga dengan pengguna Cloudflare atau CDN yang lain. Pengguna boleh bereksperimen menggunakan CSS untuk memberikan stail yang terbaik mengikut laman sesawang masing-masing.
Sumber :
http://crunchify.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/
