WordPress Blog में Social Media Share Button कैसे जोड़ें? Without plugins

Website owners और bloggers के लिए social media एक बहुत बड़ा platform है, क्योंकि यहाँ से अच्छी website traffic बढ़ाई जा सकती है। Social media के जरिए अपने website या blog को popular भी बनाया जा सकता है। इसलिए इस post में हम जानेंगे कि WordPress website/blog में बिना plugin के social share button कैसे add करें।

आपने देखा होगा कि लगभग हर वेबसाइट पर Facebook, Twitter, Google+, WhatsApp जैसे social share buttons पोस्ट या कंटेंट के साथ होते हैं। इनकी मदद से users आसानी से किसी भी content को social media platforms पर share कर सकते हैं। अगर किसी visitor को आपका blog post पसंद आता है, तो वह उसे social media पर भी share करता है। इसलिए blog या website पर social share button का होना बहुत जरूरी है, ताकि users सीधे अपने social profiles के जरिए आपकी पोस्ट को आसानी से share कर सकें।

यहाँ हम WordPress blog में बिना plugin के social share button add करने के बारे में बात कर रहे हैं। अब आप सोच रहे होंगे कि WordPress पर पहले से ही बहुत सारे plugins available हैं, जिनकी मदद से हम आसानी से social share buttons add कर सकते हैं। लेकिन ज्यादा plugins का इस्तेमाल करने से WordPress blog की loading speed slow हो जाती है और bandwidth भी ज्यादा खर्च होती है। क्योंकि plugins extra JavaScript और HTTP requests add करते हैं, इसलिए website/blog की बेहतर loading speed के लिए यही सही रहेगा कि कम से कम plugins का इस्तेमाल किया जाए।

WordPress blog में बिना plugin के social media share button कैसे add करें?

सबसे पहले अपने WordPress blog का dashboard open करें। अब menu में Appearance → Theme File Editor पर जाएं। यहाँ आपको आपके blog की core files दिखाई देंगी। इनमें से functions.php file को open करें और नीचे दिया गया code इस file में add करें।

अगर आप चाहें, तो hosting के cPanel में जाकर भी यह code add कर सकते हैं। इसके लिए path होगा:

public_html → wp-content → themes → (अपनी theme select करें)

और फिर वहाँ functions.php file को open करके code add कर दें।

इस तरीके से आप बिना किसी plugin के आसानी से अपने WordPress blog में social share buttons जोड़ सकते हैं।

function my_share_btn($content)

{

global $post;

if(is_single())

{

// Get the post's URL that will be shared

$permalink=urlencode(get_the_permalink());

// Get the post's title

$title=str_replace(' ', '%20', get_the_title());

// Compose the share links for Facebook, Twitter, Google+ and Whatsapp

$tw = 'https://twitter.com/intent/tweet?text='.$title.'&url='.$permalink.'&via=solutionsoul';

$fb = 'https://www.facebook.com/sharer/sharer.php?u='.$permalink;

$gp = 'https://plus.google.com/share?url='.$permalink;

$wp = 'whatsapp://send?text=*'.$title.'*'.$permalink; 

$content.='<div class="social-box">';

$content.='<div class="sb-title"> <i class="fa fa-share-alt" aria-hidden="true"></i> Share this Post </div>';

$content.='<div class="fb sb-icon"> <a href="'.$fb.'" target="_blank" title="Share this post on Facebook"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </div>';

$content.='<div class="tw sb-icon"> <a href="'.$tw.'" target="_blank" title="Share this post on Twitter"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </div>';

$content.='<div class="gp sb-icon"> <a href="'.$gp.'" target="_blank" title="Share this post on Google Plus"> <i class="fa fa-google-plus" aria-hidden="true"></i> </a> </div>';

$content.='<div class="wp sb-icon"> <a href="'.$wp.'" target="_blank" title="Share this post on Whatsapp"> <i class="fa fa-whatsapp" aria-hidden="true"></i> </a> </div>';

$content.='</div>';

return $content;

}

else

{

return $content;

}

}

add_filter( 'the_content', 'my_share_btn');

Code source: Gyanians.com

अब आपके WordPress blog में social share buttons add हो चुके हैं। आप इन्हें अपने हर post और pages के नीचे देख सकते हैं।

अब आपकी site पर social share buttons तो add हो गए हैं, लेकिन अभी उनका design करना बाकी है। इसके लिए आप CSS का इस्तेमाल कर सकते हैं। अगर आपको CSS आती है, तो आप अपनी requirement के अनुसार social media share buttons को design कर सकते हैं।

हम नीचे एक CSS code दे रहे हैं, जिसकी मदद से आप इन buttons को design कर सकते हैं।

इसके लिए WordPress dashboard में Appearance → Theme File Editor पर जाएं और style.css file को open करें। अब नीचे दिया गया code copy करके वहाँ paste कर दें।.

.social-box {

margin-top:10px;

margin-bottom:10px;

}

.social-box .sb-title

{

font-weight:bold;

font-size:18px;

    margin-bottom:5px;

}

.social-box .sb-icon

{

background-color:green;

display:inline-block;

padding:8px 15px;

margin:3px;

border-radius:50%;

}

.social-box .sb-icon a

{

color:#fff;

}

.social-box .fb 

{

background-color:#3b5998;

}

.social-box .fb:hover 

{

background-color:#324b81;

}

.social-box .tw 

{

background-color:#55acee;

}

.social-box .tw:hover 

{

background-color:#178de8;

}

.social-box .gp

{

background-color:#dd4b39;

}

.social-box .gp:hover 

{

background-color:#ae2e1e;

}

.social-box .wp

{

background-color:#4dc247;

}

.social-box .wp:hover 

{

background-color:#3fac39;

}

अब आप अपनी website या blog को open करके देख सकते हैं कि social share buttons show हो रहे हैं या नहीं। ये buttons आपके post और pages के नीचे दिखाई देंगे।

अगर आप चाहते हैं कि ये buttons post के ऊपर (before content) show हों, तो नीचे दिया गया code पहले वाले code की जगह replace कर दें। जहाँ आपने पहले code add किया था, वहीं इस नए code को डालकर उसे बदल दें।

add_shortcode('social','my_share_btn');

Social share plugins की तुलना में manually code add करके social share buttons लगाना ज्यादा बेहतर होता है। क्योंकि कई plugins में unnecessary social media sites की extra coding शामिल होती है, जिसकी जरूरत नहीं होती। इससे ज्यादा scripts load होती हैं और blog की loading speed slow हो जाती है। साथ ही, ज्यादा plugins इस्तेमाल करने पर hosting server पर unnecessary HTTP requests भी बढ़ जाती हैं।

इस post में हमने WordPress blog में बिना plugins के social media share buttons कैसे add करें, इसके बारे में जानकारी दी है।

अगर आपको यह post पसंद आई हो, तो इसे जरूर share करें! 😊