WordPress Me Social Media Share Buttons Kaise Add Kare (Without Plugin)

Bina Plugin WordPress Blog Me Social Media Sharing Button Kaise Add Kare? Is post me main aapko without plugin WordPress me social media share buttons add karne ke bare me bta raha hu. Iske liye aapko kisi plugin ya script ki jarurat nahi. Aap bina plugin and bina script ka istemal kiye apne blog me Facebook, Twitter, Google Plus, Linkedin, Buffer, Pinterest, Whatsapp share button add kar sakte hai.

Add social media share buttons on WordPress

Mostly, hum blog me social share buttons add karne ke liye plugins ya javascript ka istemal karte hai. Jisse humare blog me extra script and CSS stylesheet add ho jati hai jiski hume bilkul jarurat nahi hoti. Hume sirf 4-5 social share buttons ki jarurat hai jo hum bina plugin or script ke bhi kar sakte hai.

Ye social media share buttons hover effect ready, mobile responsive ready hai aapko ise mobile friendly banane ki jarurat nahi hai direct blog me use kar sakte ho.

Own Social Share Buttons Kyu Use Kare?

Jyada plugin and script load hone se na sirf bandwidth jyada kharch hota hai balki humari site ko loading speed bhi slow ho jati hai. Aap google page speed, pingdom, gtmetrix kisi bhi tool par check kar sakte ho koi bhi extra external stylesheet use karne ki advice nahi deta hai.

  • Social share plugin me admin bar, menu bar, extra social share sites ki extra coding add hoti hai jiski hume koi jarurat nahi hoti.
  • Bahut sare social share buttons use karne se aapke server par unnecessary htttp requests badhti hai.
  • Jyada javascript load hone se -page load speed down hoti hai.
  • Aapki site fast laoding hogi to google me aapki site ki rank bhi high hogi.
  • Agar aapki site fast loading hogi to aapke visitors site par fir se visit karna pasand karenge.

Inke alawa bhi bahut fayde hai. So aayiye jante hai wordpress blog me without plugin and script ke social sahring buttons kaise add karte hai. Is process se aap khud ke social sharing buttons create kar blog me laga sakte ho.

WordPress Me Bina Plugin Social Media Share Buttons Add Kaise Kare

WordPress site me bina kisi plugin ka istemal kiye social share buttons kaise add kare? Bina kisi script and external stylesheet ke apni site me social share buttons add karne ki hindi jankari.

Step 1: Add this code on Functions.php

Apne WordPress blog ke dashboard me jaye or appearance >> editor option me ja kar theme ke functions.php folder ko open kare or below ko copy kar paste kar de. Aap chahe to ye cPanel me ja kar public_html >> wp-content >> themes >> choose your theme option par ja kar functions.php folder me ye code paste kar sakte hai.

function mozedia_social_sharing_buttons($content) {
 global $post;
 if(is_singular()){
 $mozediaURL = urlencode(get_permalink());
 $mozediaTitle = str_replace( ' ', '%20', get_the_title());
 $mozediaThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
 $twitterURL = 'https://twitter.com/intent/tweet?text='.$mozediaTitle.'&url='.$mozediaURL.'&via=iamjdkk';
 $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$mozediaURL;
 $googleURL = 'https://plus.google.com/share?url='.$mozediaURL;
 $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$mozediaURL.'&title='.$mozediaTitle;
 $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$mozediaURL.'&media='.$mozediaThumbnail[0].'&description='.$mozediaTitle;
 $content .= '<div class="mozedia-social">';
 $content .= '<h5>Share this post on social media:</h6><div class="mozedia-link mozedia-facebook"><a href="'.$facebookURL.'" target="_blank"><i class="fa fa-facebook"></i><span class="smi_share"> Share</span></a></div>';
 $content .= '<div class="mozedia-link mozedia-twitter"><a href="'. $twitterURL .'" target="_blank"><i class="fa fa-twitter"></i><span class="smi_share"> Tweet</span></a></div>';
 $content .= '<div class="mozedia-link mozedia-googleplus"><a href="'.$googleURL.'" target="_blank"><i class="fa fa-google-plus"></i><span class="smi_share"> +1</span></a></div>';
 $content .= '<div class="mozedia-link mozedia-linkedin"><a href="'.$linkedInURL.'" target="_blank"><i class="fa fa-linkedin"></i><span class="smi_share"> Share</span></a></div>';
 $content .= '<div class="mozedia-link mozedia-pinterest"><a href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i class="fa fa-pinterest"></i><span class="smi_share"> Pin it</span></a></div>';
 $content .= '</div>';
 return $content;
 }else{
 return $content;
 }
};
add_filter( 'the_content', 'mozedia_social_sharing_buttons');

Ab aapki site me post and pages me social media share buttons add ho chuke hai. Aapki site ki har post and page ke bad me social sharing buttons show honge.

Step 2: Add Below CSS Code Your CSS

Ab aapki site me social media share button add ho chuke hai. Ab aapko social media share buttons ko design karna hai. Uske liye aap ye CSS code apni site ke style.css folder me add kare.

WordPress dashboard >> Apearance >> Editor par ja kar style.css folder me ye code copy kar paste kare.

