WordPress में Social Media Share Buttons कैसे Add करे (Without Plugin)

Social Share WordPress Without Plugin - WordPress Tutorial in Hindi

आज हम बात करेंगे WordPress Me Social Media Share Button Kaise Add Kare के बारे में और सीखेंगे की कैसे आप WordPress blog में social media share buttons को add कर सकते हो और वो भी बिना किसी extra plugin और javascript code का use किये. WordPress Tutorial in Hindi

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

WordPress में Social Media Share Buttons कैसे Add करे (Without Plugin)

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 Share WordPress Without Plugin

इस 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 कर दीजिये.

WordPress Tutorial in Hindi

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

Share Buttons Shortcode Ko WordPress Me Kaise Add Kare

ऊपर दिए 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 को जरुर पढ़ें.

आशा करता हूँ की आपको ये Word Press Me Social Media Share Buttons Kaise Add Kare (without Plugin) का Word Press Tutorial in Hindi post पसंद आई होगी.

अगर आपको इस Post से Related कोई सवाल या सुझाव है तो नीचे Comment करें और इस Post को अपने दोस्तों के साथ जरुर Share करें.

Questions & Answer:
Netflix App Kya Hai और Netflix Kaise Chalayen

Netflix App क्या होता है – Netflix कैसे चलाएं पूरी जानकारी | Netflix App Download

Apps
Facebook Account Kaise Delete Karen - FB Account Kaise Delete Kare

Facebook Account Delete और Deactivate कैसे करे-Permanently,Temporary

Social MediaAppsHow to GuideKaise
Jiomeet App Kya Hai और Jiomeet Kaise Use Karen | Jiomeet App Download 

Jiomeet App क्या है – Jiomeet कैसे Use करें | Jiomeet App Download

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

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

      Mukesh Gupta says:

      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.

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

          Mukesh Gupta says:

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

sourav says:

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

    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 ~

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

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

      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

        Nahi fir aapko jarurat nhi hai.. web speed 2.s ke ander hai ….

sandeep says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *