Blog में Social Share Button कैसे Add करें? (Without Plugin)

Blog Me Social Share Button Kaise Add Kare, Blog में Social Share Button कैसे Add करें: यदि आप एक ब्लॉगर हैं और आपने अभी तक अपने Blog पर Social Share Button Add नहीं किये हैं, तो आप बहुत बड़ी गलती कर हैं। क्योंकि Social Share Button आपके ब्लॉग पर Instant Traffic लाने के साथ-साथ Blog के SEO में भी महत्वपूर्ण भूमिका निभाते हैं। इसके अलावा विजिटर्स बड़ी आसानी से आपके लेख को सोशल मीडिया पर शेयर कर पाते हैं।

इतना जानने के बाद अगर आप भी अपने ब्लॉग में Social Share Button को Add करने बारे में सोच रहे हैं, तो आप बिल्कुल सही लेख पर आये हैं। आज के इस लेख में हम आपको बतायेंगे कि Social Share Button क्या है? और Blog Me Social Share Button Kaise Add Kare? फिर चाहें आपको ब्लॉग का Blogger बना हो या WordPress पर बना हो। आप इस लेख को अंत तक पढ़कर अपने ब्लॉग में बड़ी आसानी से Social Share Button Add कर सकते हैं।

WhatsApp Channel Join Now

Telegram Channel Join Now

तो चलिए ज्यादा समय न वर्बाद करते हुए सीधा चलते हैं अपने लेख पर और विस्तार से जानने की कोशिश करते है कि Blog Me Social Share Button Kaise Add Kare?

Table of Contents

Blog में Social Share Button कैसे Add करें — **Blog Me Social Share Button Kaise Add Kare**

Social Share Button एक ऐसा Clickable बटन होता है। जिस पर क्लिक करके विजिटर्स आपके आर्टिकल को सोशल मीडिया पर शेयर करते हैं। Social Share Button आपके ब्लॉग को एक प्रोफेशनल Look प्रदान करते हैं।

Social Share Button आपके ब्लॉग में ट्रैफिक लाने में महत्वपूर्ण भूमिका निभाते हैं। इसके अलावा यह SEO की दृष्टिकोण से बहुत महत्वपूर्ण होते हैं। किसी भी पोस्ट का सोशल मीडिया पर शेयर होना गूगल सर्च की नजरिये से बहुत सही होता है क्योंकि इससे गूगल सर्च को लगता है कि इस आर्टिकल में वैल्यूवल कंटेंट है जिसके कारण इतना शेयर किया जा रहा है।

उसके बाद सर्च इंजन SERPs में उस आर्टिकल की रैंक को Improve कर देता है। तो चलिए सोशल शेयर बटन के बारे में जानने के बाद अब जानते हैं कि Blog में Social Share Button कैसे Add करें?

ब्लॉग में Social Share Button Add करना बहुत ही आसान है। इस लेख में आपको Blogger तथा WordPress दोनों CMS प्लेटफॉर्म पर बने ब्लॉग के बारे में बतायें कि आप उनमें कैसे Social Share Button Add कर सकते हैं। आप बस मेरे द्वारा बताये गये स्टेप्स को फॉलो करते रहें। तो चलिए सबसे पहले जानते हैं कि Blogger Blog Me Social Share Button Kaise Add Kare?

Worning – अपने Blog में कुछ भी करने से पहले आपको उसका Backup ले लेना है। इसके लिए आप Theme >> Customize Arrow Down >> Backup पर क्लिक करके ले सकते हैं।

Blogger Blog में Social Share Button Add करने के लिए आप निम्नलिखित स्टेप्स को फॉलो कर सकते हैं।

Step#1 Theme में CSS Code को Paste करें

सबसे पहले आपको अपने Blogger Dashboard को Log in कर लेना है।
इसके बाद उस ब्लॉग का चयन करें जिसमें आप Social Share Button को Add करना चाहते हैं । अगर आपके सिर्फ एक ही ब्लॉग है, तो आप इस Step को Skip कर सकते हैं।
अब आपको बायी तरफ मौजूद Menu में Theme Option पर क्लिक करना है।
इसके बाद Customize के पास Arrow Down आइकन पर क्लिक करके Edit Html पर क्लिक करें।
अब आपके सामने Theme की Html File खुल जायेगी। जिसमें कहीं पर क्लिक करके Ctrl + F Press करके </b:skin> को Find करें।
इसके बाद नीचे दिये गये CSS Code को Copy करके </b:skin> के Just ऊपर Paste कर दें।
इतना करने के बाद Save पर क्लिक करके Theme को सुरक्षित कर दें।

Step#2 – Theme में Html Code को Paste करें