.mozedia-social {
 margin: 20px 0
}
.mozedia-link {
 color: #fff!important;
 border-radius: 2px;
 margin: 5px;
 cursor: pointer;
 display: inline-block;
 transition: .5s;
 vertical-align: middle;
 width: 130px;
 height: 32px
}
.mozedia-link:hover {
 width: 170px!important;
 background: #777
}
.mozedia-social:hover .mozedia-link {
 width: 120px
}
.mozedia-link i {
 color: #fff;
 margin-top: 8px;
}
.mozedia-link a {
 padding-left: 42%;
 text-decoration: none!important
}
.mozedia-link:hover a {
 padding-left: 30%;
 transition: .5s
}
.mozedia-link .smi_share {
 margin: 10px;
 display: none;
 transition: 1s;
 color: #fff;
 font-size: 14px;
 text-decoration: none
}
.mozedia-link:hover .smi_share {
 display: inline
}
.mozedia-facebook {
 background: #3a589e
}
.mozedia-twitter {
 background: #429cd6
}
.mozedia-googleplus {
 background: #df4b37
}
.mozedia-buffer {
 background: #444
}
.mozedia-linkedin {
 background: #0d77b7
}
.mozedia-pinterest {
 background: #cd2029
}
@media only screen and (max-width:768px) {
.mozedia-link a {
 padding: 20px
 }
.mozedia-link,.mozedia-link:hover {
 width: auto!important
 }
.mozedia-link:hover .smi_share {
 display: none
 }
}

Ab aap apni site ke kisi bhi post ya page ko open karke dekh le ki social media share buttons sahi se work kar rahe hai ya nahi. Agar social media share buttons design me koi problem ho to wo aap CSS coding se theek kar sakte hai.

Agar aapko social media share buttons post ke pahle lagane hai to aap upar diye code me se ye code replace kar sakte hai.

1. For above post:

 return $content;
 }else{
 return $content;

2. For below post:

return $variable.$content;
 }else{
return $variable.$content;

Step 3: Load Font Awesome Icons

Font awesome icon display karne ke liye ye stylesheet apne blog ke <header> section me add kare.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Ab aap apne blog ki post page ko open karke dekhe share button properly work kar rahe honge. Agar koi problem ho to aap comment me puch sakte hai.

Is tarah se aap apne wordpress blog me social media share buttons add kar sakte ho. So chaliye ab apne blog par se extra faltu ke share plugins ko remove kar dijiye or apni site par pane khud ke social media share buttons add kar lijiye.

Humari agli post me hum bat karenge website me whatsapp share button kaise add kare jisse aap apni site ki post easily whatsapp me share kar sako.

Agar aapko ye post pasand aaye to ise social media par other bloggers ke sath share jarur kare. Thanks.

Avatar for Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

Comments ( 33 )

  1. very good article sir.... thank you

    Reply
  2. Sir mere site me php work kar raha hai but css nshi kar raha.

    Reply
    • Browser ki cache file delete karke check karo CSS work kar rahi hai.

      Reply
  3. Sir
    Me chahta hu ki mere ek post me ki sare
    Folder ho ex-jese mene koi post ki usme bhut sara data ho to ek sath na dikha ke unko folder vise kr du taki jo user ko lge vo folder pd le ex-
    Resistance kya hota hai
    Folders-
    Basic farmula advance
    Is trh rhe taki koi user chahe vo pdle

    Reply
    • Mujhe samajh nahi aaya koi example dikhao.

      Reply
  4. Sir mene wordpress blog bana Liya he mobail se bina hosting ke par ab muje free hosting chahiye mobile se kese setup karu

    Reply
  5. Assalmu alaikum nice post
    Kya ISi tabah relabeled post BHI Bina plugin Kar sakte he

    Reply
    • W/a yes kar sakte hai.

      Reply
  6. Ye dono code maine copy paste kar diye hai. Share button bhi aagye . But design nhi hua......

    Reply
    • CSS code proper use karo or page refresh karo.

      Reply
      • Ok brother hogya thanku....

        Reply
  7. bahut hi badiya article jumedeen bhai ab tak me bhi plugin hi use kar raha but ab apki coding use karuga thank
    jume deen bhai ek question h
    jaise me apni post ko kisi fb group me share karta hu or us group me koi adult content bhi publish kar de to meri site par kya fark padega

    Reply
    • Bad effect. Aese groups se mat judo jisme ba content share hota ho.

      Reply
  8. wow bro, awesome post.
    Meko kuch aise hi buttons ki Talaash thi. Thank u

    Reply
  9. Sir please help me. Sir hamne ek domain kharida jise maine manage kiya ek do din tak to sahi khula lekin ab jab main apne blog ko browser me open karta hu to error show ho raha hai ise kaise fix karu sir error ko app hamare blog ko dekh sakte hai sir please kuch help kijiye www.devbeg.com

    Reply
    • Aapki site proper open ho rahi hai koi problem nahi hai.

      Reply
  10. Hi
    Kya Isse Plugin se Kam Load Padega Blog par ya Page Size badh Jayega.

    Reply
    • Isse aapki site fast load hogi or page size bhi kam hoga.

      Reply

Leave a Comment

×