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.

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.

• Blog Post Ke Niche / Upar Social Share Buttan Kaise Lagate Hai
• Blog Ki Left Side Me Floating Social Share Buttons Kaise Add Kare

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.

• No.1 Fast Loading SMI Sidebar Social Media Follow Icon Buttons
• All Social Media Icon and Background CSS Hex Color Code List

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