Uncategorized

How To Add Beautiful Social Sharing Button In Wordpress Without Plugin

How To Add Beautiful Social Sharing Button In Wordpress Without Plugin:- Hello Friends, Welcome Back, This Time I Come Up With A New Guide On How To Add Beautiful Social Sharing Buttons On Your Wordpress Blog/Website Without Using Any Plugin. As You, All Knows Social Sharing Buttons Will Help Us To Get More Visitors And Hits On Our Site By Increasing Social Engagement of Our Website. But As You All Know Many Free And Premium Themes Not Come With Inbuilt Social Sharing Buttons. You Need Them To Add Manually.

How To Add Beautiful Social Sharing Button In Wordpress Without Plugin

Many Bloggers And Tools Ask You To Use WordPress Plugins OR 3rd Party Websites (Like ShareThis) API To Setup Social Share Buttons On Your Blog. But this is not the best way To Add Social Share On Your Website, Because All These Plugins Use Own CSS And JavaScript That Will Increase Your Website Loading Speed And More Than That Most Free Plugins Show Their Own Ads During Sharing To Your Visitors.

Extra/External Javascript Files Takes More Time To Execute During Loading A Web Page And That Will Affect Your Google Site Speed Score. Now You Ask What is Best Way. So, Here Are A Guide For You To Setup Social Sharing Buttons On Your Website Without Using Any Javascript OR Plugin. During This Process, We Use Only CSS And Some Php Functions To Create Beautiful Social Sharing Buttons. By Using Below Given Codes You Can Create Social Sharing Buttons Without Using Any JavaScript. I Got This Code From Crunchify And Modded To Update Them And Make Them More Beautiful. Also, I Removed Google Plus Button Because As You All Know Google Shut Down That Service.

So, Just Follow Below Guide And Setup SEO Friendly Social Sharing Buttons On Your Blog/Website.

Guide To Setup SEO Friendly & Beautiful Social Sharing Button In Wordpress Without Plugin

So Here Are Codes To Setup Social Sharing Buttons On Your Blog. Below I Added To Codes To Add Social Sharing Buttons In Footer of Post OR At The Top of The Post. Now It’s Your Choice Where You Want To Show Your Social Sharing Buttons. You Can Use Both Codes At Same Time To Show Social Sharing Buttons Before The Post And After The Post. So, Let’s Start With Code To Show Buttons At Below The Post. After Using These Codes, Your Social Sharing Buttons Look Like Below.

sharing button preview

1. function.php Code To Show Social Sharing Buttons Below The Post

1. First of All, Login To Your WordPress Dashboard.

2. Now From There Move Your Cursor On Appearance And Then Click On Theme Editor Option From Appeared Menu. (Highlighted In Below Image).

Appearance And Theme Editor Option Highlighted In Wordpress Dashboard

3. It Will Takes You To The Theme Editor Panel, From There Click On Theme Functions From Theme Files Menu. (Highlighted In Below Image)

Functions File Edit Option Highlighted In Theme Editor

4. Now Paste Below Code At The End And Click On Update File Button (Highlighted In Above Image).

