वर्डप्रेस ब्लॉग में social share button कैसे add करें: आज के दिन में लगभग सभी लोग social media का उपयोग करते हैं| social media एक ऐसा माध्यम बन चूका है जिससे की किसी भी प्रकार की जानकारी तुरंत पुरे दुनिया में share किया जा सकता है|
अगर आप एक blogger हैं और आप अपने ब्लॉग पोस्ट को ज्यादा से ज्यादा लोगो तक पहुँचाना चाहते हैं तो आपको अपने ब्लॉग के सभी पोस्ट में share button लगाना पड़ेगा जिससे की लोग अगर आपके पोस्ट को पसंद करें तो वो दूसरे के साथ आपके पोस्ट को share कर सके| जब लोग आपके पोस्ट को social media पर अपने group में या अपने दोस्तों के साथ share करते हैं तो इससे आपके लिए positive news होगा क्योंकि इससे आपका views increase होगा और आपका blog धीरे धीरे अधिकतर लोगो के पास पहुचेगा|
आसान शब्दों में कहें तो social share button का उपयोग करके आप अपने ब्लॉग पर ज्यादा से ज्यादा traffic ला सकते हैं जो आपके ब्लॉग को SEO friendly बनाने में मदद करता है|
इस पोस्ट में हम आपको वर्डप्रेस ब्लॉग के सभी पोस्ट में social media share button लगाने का तरीका सिखाऊंगा| इस पोस्ट में आपको code के द्वारा social media share button लगाने सिखाऊंगा क्योंकि ज्यादा plugin का उपयोग करने से हमारा ब्लॉग heavy हो जाता है जिससे की loading time बढ़ जाता है और इस कारण से लोग हमारे ब्लॉग पर visit करना पसंद नहीं करते हैं|
Social media share button क्या होता है?
Social media share button एक clickable button होता है जिसके द्वारा users किसी भी प्रकार के पोस्ट को अन्य media platforms (जैसे की Facebook, Twitter, LinkedIn) पर share कर सकते हैं| आज के समय में सबसे ज्यादा users social media को visit करते हैं तो लगभग सभी लोगो को share buttons के बारे में पता होगा|
Share button का उपयोग करके हम किसी भी digital पोस्ट्स को share करके अधिक से अधिक लोगो तक जानकारी पहुंचा सकते हैं| Share button हमारे ब्लॉग को एक better look भी देता है जिससे हमारा ब्लॉग दिखने में अच्छा होता है, जिसके कारण ज्यादा से ज्यादा लोग हमारे ब्लॉग पर अधिकांश समय बिता सकते हैं|
WordPress blog में social media share button कैसे लगायें (Without plugin).
अगर आपको बिल्कुल भी code का knowledge नहीं है तो मैं आपको यह experiment करने का सुझाव नहीं दूंगा क्योंकि इस पोस्ट में मैंने code के द्वारा ही social share button लगाने का तरीका बताने जा रहा हूँ|
Step 1: सबसे पहले आपको अपने ब्लॉग के admin panel में login कर लेना है|
Step 2: उसके बाद Appearance >> Theme File Editor पर click करना है जिससे आपके सामने आपके ब्लॉग के थीम के code open हो जायेंगे|
Step 3: अब दाहिने तरफ (Right side) में आपको file name का list show होगा जिसमें से आपको functions.php file पर click करना है| इससे आपके सामने functions.php file open हो जायेगा| अब निचे दिए गए code को सबसे पहले copy कीजिये और उसके बाद अपने functions.php file के सबसे अंत में paste कीजिये|
<?php
/**
* Social media share button add at every single post in WordPress
*
* @package Social media share button
* @link https://www.guptatreepoint.com
* @author Sumit Kumar Gupta
* @copyright Copyright Guptatreepoint
* @license GPL-2.0+
*/
function gtp_social_sharing_buttons($content) {
global $post;
if(is_singular() || is_home()){
// Get current page URL
$gtp_current_page_url = urlencode(get_permalink());
// Get current page title
$gtp_current_page_title = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$gtp_thumbnail = 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='.$gtp_current_page_title.'&url='.$gtp_current_page_url.'&via=gtp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$gtp_current_page_url;
$whatsappURL = 'whatsapp://send?text='.$gtp_current_page_title . ' ' . $gtp_current_page_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$gtp_current_page_url.'&title='.$gtp_current_page_title;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$gtp_current_page_url.'&media='.$gtp_thumbnail[0].'&description='.$gtp_current_page_title;
// Add sharing button at the end of page/page content
$content .= '<!-- https://www.guptatreepoint.com social sharing. Get your copy here: https://www.guptatreepoint.com -->';
$content .= '<div class="gtp-social">';
$content .= '<span>Share :</span> <a class="gtp-link gtp-twitter" href="'. $twitterURL .'" target="_blank"><svg width="20" height="20" viewBox="0 -2 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#f7f7f7" stroke="#f7f7f7"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>twitter [#ffffff]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7521.000000)" fill="#ffffff"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M10.29,7377 C17.837,7377 21.965,7370.84365 21.965,7365.50546 C21.965,7365.33021 21.965,7365.15595 21.953,7364.98267 C22.756,7364.41163 23.449,7363.70276 24,7362.8915 C23.252,7363.21837 22.457,7363.433 21.644,7363.52751 C22.5,7363.02244 23.141,7362.2289 23.448,7361.2926 C22.642,7361.76321 21.761,7362.095 20.842,7362.27321 C19.288,7360.64674 16.689,7360.56798 15.036,7362.09796 C13.971,7363.08447 13.518,7364.55538 13.849,7365.95835 C10.55,7365.79492 7.476,7364.261 5.392,7361.73762 C4.303,7363.58363 4.86,7365.94457 6.663,7367.12996 C6.01,7367.11125 5.371,7366.93797 4.8,7366.62489 L4.8,7366.67608 C4.801,7368.5989 6.178,7370.2549 8.092,7370.63591 C7.488,7370.79836 6.854,7370.82199 6.24,7370.70483 C6.777,7372.35099 8.318,7373.47829 10.073,7373.51078 C8.62,7374.63513 6.825,7375.24554 4.977,7375.24358 C4.651,7375.24259 4.325,7375.22388 4,7375.18549 C5.877,7376.37088 8.06,7377 10.29,7376.99705" id="twitter-[#ffffff]"> </path> </g> </g> </g> </g></svg><span class="icon-title">Twitter</span></a>';
$content .= '<a class="gtp-link gtp-facebook" href="'.$facebookURL.'" target="_blank"><svg fill="#ffffff" height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <g id="XMLID_834_"> <path id="XMLID_835_" d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"/> </g> </g></svg><span class="icon-title">Facebook</span></a>';
$content .= '<a class="gtp-link gtp-whatsapp" href="'.$whatsappURL.'" target="_blank"><svg fill="#ffffff" width="20" height="20" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z"></path><path d="M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z"></path></g></svg><span class="icon-title">WhatsApp</span></a>';
$content .= '<a class="gtp-link gtp-linkedin" href="'.$linkedInURL.'" target="_blank"><svg fill="#ffffff" height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "></path> </g></svg><span class="icon-title">LinkedIn</span></a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'gtp_social_sharing_buttons');Note: <?php opening tag आपको हटा देना है अगर आपके पास पहले से functions.php में कुछ भी code है तो|
Step 4:अब ऊपर दिए गए code को paste करने के बाद सबसे निचे Update File button पर click करना है जिससे की आपका code उस file में save हो जायेगा|
Step 5: अभी तक हमें केवल share button add किया है जबकि इसे हमें एक अच्छा design देने के लिए कुछ CSS code add करने होंगे| इसके लिए आपको Appearance >> Customize >> Additional CSS पर click करना है| इससे आपके सामने left side में एक code box open हो जायेगा जिसके अंत में निचे दिया गया CSS code को copy करके paste करना है|
/* Social share button */
.gtp-link {
padding: 8px 12px!important;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
display: inline-flex;
text-decoration: none;
}
.gtp-link .icon-title{
padding-left: 5px;
border-left: 1px solid #ddd;
margin-left: 5px;
}
.gtp-link:hover,.gtp-link:active {
color: white;
}
.gtp-twitter {
background: #00aced;
}
.gtp-twitter:hover {
background: #2a81a2;
}
.gtp-facebook {
background: #3B5997;
}
.gtp-facebook:hover {
background: #19444b;
}
.gtp-whatsapp {
background: #25D366;
}
.gtp-whatsapp:hover {
background: #229a4f;
}
.gtp-linkedin {
background: #0074A1;
}
.gtp-linkedin:hover {
background: #18576f;
}Step 6: CSS code paste करने के बाद code को Publish करना है|
Note: ऊपर दिए गए code के द्वारा हम अपने ब्लॉग के सभी पोस्ट के निचे वाले हिस्से में share button लगा सकते हैं| अगर आपको अपने ब्लॉग के ऊपर वाले हिस्से में share button लगाना है तो आप निचे दिए गए code का इस्तेमाल करें| यह code आपको functions.php में add करना है लेकिन आपको ऊपर दिए गए code को remove करना है अगर आपने पहले से add कर रखा है तो|
<?php
/**
* Social media share button add at every single post in WordPress in the top of the post
*
* @package Social media share button
* @link https://www.guptatreepoint.com
* @author Sumit Kumar Gupta
* @copyright Copyright Guptatreepoint
* @license GPL-2.0+
*/
function gtp_social_sharing_buttons($contents) {
global $post;
if(is_singular() || is_home()){
// Get current page URL
$gtp_current_page_url = urlencode(get_permalink());
// Get current page title
$gtp_current_page_title = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$gtp_thumbnail = 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='.$gtp_current_page_title.'&url='.$gtp_current_page_url.'&via=gtp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$gtp_current_page_url;
$whatsappURL = 'whatsapp://send?text='.$gtp_current_page_title . ' ' . $gtp_current_page_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$gtp_current_page_url.'&title='.$gtp_current_page_title;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$gtp_current_page_url.'&media='.$gtp_thumbnail[0].'&description='.$gtp_current_page_title;
// Add sharing button at the end of page/page content
$content = '<!-- https://www.guptatreepoint.com social sharing. Get your copy here: https://www.guptatreepoint.com -->';
$content .= '<div class="gtp-social">';
$content .= '<span>Share :</span> <a class="gtp-link gtp-twitter" href="'. $twitterURL .'" target="_blank"><svg width="20" height="20" viewBox="0 -2 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#f7f7f7" stroke="#f7f7f7"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>twitter [#ffffff]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7521.000000)" fill="#ffffff"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M10.29,7377 C17.837,7377 21.965,7370.84365 21.965,7365.50546 C21.965,7365.33021 21.965,7365.15595 21.953,7364.98267 C22.756,7364.41163 23.449,7363.70276 24,7362.8915 C23.252,7363.21837 22.457,7363.433 21.644,7363.52751 C22.5,7363.02244 23.141,7362.2289 23.448,7361.2926 C22.642,7361.76321 21.761,7362.095 20.842,7362.27321 C19.288,7360.64674 16.689,7360.56798 15.036,7362.09796 C13.971,7363.08447 13.518,7364.55538 13.849,7365.95835 C10.55,7365.79492 7.476,7364.261 5.392,7361.73762 C4.303,7363.58363 4.86,7365.94457 6.663,7367.12996 C6.01,7367.11125 5.371,7366.93797 4.8,7366.62489 L4.8,7366.67608 C4.801,7368.5989 6.178,7370.2549 8.092,7370.63591 C7.488,7370.79836 6.854,7370.82199 6.24,7370.70483 C6.777,7372.35099 8.318,7373.47829 10.073,7373.51078 C8.62,7374.63513 6.825,7375.24554 4.977,7375.24358 C4.651,7375.24259 4.325,7375.22388 4,7375.18549 C5.877,7376.37088 8.06,7377 10.29,7376.99705" id="twitter-[#ffffff]"> </path> </g> </g> </g> </g></svg><span class="icon-title">Twitter</span></a>';
$content .= '<a class="gtp-link gtp-facebook" href="'.$facebookURL.'" target="_blank"><svg fill="#ffffff" height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <g id="XMLID_834_"> <path id="XMLID_835_" d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"/> </g> </g></svg><span class="icon-title">Facebook</span></a>';
$content .= '<a class="gtp-link gtp-whatsapp" href="'.$whatsappURL.'" target="_blank"><svg fill="#ffffff" width="20" height="20" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z"></path><path d="M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z"></path></g></svg><span class="icon-title">WhatsApp</span></a>';
$content .= '<a class="gtp-link gtp-linkedin" href="'.$linkedInURL.'" target="_blank"><svg fill="#ffffff" height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "></path> </g></svg><span class="icon-title">LinkedIn</span></a>';
$content .= '</div>';
$content .= $contents;
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'gtp_social_sharing_buttons');निष्कर्ष
ऊपर दिए गए code का उपयोग करके आप एक बेहतरीन design का social share button अपने वर्डप्रेस ब्लॉग में add कर सकते हैं जिसके द्वारा users आपके ब्लॉग पोस्ट को ज्यादा से ज्यादा लोगो तक share करके information पहुंचा सकते हैं|
Social share button आपके ब्लॉग पर ज्यादा views लाने में भी सहायक होता है| आज के समय में सबसे बड़ा power social media का होता है जिसके द्वारा लोगो को कुछ ही मिनटों या seconds में जरुरी से जरुरी information मिल जाती है|
Leave a Reply