If you’re editing your live website, maintain your FTP connected to your server and make a backup of your original theme’s function.php file. If something goes wrong, simply replace the file and your site will go online immediately.
You must paste the function supplied below into the function.php file of your theme. Unless you know what you’re doing, copy the same snippet without making any modifications.
<?php
// Function to handle the thumbnail request
function get_the_post_thumbnail_src($img)
{
return (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) ? $matches[1] : '';
}
function dev_pt_social_buttons($content) {
global $post;
if(is_singular() || is_home()){
// Get current page URL
$sb_url = urlencode(get_permalink());
// Get current page title
$sb_title = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$sb_thumb = get_the_post_thumbnail_src(get_the_post_thumbnail());
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$sb_title.'&url='.$sb_url.'&via=dev_pt';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sb_url;
$bufferURL = 'https://bufferapp.com/add?url='.$sb_url.'&text='.$sb_title;
$whatsappURL = 'whatsapp://send?text='.$sb_title . ' ' . $sb_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sb_url.'&title='.$sb_title;
if(!empty($sb_thumb)) {
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title;
}
else {
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&description='.$sb_title;
}
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title;
$gplusURL ='https://plus.google.com/share?url='.$sb_title.'';
// Add sharing button at the end of page/page content
$content .= '<div class="social-box"><div class="social-btn">';
$content .= '<a class="col-1 sbtn s-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow"><span>Share on twitter</span></a>';
$content .= '<a class="col-1 sbtn s-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow"><span>Share on facebook</span></a>';
$content .= '<a class="col-2 sbtn s-whatsapp" href="'.$whatsappURL.'" target="_blank" rel="nofollow"><span>WhatsApp</span></a>';
$content .= '<a class="col-2 sbtn s-googleplus" href="'.$googleURL.'" target="_blank" rel="nofollow"><span>Google+</span></a>';
$content .= '<a class="col-2 sbtn s-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank" rel="nofollow"><span>Pin It</span></a>';
$content .= '<a class="col-2 sbtn s-linkedin" href="'.$linkedInURL.'" target="_blank" rel="nofollow"><span>LinkedIn</span></a>';
$content .= '<a class="col-2 sbtn s-buffer" href="'.$bufferURL.'" target="_blank" rel="nofollow"><span>Buffer</span></a>';
$content .= '</div></div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
// Enable the_content if you want to automatically show social buttons below your post.
add_filter( 'the_content', 'dev_pt_social_buttons');
// This will create a wordpress shortcode [social].
// Please it in any widget and social buttons appear their.
// You will need to enabled shortcode execution in widgets.
add_shortcode('social','dev_pt_social_buttons');The first thing you’ll notice is a function called get_the_post_thumbnail_src($img) with the input $img. I’m actually using the preg_match function to find the post’s thumbnail.
Then you’ll notice that I’ve declared a new variable called $sb_url, which I’m using to store the post’s URL. I’m doing this with the urlencode(get_permalink()); method.
The next variable, $sb_title, is used to store the post title. I used it to produce the social share headline dynamically. I’m storing the information about the post’s thumbnail in $sb_thumb. I’m also testing whether the post thumbnail is available or not using an if-else statement and the check on!empty($sb_thumb) function.
Because each of these sites has its own method for automatically generating share links, many extra variables are employed to store the URL structure of the respective social networking sites.
Finally, I connected this function to the content area using the_content. The entire PHP code is self-explanatory and simple to modify.
You can also use the [social] shortcode to display the share button anywhere on your website. If you want to add more buttons, simply add extra social media named variables and the appropriate URL parameter.
You’ve probably noticed that not a single URL calls any parent JavaScript file, but it’s still completely functioning and dynamic.
After inserting these codes into your theme file, when you load any post, you will see social network links at the bottom. As a result, our functions are functioning properly. Now all you have to do is give those social links some excellent styles.
Making social media buttons using CSS
Include these styles in the stylesheet.css file for your theme. I’m guessing that your website uses font amazing fonts. You will require it because the style was created with the Unicode of its font in mind. Of course, you may alter it.
/*************************
Styles for the buttons.
@Prakash Tyata
http://prakashtyata.com.np
*************************/
.social-box {
display: block;
margin: -20px 0 40px;
padding: 0 6rem 0;
}
.social-box:last-of-type {
margin: 0 0 40px;
}
.social-btn {
display: block;
width: 100%;
}
a.col-2.sbtn span {
display: none;
}
a.col-1.sbtn {
width: 180px;
display: inline-block;
text-align: center;
border-radius: 50px;
padding: 10px;
color: #fff;
margin: 0 0.5% 0 0;
font-size: 15px;
}
a.col-1.sbtn span {
margin: 0 0 0 15px;
}
a.col-2.sbtn {
width: 6%;
display: inline-block;
text-align: center;
border-radius: 50px;
padding: 10px;
color: #fff;
margin: 0 0.5% 0 0;
line-height: 1.825 !important;
max-width: 50px;
min-width: 50px;
}
.s-twitter {
background: #03A9F4;
}
.s-twitter::before {
font-family: fontawesome;
content: '\f099';
}
.s-twitter:hover {
background: #0093d6;
}
.s-facebook {
background: #3F51B5;
}
.s-facebook::before {
font-family: fontawesome;
content: '\f09a';
}
a.col-1.sbtn.s-facebook:hover {
background: #2f409f;
}
.s-googleplus {
background: #F44336;
}
.s-googleplus::before {
font-family: fontawesome;
content: '\f0d5';
}
.s-googleplus:hover {
background: #c82c21;
}
.s-whatsapp {
background: #4CAF50;
}
.s-whatsapp::before {
font-family: fontawesome;
content: '\f232';
}
a.col-2.sbtn.s-whatsapp:hover {
background: #3d9440;
}
.s-linkedin {
background: #1a7baa;
}
.s-linkedin::before {
font-family: fontawesome;
content: '\f0e1';
}
a.col-2.sbtn.s-linkedin:hover {
background: #136288;
}
.s-pinterest {
background: #bd081c;
}
.s-pinterest::before {
font-family: fontawesome;
content: '\f231';
}
a.col-2.sbtn.s-pinterest:hover {
background: #a10718;
}
.social-btn a:last-of-type {
margin: 0;
}
@media only screen and (max-width: 1200px) {
a.col-1.sbtn {
width: 180px;
display: inline-block;
text-align: center;
border-radius: 50px;
padding: 10px;
color: #fff;
margin: 0 0.5% 0 0;
font-size: 15px;
}
}
@media only screen and (max-width: 768px) {
a.col-1.sbtn {
width: 46px;
}
a.col-1.sbtn span {
display: none;
}
}If you use maxcdn, cloudflare, or another comparable service, clean your cache after installing these styles and delete your CDN cache as well.
