Without plugin Post me Social share button kaise lagaye ?

Hello WordPress user  post me social share button kaise lagaye bina kisi  plugin use kiye, Agar aap apne blog me post share plugin ka use nahi karna chahte, puri post ko carefully pade aur step by step follow karte rahe.

post me social share button add-kaise-kare

Aapko Pata hi hoga Blog me Social Share plugin kitna Jaruri hai, Aapne Sabhi blog me dekha bhi hoga, Agar aapke visitors ko aapki Post ki jankari achhi lage to Wo post ko Share karne ke liye Share button ka Use hi karte hai. Aur jo ham aapko Share Button Code ke baare me batane ja rahe hai, usme  Whatsapp ka bhi Share Button mil jata hai,

( Without plugin ) WordPress post me Social share button kaise lagaye ?

Without plugin use kiye social share button apne blog post me lagana bahut hi achha tarika hai, jise aapke blog ki speed bhi kam nahi hoti, plugin use karne se blog ki speed thoda slow ho jati hai, jaise bhi ho aap kam se kam plugin use karne ke baare me soche.

  • Sabse pahle to aapko apna wordpress login kare,
  • Aur ab Appearance section me Editor per jaye, ab aapke theme edit ka option aa jayega.
  • Function.php file open kare aur neeche diya gya code function.php me paste kar de.
function hindihelp4u_social_sharing_buttons($content) {

global $post;

if(is_singular() || is_home()){

// Get current page URL

$hindihelp4uURL = urlencode(get_permalink());

// Get current page title

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

// Get Post Thumbnail for pinterest

$hindihelp4uThumbnail = 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='.$hindihelp4uTitle.'&url='.$hindihelp4uURL.'&via=hindihelp4u';

$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$hindihelp4uURL;

$googleURL = 'https://plus.google.com/share?url='.$hindihelp4uURL;

$bufferURL = 'https://bufferapp.com/add?url='.$hindihelp4uURL.'&text='.$hindihelp4uTitle;

$whatsappURL = 'whatsapp://send?text='.$hindihelp4uTitle . ' ' . $hindihelp4uURL;

$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$hindihelp4uURL.'&title='.$hindihelp4uTitle;

// Based on popular demand added Pinterest too

$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$hindihelp4uURL.'&media='.$hindihelp4uThumbnail[0].'&description='.$crunchifyTitle;

// Add sharing button at the end of page/page content

$content .= '<!-- http://hindihelp4u.com social sharing. Get your copy here: http://hindihelp4u.com -->';

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

$content .= '<h5>SHARE ON</h5> <a class="hindihelp4u-link hindihelp4u-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';

$content .= '<a class="hindihelp4u-link hindihelp4u-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';

$content .= '</div>';

return $content;

}else{

// if not a post/page then don't include sharing button

return $content;

}

};

add_filter( 'the_content', 'hindihelp4u_social_sharing_buttons');

Ab function.php me code paste karne ke baad ab aapko share button ka Css apne blog me add karna hai.

Social share button style.css ?

post me social share button add-kaise-kare

Style.css file ko khole niche code copy karke style.css me paste kar de.

/* Disable WhatsApp button on Desktop - Tutorial link:  http://hindihelp4u.com */

@media screen and (min-width: 1024px) {
 .hindihelp4u-whatsapp {
display: none !important;
 }
}
.hindihelp4u-link { padding: 2px 8px 4px 8px !important;
color: white;
font-size: 12px; border-radius: 2px; margin-right: 2px;
 cursor: pointer;
 -moz-background-clip: padding;
-webkit-background-clip: padding-box;
 box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 margin-top: 2px;
 display: inline-block;

text-decoration: none;
}
.hindihelp4u-link:hover,.hindihelp4u-link:active {
color: white;
}
.hindihelp4u-twitter {
 background: #00aced;
}
.hindihelp4u-twitter:hover,.hindihelp4u-twitter:active {
 background: #0084b4;
}
.hindihelp4u-facebook { background: #3B5997;
}
.hindihelp4u-facebook:hover,.hindihelp4u-facebook:active {
background: #2d4372;
}
.hindihelp4u-googleplus {
background: #D64937;
}
.hindihelp4u-googleplus:hover,.hindihelp4u-googleplus:active {
 background: #b53525;
}
.hindihelp4u-buffer { background: #444;
}
.hindihelp4u-buffer:hover,.hindihelp4u-buffer:active {
background: #222;

}
.hindihelp4u-pinterest {
background: #bd081c;
}
.hindihelp4u-pinterest:hover,.hindihelp4u-pinterest:active {
background: #bd081c;
}
.hindihelp4u-linkedin {
background: #0074A1;

}
.hindihelp4u-linkedin:hover,.hindihelp4u-linkedin:active {
background: #006288;

}
.hindihelp4u-whatsapp { background: #43d854;

}
.hindihelp4u-whatsapp:hover,.hindihelp4u-whatsapp:active {
background: #009688;

}
.hindihelp4u-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}

Ab save button per click karke save kar de. Ab aapne code ko successful add kar liya hai.apne blig ko open karke dekh sakte hai.

Agar aapko Social Share Button me Kuch apni Taraf se Css me Changing karni hai to .hindihelp4u-link me kar sakte hai.

Yadi css aapke blog me work nahi kar raha hai to Code css copy karke. Apne customize section ke add css me save karen. Iske liye niche step follow karen.

  • Sabse pahle blog dashboard me jaye , ab Appearance section ke customize per click karen.
  • Ab aapko css add ka option milega.uper ke css code ko copy karke paste kar de.
  • Ab uper Save and published per click karke Save kar le.

Bas aapke blog me social share button add kar liya hai, bina kisi plugin use kiye.

हमने ये ब्लॉग हिंदी भाषा में जानकारी शेयर करने के लिए बनाए है। मेरा मकसद है लोगो की Help करना। नयी पोस्ट अपडेट पाने के लिए Email subscribe & Social Media Join करे !

7 COMMENTS

  1. bhai function.php ka option kaha hai. me genratepress theme use karta hu usme sidhe customize ka option dikhta hai.

LEAVE A REPLY

Please enter your comment!
Please enter your name here