CSS Code के बाद अब आपको Edit Theme में Html Code करना होगा।
इसके लिए आपको Theme की Html File में कहीं पर भी क्लिक करने के बाद Ctrl + F Press करके <data:post.body/> को Find करना है।
इसके बाद आप नीचे दिये गये Html Code को कॉपी करके <data:post.body/> के Just नीचे Paste कर दें।
इतना करने के बाद अंत में Save पर क्लिक करके Theme को Save कर दें।

<div class='meta-share'>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' target='_blank' rel="noopener"><i class='fa fa-facebook-official'/><rd> Facebook</rd></a>
<a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.url + "&title="+ data:post.title' target='_blank' rel="noopener"><i class='fa fa-whatsapp'/><rd> Whatsapp</rd></a>
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' target='_blank' rel="noopener"><i class='fa fa-twitter'/><rd> Twitter</rd></a>
<a class='google' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' target='_blank' rel="noopener"><i class='fa fa-google-plus'/><rd> Google</rd></a>
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' rel="noopener"><i class='fa fa-pinterest'/><rd> Pinterest</rd></a>
</div>

बधाई हो! आपके Blogger Blog में Social Share Button Add हो चुके हैं। जिन्हे आप ब्लॉग को Refresh करके देख सकते हैं।

Note – इस लेख में हमने आपको जो भी CSS और Html Code प्रदान किये हैं। वो ब्लॉगर के सभी Template पर काम करते हैं। यदि आपके Template यह कोड़ काम नहीं कर रहे हैं, तो आप <data:post.body/> को फिर से Find करके दूसरे या तीसरे <data:post.body/> के नीचे Html Code को Paste करके देख लें क्योंकि एक Theme में 4 – 5 जगह पर <data:post.body/> दिया होता है।

तो चलिए Blogger के बाद अब जानते हैं कि WordPress Blog में Social Share Button कैसे Add करें?

WordPress Blog में Social Share Button बहुत ही आसान है। इसके लिए आप Add To Any Shere Buttons प्लगइन का उपयोग कर सकते हैं। इसके लिए आपको Plugins >> Add New पर क्लिक करके इस प्लगइन को Download करके Active कर लेना है। इतना करते ही आपके ब्लॉग में Social Share Button Add हो जाते हैं।

अब अगर आप अपने ब्लॉग में Without Plugin के Social Share Button Add करना चाहते हैं, तो निम्नलिखित स्टेप्स को फॉलो करें।

Note – सबसे पहले आप अपने ब्लॉग का Backup ले लें। इसके लिए आप Cpenal में जाकर ब्लॉग का बैकअप ले सकते हैं।

इसके लिए आप निम्नलिखित स्टेप्स को फॉलो करें।

Step#1 – Elements को Active करें

Blog में Floating Social Share Button Add करने के लिए सबसे पहले आपको Appearance >> Generatepress >> Elements को Active कर लेना है।

Step#2 – Elements को Create करें

इसके बाद आपको Appearance >> Elements >> Add New Element पर क्लिक करना है।
अब आपके सामने एक छोटी सी पॉपअप विंडो Open होगी। जिसमें आपको Hook को Select करके Create पर क्लिक करना है।
इसके बाद आपके सामने एक पेज Open होगा जिसमें आपको Title डालना है।
नीचे वाले बॉक्स में आपको निम्नलिखित Code को Copy करके Paste कर देना है।

<?php $a2zhindimeURL = urlencode(get_the_permalink()); $a2zhindimeTitle = urlencode(get_the_title()); $a2zhindimeImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?> <div class="a2zhindime-float-social-wrapper hide-on-mobile hide-on-tablet"> <a class="a2zhindime-float-social-sharing a2zhindime-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php%20echo%20$a2zhindimeURL;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d><svg%20xmlns="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="a2zhindime-float-social-sharing a2zhindime-social-twitter" href="https://twitter.com/intent/tweet?text=<?php%20echo%20$a2zhindimeTitle;?>&url=<?php%20echo%20$a2zhindimeURL;?>&via=a2zhindime%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d><svg%20xmlns="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="a2zhindime-float-social-sharing a2zhindime-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php%20echo%20$a2zhindimeURL;%20?>&media=<?php%20echo%20$a2zhindimeImage;%20?>&description=<?php%20echo%20$a2zhindimeTitle;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d><svg%20xmlns="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="a2zhindime-float-social-sharing a2zhindime-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php%20echo%20$a2zhindimeURL;%20?>&title=<?php%20echo%20$a2zhindimeTitle;%20?>&mini=true%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d><svg%20xmlns="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="a2zhindime-float-social-sharing a2zhindime-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php%20echo%20$a2zhindimeTitle;%20echo" "; echo $a2zhindimeURL;?>” 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="a2zhindime-float-social-sharing a2zhindime-social-reddit" href="https://reddit.com/submit?url=<?php%20echo%20$a2zhindimeURL;?>&title=<?php%20echo%20$a2zhindimeTitle;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d><svg%20xmlns="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>

