WordPress Blog Me Social Media Share Buttons Kaise Add Kare (Without Plugin)

Hello Gyanians, आज हम बात करेंगे Social Media Share Buttons के बारे में और सीखेंगे की कैसे आप WordPress blog में social media share buttons को add कर सकते हो और वो भी बिना किसी extra plugin और javascript code का use किये.

आज आपको शायद ही ऐसा कोई blog मिलेगा जिसपर आपको social media share buttons न मिले क्योंकि जब भी आपका कोई content आपके readers को बहुत पसंद आता है तो वो इन social media share buttons की help उसे अपने social media accounts (profile) पर  share करता है.

Social media share buttons को WordPress blogs में add करना बहुत easy है क्योंकि आपको WordPress पर आपको बहुत सारी free plugins मिल जाती है जिन्हें install करके आप social sharing buttons को बहुत आसानी से WordPress blog में add कर सकते हो.

लेकिन जैसा की आप जानते ही हो ज्यादा plugins का use आपकी site की loading speed slow करता है क्योंकि इन plugins की वजह से extra javascript और HTTP request create होती है इसलिए मैं इस post में आपको without plugins के social media share buttons को WordPress blog में add करना बताऊंगा.

Social Media Share Buttons Without Plugin WordPress Blog में कैसे Add करें?

इस post को आगे बढ़ाने से पहले मैं आपको बता दूँ की मैंने social media share buttons को design करने के लिए font awesome icons का use किया है. अगर आप ये नही जानते है की font awesome icons क्या है और कैसे आप blog में इन icons को add कर सकते हो तो इसके लिए दिए गये link पर click करके मेरी post को जरुर पढ़ लें.

Font awesome icons add करने के बाद आपको नीचें दिए php code को copy करके अपने theme की functions.php file में सबसे नीचें paste करना है और फिर update file button पर click करके changes को save करना है.

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=gyanians';
		$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');

Social media share button का code functions.php में add करने से आपको आपकी हर post के सबसे नीचें social sharing icons नजर आ रहें होंगे जिन्हें आप CSS की हेल्प से अपनी choice की हिसाब से design कर सकते हो.

अगर आप Gyanians की तरह design करना चाहते हो तो नीचें दिए गये CSS code को copy करके अपनी theme की style.css file में सबसे नीचें paste कर दीजिये और फिर update file button पर click करके changes को save कर दीजिये.

.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;
}

Social Media Share Buttons Shortcode को WordPress में कैसे Add करें?

ऊपर दिए PHP code से social media share buttons आपकी posts के सबसे नीचें add होंगे अगर आप social media share buttons को अपने widget area में या कहीं और add करना चाहते तो उसके लिए आप shortcode का use कर सकते हो.

Social media share buttons का shortcode बनाने के लिए आपको नीचें दिए गये ऊपर दिए गये PHP code में एक line का code और add करना होगा. इसके लिए आप नीचें दिए code को copy करके functions.php में paste किये गये code के just नीचें paste कर दीजिये और फिर update file button पर click करके changes को save कर दीजिये.

add_shortcode('social','my_share_btn');

उसके बाद जहाँ भी आप [social] shortcode का use करोगे वहां पर social media share buttons add हो जायेंगे. Shortcodes क्या है और WordPress shortcodes कैसे use और create करते है इसकी अधिक जानकारी के लिए आप दिए गये link पर click करके मेरी post को जरुर पढ़ें.

Hello Gyanians, आशा करता हूँ की आपको ये WordPress Blog Me Social Media Share Buttons Kaise Add Kare (Without Plugin) post पसंद आई होगी. अगर आपको इस post से related कोई सवाल या सुझाव है तो नीचे comment करें और इस post को अपने दोस्तों के साथ जरुर share करें.

About : Admin

सु-सुवागातम Gyanians इस वेबसाइट का मकसद है लोगो को हिंदी भाषा में ज्ञान प्रदान करना उनके द्वारा पूछे गए प्रिश्नों के उत्तर देना और यह कार्य करने के लिए हम तात्पर्य है. आप Gyanians को लोगों के साथ शेयर करके हमारी सहायता कर सकते है .

SUBSCRIBE Daily Post Update

Receive Daily Notifications SUBSCRIBE

Reader Interactions

Questions & Answers: Ask Question

    • Neeraj Parmar

      Email par contact karo .. main teamviwer se live css set kar dunga ~

      • Mukesh Gupta

        Thik ho gya direct theme folder me dalne se work nhi kar rhi.. Apprence > customize > additional css me dalne se work kar rhi hai.. Anyway maine css thodi customize ki hai aap dekh ke batao kaisi hai.

        • Neeraj Parmar

          Muje black outline acchi nhi lag rahi .. vaaki aapne accha customize kia hai ~

          • Mukesh Gupta

            Ty for suggesting ise abhi remove kar deta hoon ????

  1. sourav

    sir main code copy paste kiya hai.but jo pahle tha share button wahi wala abhi bhi hai.usko remove krna hoga kya.agar haa to kaise .plz bataye

    • Neeraj Parmar

      Sbse pehle ye dekhiye ki old share button plugin se hai ya built in …agr built-in hai to aapko ye code lagane ki jarurt nhi hai ~

  2. SUMIT KUMAR GUPTA

    sir please mai ek new wordpress user hu mujhe ye btaye ki site ki loading speed kaise badhau mai jetpack, yoast seo, wp optimize aur quick adsense plugin use krta hun please aap ye batayen ki site ki loading speed kaise badhau ek baar mere site ki loading spped bhi check kar len

    • Neeraj Parmar

      Aap sbse pehle jetpack ko remove kar dijiye aapki speed 2.50s se jyada hai .. jetpack remove karte hi 2s ke ander ho jayegi ~

      • SUMIT KUMAR GUPTA

        sir maine ek hosting provider se bat kiya to wo bole ki jetpack use kijiye aur maine compare bhi kiya jo jetpack use nahi krta hai usse to meri site ki loading speed 1.6 s btayi seooptimer me to kya phir bhi mujhe jetpack htana chahiye. aur dusri bat kya aap cdn use krte hai mujhe bhi use krna chahiye

  3. sandeep

    sir ji blogger ke liye koi upaay hai to please share kare

Question & Answer:

Please enter correct information.