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

आज हम बात करेंगे 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 करता है.

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

• Anydesk App क्या है – Anydesk App से क्या होता है | कैसे Use करे

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

• Skype क्या है – Skype क्या होता है | Skype का मतलब

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

• Read: WordPress Login Page Logo and Background Change Kaise Kare?
• Read: All Other Devices Se WordPress Remotely Logout Kaise Kare?
• Read: CSS Kya Hai Aur CSS Se Blog Ko Design Kaise Kare?

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

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

• Likee App Kya Hai – पूरी जानकारी | Likee App Free Download Apk