इसके बाद Settings Option में आपको Hook में wp_footer को सेलेक्ट करना है।
नीचे Execute PHP को Check करना है।
Display Rules में क्लिक करने के बाद Location में आपको Entire Site को सेलेक्ट करना है।
इसके बाद अंत में Publish पर क्लिक कर देना है।

अब आप अपने ब्लॉग को Refresh करके चेक करें। या क्या आपके ब्लॉग में अभी तक Floating Social Share Button Add नहीं हुए हैं, तो चिंता न करें। अब आपको CSS Code को अपने ब्लॉग में Add करना है।

Step#3 – Enter CSS Code

इसके लिए आप Appearance >> Customize >> Additional CSS पर क्लिक करें।
अब आप निम्नलिखित Code को Copy करके यहाँ पर Paste कर दें।

/* Entire Site Social Share Design by a2zhindime*/ .a2zhindime-float-social-wrapper { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9999; } .a2zhindime-float-social-sharing { display: flex; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; min-height: 30px; font-size: 12px; padding: 14px 10px; } .a2zhindime-float-social-sharing:first-of-type { border-top-right-radius: 10px; } .a2zhindime-float-social-sharing:last-of-type { border-bottom-right-radius: 10px; } .a2zhindime-social-facebook { fill: #fff; background-color: rgba(59, 89, 152, 1); } .a2zhindime-social-facebook:hover { background-color: rgba(59, 89, 152, .8); } .a2zhindime-social-twitter { fill: #fff; background-color: rgba(29, 161, 242, 1); } .a2zhindime-social-twitter:hover { background-color: rgba(29, 161, 242, .8); } .a2zhindime-social-pinterest { fill: #fff; background-color: rgba(189, 8, 28, 1); } .a2zhindime-social-pinterest:hover { background-color: rgba(189, 8, 28, .8); } .a2zhindime-social-linkedin { fill: #fff; background-color: rgba(0, 119, 181, 1); } .a2zhindime-social-linkedin:hover { background-color: rgba(0, 119, 181, .8); } .a2zhindime-social-whatsapp { fill: #fff; background-color: rgba(37, 211, 102, 1); } .a2zhindime-social-whatsapp:hover { background-color: rgba(37, 211, 102, .8); } .a2zhindime-social-reddit { fill: #fff; background-color: rgba(255, 87, 0, 1); } .a2zhindime-social-reddit:hover { background-color: rgba(255, 87, 0, .8); }

बधाई हो! आपके ब्लॉग में Floating Social Share Button Add हो चुके हैं। जिसे आप ब्लॉग को Refresh करके देख सकते हैं।

इसके लिए आप निम्नलिखित स्टेप्स को फॉलो कर सकते हैं।

Step#1 – Elements को Create करें

इसके लिए आपको सबसे फिर से Appearance >> Elements >> Add New Element >> Hook >> Create पर क्लिक करके एक Elements को क्रिएट करना होगा। जिसे आप Footer Social Shere नाम दे सकते हैं।
इसके बाद आप निम्नलिखित Code को Copy करके Paste कर दें। Element में Paste कर दें।

<?php $a2zhindimeURL = urlencode(get_the_permalink()); $a2zhindimeTitle = urlencode(get_the_title()); $a2zhindimeImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?> <div class="a2zhindime-social-wrapper"> <span class="hide-on-mobile">Sharing Is Caring:</span> <a class="a2zhindime-social-sharing a2zhindime-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php%20echo%20$a2zhindimeURL;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d>%20<svg%20xmlns="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="a2zhindime-social-sharing a2zhindime-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php%20echo%20$a2zhindimeTitle;%20echo" "; echo $a2zhindimeURL;?>” 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="a2zhindime-social-sharing a2zhindime-social-twitter" href="https://twitter.com/intent/tweet?text=<?php%20echo%20$a2zhindimeTitle;?>&url=<?php%20echo%20$a2zhindimeURL;?>&via=a2zhindime%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d>%20<svg%20xmlns="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="a2zhindime-social-sharing a2zhindime-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php%20echo%20$a2zhindimeURL;%20?>&media=<?php%20echo%20$a2zhindimeImage;%20?>&description=<?php%20echo%20$a2zhindimeTitle;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d>%20<svg%20xmlns="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="a2zhindime-social-sharing a2zhindime-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php%20echo%20$a2zhindimeURL;%20?>&title=<?php%20echo%20$a2zhindimeTitle;%20?>&mini=true%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d>%20<svg%20xmlns="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="a2zhindime-social-sharing a2zhindime-social-reddit" href="https://reddit.com/submit?url=<?php%20echo%20$a2zhindimeURL;?>&title=<?php%20echo%20$a2zhindimeTitle;%20?>%e2%80%9d%20target=%e2%80%9d_blank%e2%80%9d%20rel=%e2%80%9dnofollow%e2%80%9d>%20<svg%20xmlns="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>

अब नीचे आपको Settings के Hook ऑप्शन में Generate_after_entry_content को सेलेक्ट करना है।
इसके बाद नीचे Execute PHP को Check कर दें।
अब Display Rules के Location Option में आपको Post को सेलेक्ट करना है।
इसके बाद आपको Publish पर क्लिक कर देना है।

अब आप अपने ब्लॉग को Refresh करके देख लें। उसमें आपको Social Share Button दिखने लगेंगे लेकिन वह देखने में बोरिंग लग रहे होगें। तो चलिए इन Social Share Button को अच्छा डिजाइन करते हैं।

Step#2 – CSS Code Add करें

इसके लिए आपको Appearance >> Customize >> Additional CSS पर क्लिक करके निम्नलिखित Code को Copy करके Paste कर देना है।

/* After Post Social Share Design by a2zhindime*/ .a2zhindime-social-wrapper { margin: 30px 0; font-size: 0; } .a2zhindime-social-wrapper span { font-weight: bold; padding-right: 10px; font-size: 16px; } .a2zhindime-social-sharing { font-size: 17px; padding: 7px 20px; } @media only screen and (max-width: 600px) { .a2zhindime-social-sharing { font-size: 17px; padding: 6px 17px; display: inline-block; } .a2zhindime-social-wrapper { margin: 30px 0px; font-size: 0; } } .a2zhindime-social-sharing svg { position: relative; top: 0.15em; display: inline-block; } .a2zhindime-social-sharing:first-of-type { border-radius: 100px 0 0 100px; } .a2zhindime-social-sharing:last-of-type { border-radius: 0 100px 100px 0; } .a2zhindime-social-facebook { fill: #fff; background-color: rgba(59, 89, 152, 1); } .a2zhindime-social-facebook:hover { background-color: rgba(59, 89, 152, .8); } .a2zhindime-social-twitter { fill: #fff; background-color: rgba(29, 161, 242, 1); } .a2zhindime-social-twitter:hover { background-color: rgba(29, 161, 242, .8); } .a2zhindime-social-pinterest { fill: #fff; background-color: rgba(189, 8, 28, 1); } .a2zhindime-social-pinterest:hover { background-color: rgba(189, 8, 28, .8); } .a2zhindime-social-linkedin { fill: #fff; background-color: rgba(0, 119, 181, 1); } .a2zhindime-social-linkedin:hover { background-color: rgba(0, 119, 181, .8); } .a2zhindime-social-whatsapp { fill: #fff; background-color: rgba(37, 211, 102, 1); } .a2zhindime-social-whatsapp:hover { background-color: rgba(37, 211, 102, .8); } .a2zhindime-social-reddit { fill: #fff; background-color: rgba(255, 87, 0, 1); } .a2zhindimde-social-reddit:hover { background-color: rgba(255, 87, 0, .8); }

बधाई हो! आपके ब्लॉग में पोस्ट के Last में Social Share Button Add हो चुके हैं। जिसे आप ब्लॉग को Refresh करके देख सकते हैं।

अगर आपने ब्लॉग में Without Plugin के Social Share Button Add कर लिए हैं, तो आप अभी के अभी प्लगइन को Delete कर दें। क्योंकि Plugins आपके ब्लॉग की Loading Speed को Slow कर देती है।

ये महत्वपूर्ण लेख भी पढ़ें:

आज के इस लेख में हमने आपको Blog Me Social Share Button Kaise Add Kare? के बारे में विस्तार से और सरल भाषा में बताया है। ताकि आप आसानी से अपने ब्लॉग में Social Share Button को Add कर सकें। अगर फिर भी आपको कोई परेशानी हो रही है, तो आप मुझसे कमेंट करके पूछ सकते हैं।

मुझे आशा है कि आपको यह लेख Blog में Social Share Button कैसे Add करें? बेहद पसंद आया होगा। अगर ऐसा है, तो इस लेख को सोशल मीडिया पर अपने मित्रों के साथ अवश्य शेयर करें। यदि आप ब्लॉगिंग सीखना चाहते हैं, तो इस ब्लॉगर आते रहे हैं क्योंकि मैं प्रतिदिन इस ब्लॉग पर ब्लॉगिंग से संबंधित आर्टिकल पब्लिश करता हूँ।

Social Share Button क्या है?