function crunchify_social_sharing_buttons($content) {
	global $post;
	if(is_singular() || is_home()){
	
		// Get current page URL 
		$crunchifyURL = urlencode(get_permalink());
 
		// Get current page title
		$crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
		// $crunchifyTitle = str_replace( ' ', '%20', get_the_title());
		
		// Get Post Thumbnail for pinterest
		$crunchifyThumbnail = 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='.$crunchifyTitle.'&url='.$crunchifyURL;
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
		$whatsappURL = 'https://wa.me/?text='.$crunchifyTitle . ' ' . $crunchifyURL;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&title='.$crunchifyTitle;
		$diggURL = 'http://digg.com/submit?url='.$crunchifyURL.'&title='.$crunchifyTitle;
 
		// Based on popular demand added Pinterest too
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
 
		// Add sharing button at the end of page/page content
		$content .= '<!-- Implement your own superfast social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: http://crunchify.me/1VIxAsz -->';
		$content .= '<div class="crunchify-social">';
		$content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
		$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
		$content .= '<a class="crunchify-link crunchify-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';   
		$content .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';   
		$content .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';   
		$content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';  
		$content .= '<a class="crunchify-link crunchify-digg" href="'.$diggURL.'" data-pin-custom="true" target="_blank">Digg It</a>';   
		$content .= '</div>';
		
		return $content;
	}else{
		// if not a post/page then don't include sharing button
		return $content;
	}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');

5. That’s It, You Have Successfully Added Social Sharing Buttons Below The Post. Now Just Enter Below Given CSS Code In Your StyleSheet To Looks Them Great. You Can Found CSS Code At Last In This Post.

2. functions.php Code To Show Social Buttons Above The Post

6. To Show Social Sharing Buttons Above The Post, Follow All Above Given Steps (Escape No. 4 ) And Paste Below Code In Theme Function File At Last And Click On Update Now Button.

function crunchify_social_sharing_buttons($content) {
	global $post;
	if(is_singular() || is_home()){
	
		// Get current page URL 
		$crunchifyURL = urlencode(get_permalink());
 
		// Get current page title
		$crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
		// $crunchifyTitle = str_replace( ' ', '%20', get_the_title());
		
		// Get Post Thumbnail for pinterest
		$crunchifyThumbnail = 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='.$crunchifyTitle.'&url='.$crunchifyURL;
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
		$whatsappURL = 'https://wa.me/?text='.$crunchifyTitle . ' ' . $crunchifyURL;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&title='.$crunchifyTitle;
		$diggURL = 'http://digg.com/submit?url='.$crunchifyURL.'&title='.$crunchifyTitle;
		
		// Based on popular demand added Pinterest too
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
 
		// Add sharing button at the Top of page/page content
		$variable .= '<!-- Implement your own social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: http://crunchify.me/1VIxAsz -->';
		$content .= '<div class="crunchify-social">';
		$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
		$content .= '<a class="crunchify-link crunchify-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';   
		$content .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';   
		$content .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';   
		$content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';  
		$content .= '<a class="crunchify-link crunchify-digg" href="'.$diggURL.'" data-pin-custom="true" target="_blank">Digg It</a>';   
		$content .= '</div>';
		
		return $variable.$content;
	}else{
		// if not a post/page then don't include sharing button
		return $variable.$content;
	}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');

7. That’s It By Using Above Code You Will Get Social Sharing Buttons On The Top of Your Post. Now At Last You Just Need To Setup CSS For This Code. To Set CSS, Just Follow Below Steps.

CSS Code For Social Sharing Buttons

8. Now Just Click On Stylesheet Option Form Theme Files Menu (Highlighted In Below Image) And Paste Below Code At Last.

stylesheet file editing option highlighed in theme editor
/* Disable WhatsApp button on Desktop - Tutorial link: http://crunchify.me/1VIxAsz */
@media screen and (min-width: 1024px) {
    .crunchify-whatsapp {
	display: none !important;
    }
}
 
.crunchify-link {
    padding: 2px 8px 4px 8px !important;
    color: white;
    font-size: 18px;
    border-radius: 8px;
    margin-right: 15px;
    cursor: pointer;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    margin-top: 2px;
    display: inline-block;
    text-decoration: none;
}
 
.crunchify-link:hover,.crunchify-link:active {
    color: white;
}
 
.crunchify-twitter {
    background: #00aced;
}
 
.crunchify-twitter:hover,.crunchify-twitter:active {
    background: #0084b4;
}
 
.crunchify-facebook {
    background: #3B5997;
}
 
.crunchify-facebook:hover,.crunchify-facebook:active {
    background: #2d4372;
}

.crunchify-buffer {
    background: #444;
}
 
.crunchify-buffer:hover,.crunchify-buffer:active {
    background: #222;
}

.crunchify-digg {
    background: #444;
}
 
.crunchify-digg:hover,.crunchify-digg:active {
    background: #222;
}
 
.crunchify-pinterest {
    background: #bd081c;
}
 
.crunchify-pinterest:hover,.crunchify-pinterest:active {
    background: #bd081c;
}
 
.crunchify-linkedin {
    background: #0074A1;
}
 
.crunchify-linkedin:hover,.crunchify-linkedin:active {
    background: #006288;
}
 
.crunchify-whatsapp {
    background: #43d854;
}
 
.crunchify-whatsapp:hover,.crunchify-whatsapp:active {
    background: #009688;
}
 
.crunchify-social {
    margin: 30px 0px 35px 0px;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
}

Then Click On Update Now Button. That’s It, Now Just Clear Cache And Test.

So, This Is A Complete Guide On How To Setup Social Sharing Buttons In Wordpress Without Plugin. If You Like This Post, Then Share It With Your Friends And Don’t Forget To Follow Us On Social Platforms.

To Get More Info Like This In Your Inbox, Share It With Your Friends.

Tags

Amandeep Singh

Hello Friends !! I Am Amandeep Singh Potlia A Full-Time Blogger And Web Designer. As A Blogger I Will Update Daily Bases Free Recharge Tricks, Loot Offer 2019, SEO And Webmaster Tricks And Tips And Much More. If You Want To Get Update of My Offers And Tricks, You Can Follow Me On Social Media Platforms. That Added In Below

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close