Social Share button Without Plugin Post में कैसे लगाए?

Without Plugin Share button Code- बिना किसी Plugin इस्तेमाल से वेबसाइट पोस्ट में Social Share Button को आसानी से लगा सकते हैं। ज्यादा प्लगिंस का इस्तेमाल आपकी वेबसाइट स्पीड को कम कर सकता है जिससे हम कम से कम Plugin का इस्तेमाल करना चाहिए। इसी बात को ध्यान में रखते हुए आज की जानकारी में हम आपको वर्डप्रेस पोस्ट में सोशियल शेयर बटन लगाने के बारे में बताने वाले हैं। जो की बिना किसी प्लगइन इस्तेमाल के आसानी से Share Button Add कर सकते हैं।

WordPress User Post Social Share Button कैसे लगाए बिना किसी Plugin का इस्तेमाल किए। अगर आप अपने ब्लॉग में पोस्ट शेयर प्लगइन का इस्तेमाल नहीं करना चाहते, पूरी पोस्ट को ध्यान से पढ़ें और स्टेप बाय स्टेप फॉलो करते रहे।

post me social share button add-kaise-kare

आपको पता ही होगा ब्लॉग में सोशल शेयर प्लगइन कितना जरूरी है। आपने सभी ब्लॉग में देखा भी होगा, अगर आपके विजिटर्स को आपकी पोस्ट की जानकारी अच्छी लगी तो वो पोस्ट को शेयर करने के लिए शेयर बटन का यूज ही करते हैं। और सोशल मीडिया पर एक दूसरे के साथ साझा करते है। जो हम आपको शेयर बटन कोड के बारे में बताते जा रहे हैं, उसमें व्हाट्सएप का भी शेयर बटन मिल जाता है।

Add Share Button in WordPress website without using Plugin

बिना प्लगइन यूज किए सोशल शेयर बटन अपने ब्लॉग पोस्ट में लगाना बहुत ही अच्छा तारिका है, जिसे आपके ब्लॉग की स्पीड भी कम नहीं होती, प्लगइन यूज करने से ब्लॉग की स्पीड थोड़ी स्लो हो जाती है, जैसे भी हो आप कम से कम प्लगइन यूज करें करने के बारे में सोचे। जिससे आपकी डेटाबेस में फालतू की टेबल्स क्रिकेट नहीं होंगे।

Features Of Hindihelp4u Share Button

Without Any Plugin
No JavaScript
No Additional html
No Additional CSS
Light weight
Easy Setup
No Extra Database Table Create

1. Add Social Share Button Without Plugin

पोस्ट में शेयर बटन बिना किसी प्रकार की सहायता से लगाने के लिए पहला शेयर बटन है इसमें आपको सोशल आईकॉन ऐड नहीं किया गया इसको अपने वर्डप्रेस वेबसाइट में कैसे लगाए सेट अप करें चलिए जान लेते हैं।

Add Share Button HTML Code

सबसे पहले नीचे दिए गए Share Button html code को कॉपी कर लेना है।
अब अपनी बात पर WordPress Dashboard में जाना है। और Appearance में जाना हैं।
Appearance section में Theme File Editor में जाना है। जहा पर आपके Wp theme के सभी फाइल दिखाई देंगे।
अब यहां पर आकर function.php File में कॉपी किए गए Code को पेस्ट करके सेव कर देना है।

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

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

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

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

// Based on popular demand added Pinterest too

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

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

$content .= '<!-- https://hindihelp4u.com social sharing. Get your copy here: https://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-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');

अब function.php में code paste करने के बाद share button का Css अपने blog में add करना है।

Add CSS Code

Post Share button html code Add करने के बाद अब style की button code का Css add करना है उसके लिए चलिए step By Step जान लेते हैं

शेयर बटन css को add करने के लिए सबसे पहले नीचे दिए गए Code को कॉपी कर लेना है।
कोर्ट को कॉपी करने के बाद अब अपने WordPress में Appearance>Customise>Additional css में कॉपी किए गए css को paste करके सेव कर देना।

.hindihelp4u-link {
    padding: 5px 8px 5px 8px !important;
    color: white;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 2px;
    cursor: pointer;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    display: inline-block;
    text-decoration: none;
}
.hindihelp4u-link:hover,.hindihelp4u-link:active {
    color: white;
}
.hindihelp4u-twitter {
    background: #00aced;
}
.hindihelp4u-facebook {
    background: #3B5997;
}
.hindihelp4u-whatsapp {
    background: #25D366;
}
.hindihelp4u-buffer {
    background: #444;
}
.hindihelp4u-pinterest {
    background: #bd081c;
}
.hindihelp4u-linkedin {
    background: #0074A1;
}

अब सेव बटन पर क्लिक करके सेव कर दे। अब आपके कोड को सक्सेसफुल ऐड कर लिया है। अपने ब्लॉग को ओपन करके देख सकते हैं।

आप चाहे तो अपने हिसाब से किसी भी तरह का शेयर बटन Css द्वारा डिजाइन कर सकते हैं। जिसमें आपको कुछ css का अनुभव होना चाहिए।

