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

by: Jumedeen Khan

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

Comments ( 33 )

  1. Jumedeen khan sir please isme whatsapp share button bhi add kariye na sir please

    Reply
    • Ok

      Reply
  2. Jumedeen bhai… aap jo social button add kar rakhe post ke niche uski function.php tatha style.css file bta sakte ho kya?

    Reply
  3. sir mere wordpress me file manger show nahi ho raha hai kya karu ..please help me

    Reply
    • konsi hosting use kar rahe ho.

      Reply
  4. Bro yah guide share karne ke liye dhanywad. Par is article me do correction chahiye.

    1. Is function.php code ke kaarn yah sabhi jagah par apply ho raha hai. Jaise page, homepage and posts. Lekin yah sirf posts me hi show hona chahiye.
    2. Second cheej isame mujhe whats app share button bhi chahiye. konsa code add karu.

    Reply
    • 1. if(is_singular()){ line me singular ki jagah only post if(is_post()){ set karoge to only post par show hoga.
      2. Search on google iska code mil jayega.

      Reply
  5. Mera aapse ek sawal hai aur ummid hai ki reply jarur milega.
    SMI par jo sharing button hai wo mobile mein bhi aur computer mein bhi ek line mein fit hota hai. Screen ka size chahe jo bhi ho, aapka sharing button ek hi line mein fit hota hai. Lekin mera sharing button small screen mein alag-alag line mein aaj jata hai. Aapke jaise ek hi line mein fit karne ke liye mujhe kis code ka use karna hoga?

    Reply
    • Share button ki width 20% kar do problem solve ho jayegi.

      Reply
  6. sir,
    hamare share link me
    home url ke sath ye add ho ke a raha hai-”

    e0%a4%9a%e0%a5%8b%e0%a4%aa%e0%a4%a1%e0%a4%bc%e0%a4%be-%e0%a4%a8%e0%a5%87-%e0%a4%85%e0%a4%ac-%e0%a4%a8%e0%a4%bf%e0%a4%9″

    mene %full_url% or kai sari type apna chuka hu but problem solve nhi ho rhi .

    Please help me sir ,
    thanku for your great support in bloging .

    Reply
    • Aap URL me hindi word use mat karo.

      Reply
  7. Agar hum facebook se post boost karva kar traffic increase kare to ise Google Adsense ke liye problems hai .

    Reply
    • Aap apne facebook page ko boost kar sakte ho.

      Reply

Leave a Comment