यदि आपको बटन किसी और डिजाइन में चाहिए तो नीचे कमेंट करके बता सकते हैं। उस तरह से बटन को डिजाइन करके आपको अपडेट दे सकते हैं।

बिना किसी प्लगइन की मदद से शेयर बटन को अपनी वेबसाइट की पोस्ट में लगा लिया है, आपको एक और Share Button को बताने वाले हैं।

2.Without Plugin Share Button with icon Code

यह शेर बटन code जिसमें आपको शेयर बटन Social Share Icon भी Update किया गया है। जैसा कि आप मेरी इस पोस्ट के Share Button को देख सकते हैं, उसे ठीक उसी प्रकार यह Share Button कोड हैं

<?php
$hindihelp4uURL = urlencode(get_the_permalink());
$hindihelp4uTitle = urlencode(get_the_title());
$hindihelp4uImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="hindihelp4u-social-wrapper">
	<span class="hide-on-mobile">Share on:</span>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $hindihelp4uURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $hindihelp4uTitle;?>&amp;url=<?php echo $hindihelp4uURL;?>&amp;via=hindihelp4u" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $hindihelp4uURL; ?>&amp;media=<?php echo $hindihelp4uImage;   ?>&amp;description=<?php echo $hindihelp4uTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $hindihelp4uURL; ?>&amp;title=<?php echo $hindihelp4uTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $hindihelp4uTitle; echo " "; echo $hindihelp4uURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
	<a class="hindihelp4u-social-sharing hindihelp4u-social-reddit" href="https://reddit.com/submit?url=<?php echo $hindihelp4uURL;?>&title=<?php echo $hindihelp4uTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>

सबसे पहले ऊपर दिए गए एचटीएमएल कोड को कॉपी कर लेना है।
अब अपनी बात पर WordPress Dashboard में जाना है। और Appearance में जाना हैं।
Appearance section में Theme File Editor में जाना है। जहा पर आपके Wp theme के सभी फाइल दिखाई देंगे।
अब यहां पर आकर function.php Me Copy किए गए शेर बटन कोर्ट को पेस्ट करके save कर देना है।

.hindihelp4u-social-wrapper {
    margin: 30px 0;
    font-size: 0;text-align: center;
}

.hindihelp4u-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
	text-align: center;
}

.hindihelp4u-social-sharing {
    font-size: 17px;
    padding: 7px 20px;text-align: center;
}

@media only screen and (max-width: 600px) {
    .hindihelp4u-social-sharing {
        font-size: 17px;
        padding: 7px 12px;
        display: inline-block;
    }
}

.hindihelp4u-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.hindihelp4u-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.hindihelp4u-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.hindihelp4u-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.hindihelp4u-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.hindihelp4u-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.hindihelp4u-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.hindihelp4u-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.hindihelp4u-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.hindihelp4u-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.hindihelp4u-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.hindihelp4u-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.hindihelp4u-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.hindihelp4u-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.hindihelp4u-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

शेयर बटन सीएसएस को एडिट करने के लिए सबसे पहले ऊपर दिए गए css code को कॉपी कर लेना है।
Code को कॉपी करने के बाद अब अपने व्हाट्सएप में Appearance>Customise>Additional css में कॉपी किए गए css को paste करके सेव कर देना।

इस तरह से अपने वर्डप्रेस वेबसाइट पोस्ट के नीचे सोशियल शेयर बटन को आसानी से लगा सकते हैं बिना किसी प्लगइन की मदद से। यदि आपको अपने पोस्ट में सोशल शेयर बटन लगाने में किसी भी तरह की समस्या आ रही है कि नहीं से कमेंट करके जरूर बताएं।

7 thoughts on “Social Share button Without Plugin Post में कैसे लगाए?”

Manish

June 6, 2019 at 9:54 pm

Thanks bhai ye maine is code ke jariye apne wordpress blog me share button add kar liya
- Hindihelp4u
  
  June 19, 2019 at 5:55 am
  
  Thanks For Your Valuable Feedback
- Gangagyan
  
  June 29, 2019 at 12:41 pm
  
  Thanks Bhai
  Maine aapke code se apne blog me share button laga liya par link pop-up me khule to achha hota
  - Hindihelp4u
    
    July 9, 2019 at 6:36 am
    
    Wait for next update Keep visit
nirmal

May 24, 2018 at 1:04 pm

bhai function.php ka option kaha hai. me genratepress theme use karta hu usme sidhe customize ka option dikhta hai.
- Hindihelp4u
  
  May 24, 2018 at 2:30 pm
  
  Ye Jankari WordPress ke liye hai, agar aap Blogger par hai to Blogger Is jankari ko follow kare
- Hindihelp4u
  
  May 24, 2018 at 2:31 pm
  
  Function.php WordPress Dashboard Ke Appearance Section me Edit Par Click karen Uske baad Themw Edit Open ho jata hai Jisme aapko Function.php mil jayega.