Create Super fast Social Sharing Buttons without JavaScript with simple CSS

Last updated
App Shah
Crunchify » Social Media References » Create Super fast Social Sharing Buttons without JavaScript with simple CSS

We are pleased to announce our brand new plugin Crunchy Sharing.

Crunchy Sharing – We are happy to announce our brand new super fast #WordPress Social Sharing #Plugin: https://crunchify.com/crunchy-sharing/

More than 25 social sharing options, Optimized, No-JavaScript, Responsive, Light Weight, Fastest, GDPR compliant.

Checkout all screenshots:

We can’t imagine a site without Social Sharing button. It’s must and absolutely required. As title mentions  in this tutorial we will go over steps on how to set up Social Sharing buttons on your blog:

  • without using any WordPress Plugins
  • without any JavaScripts
  • without any performance impact

This are couple of more tutorials I’ve written on how to optimize your WordPress site by eliminating WordPress plugin. It’s worth checking.

Do you have any of below questions, then you are at right place:

  • How to Implement Social Sharing
  • Simple FontAwesome Social Sharing Buttons Without JavaScript
  • Social Media Sharing Buttons. No JavaScript. No tracking. Super fast.
  • The Simplest way to Offer Sharing Links for Social Media
  • Adding Social Share Buttons to any WordPress Page, No Plugin.
  • Easy social sharing buttons without JavaScript and tracking
  • DIY Social Sharing Links: Add Social Sharing Buttons without Plugin WP

Let me start by telling a concept behind this:

Crunchify Social Sharing button including LinkedIn and WhatsApp

Why implement your own Social Sharing Button?

  • Not all but most of social sharing plugins are not optimized for your need
  • They may load social sharing icons individually which increased unnecessary HTTP requests to your server
  • If you are using official social sharing buttons then it loads Java Script for each Sharing button which eventually impacts your page load speed significantly
  • If your page speed is high, your site will rank high in Google Search
  • If your page speed is high, there are more chances users will return to your site more frequently as it’s smooth experience for them

Let’s check what all scripts your site loads for above 5 social sharing plugins. If you add more then add an extra script for each.

========> Twitter script: <========
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


========> Facebook HTML5 script: <=========
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


========> Buffer script: <========
<script type="text/javascript" src="https://d389zggrogs7qo.cloudfront.net/js/button.js"></script>


========> Google+ script: <========
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>


========> Pinterest script: <========
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

========> LinkedIn script: <========
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>

There is no point to load above scripts on each and every page on your site.

Now let’s get started: Create Social Sharing Buttons

Step-1

Go to your theme’s function.php file and paste below code. This will add sharing button at the bottom of the post.

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.'&amp;url='.$crunchifyURL.'&amp;via=Crunchify';
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
		$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&amp;text='.$crunchifyTitle;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&amp;title='.$crunchifyTitle;

		// Based on popular demand added Pinterest too
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;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: https://crunchify.com/?p=7526 -->';
		$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-googleplus" href="'.$googleURL.'" target="_blank">Google+</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 .= '</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');

We have used the_content WordPress hook. It displays the contents of the current post/page.

Here is how your code looks like in functions.php file.

Step-2

Open style.css file of your WordPress theme and put below code for better styling.

.crunchify-link {
    padding: 2px 8px 4px 8px !important;
    color: white;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 2px;
    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-googleplus {
    background: #D64937;
}

.crunchify-googleplus:hover,.crunchify-googleplus:active {
    background: #b53525;
}

.crunchify-buffer {
    background: #444;
}

.crunchify-buffer:hover,.crunchify-buffer: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-social {
    margin: 20px 0px 25px 0px;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
}

Step-3

Make sure you clear your site cache. I’m using WP Super Cache plugin on my site. If you want to optimize all setting for WP Super Cache then follow the tutorial.

Step-4

Deactivate and Delete other Social Sharing plugin if you have it installed before. That's it.

You should see beautiful sharing buttons on your site. Check out live example at the end of each post on Crunchify.

NOTE: I’m using ShortURL on my blog. If you want to have more social sharing buttons then please visit tutorial.


If you want to show Sharing button at the top of the post then use this code (Step-1 only):

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.'&amp;url='.$crunchifyURL.'&amp;via=Crunchify';
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
		$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&amp;text='.$crunchifyTitle;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&amp;title='.$crunchifyTitle;
		
		// Based on popular demand added Pinterest too
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;description='.$crunchifyTitle;

		// Add sharing button at the end of page/page content
		$variable .= '<!-- Implement your own social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: https://crunchify.com/?p=7526 -->';
		$variable .= '<div class="crunchify-social">';
		$variable .= '<a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
		$variable .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
		$variable .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
		$variable .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
		$variable .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
		$variable .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';
		$variable .= '</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');

Checkout our Crunchy Sharing WordPress Plugin:

412 thoughts on “Create Super fast Social Sharing Buttons without JavaScript with simple CSS”

    • Then go to the third line of the code in step 1 and change
      if(is_singular() || is_home()){
      to
      if(is_single() || is_home()){

      everything else stays the same

      Reply
  1. We use the 2 codes in the appropriate areas and disabled our cache, but it still does not show the buttons just the text link

    We deleted code from style css and repasted it and still the same issue, tried different browser and still no go

    Reply
  2. What if i would like it to be visible only on single post/ single.php?
    What to do. ? because it is otherwise visible even on custom posts on front page which i dont want to. I do appreciate your help so far. Thanks in Anticipation

    Reply
  3. Would like to know how to make the code not show on my woocommerce cart and checkout pages and my wp about page? Is this possible?

    Reply
    • I figured out how to do this. Just add the following snippet between the function and if statement and change the page(s) to your page(s). If you don’t use all the page options remember the last one cannot have a comma.

      if(is_page(array ('first-page', 'second_page', 'thirdpage', 'etc' ) ) ) return $content;

      Reply
  4. Hi, is there a way to have it as a shortcode instead of automatically adding before and after content? Thanks

    Reply
  5. Thank you for the code. Please can you tell me how to amended the code to EXCLUDE the home page and INCLUDE all woocommerce pages?

    Reply
  6. Hi! How about the possibility to insert the buttons at the side of the content, like kinsta blog for example? How could I mode the buttons outside the content, like a sidebar?

    Thanks, great job!

    Reply
  7. Nice tutorial, and working perfectly with PHP 7.4. Question: what if I want to add the buttons both to the top of the post and the bottom? How can I achieve that?

    Reply
    • Hi Sofia. Kindly take a look at section in above tutorial:

      “If you want to show Sharing button at the top of the post then use this code (Step-1 only):”

      Also, if you want more flexibility then please take look at our Crunchy Sharing plugin.

      Reply
  8. The CSS classes for the whatsapp button seem to be missing?
    Otherwise this content was amazing, thank you

    Reply
  9. In July 16th this snippet somehow creates an error with Yoast. I got this: Notice: Trying to access array offset on value of type bool in /home/sites/11b/3/3b31403894/public_html/wp-content/themes/dreamglish/functions.php on line 256

    Deactivating Yoast it disappears. Activating yoast and deleting the whole code from functions.php also disappears. Has this happened to anyone else? Thanks.

    I’ve also rolled back a couple of updates of yoast and the problems does not disappear.

    Reply
    • Hi Jordi – I have double checked and couldn’t found any issue in code. Are you still facing this issue?

      So far I have no complaint about the same.

      Reply
  10. Hi dear,
    I posted a message before about a proble between yoast and crunchify. It actually comes from a php update to 7.4.

    Is it possible that this snippet in the functions.php has an outdated variable or function? When I delete the code the problem disappears.

    Cheers

    Reply
    • Hi Jordi. I have just tested again and no issue with above code and PHP 7.4.

      I’m also running it with PHP 7.4. If problem still persist then please share your site URL and error message screenshot.

      Reply
  11. Yes, WhatsApp link is not working. Please update the code. Also, WhatsApp sharing link is not working in your floating and after content. Thanks

    Reply
  12. The Facebook and LinkedIn popup modals aren’t working. When you click on share for the Facebook or LinkedIn button, it opens in a new window instead of popping up in a new popup modal. Any suggestions?

    Reply
  13. Hi there :). I have used this plugin for over a year and it is great. Even added a little reddit button to my page as well.

    I have one issue, I would like this to appear on my category pages. Is there a way to do this? That would be fab 😀

    Reply
    • Thanks Janine. I’m glad code snippet worked perfectly for you.

      I’ve just updated you to another comment also. Try adding filter is_archive() in above code and it should work in Categories page too.

      Reply
  14. I have been using this code snippet for a while now, and I love it!

    One thing though, how can I get this to show on category/archives pages? Is there a way to add this to these page?

    Reply
  15. Hi there, I tried this and it worked perfectly. My question is how do you show the icons on the sidebar on a post? Like how can I show the icons the way you show it on crunchify (twitter, facebook, pinterest, whatsapp). Can I modify the above code or is there any other way? Please help.

    Reply
    • Hi Renan – good point. You could use WordPress’s esc_url() function also instead of default PHP’s urlencode() function.

      It should work just fine.

      Reply
  16. Hello, great tutorial. I used it and it works very good.
    I wonder if it’s possible to exclude only some pages, not all of them. For example: I’d like to exclude the home page and some landing pages, but I want the sharing buttons in the rest of my pages.

    Reply
  17. i have use this useful code many times to many sites. but after i upgrading to php 7.2 the code shown the sharing button and error like this ” Fatal error: Uncaught ArgumentCountError: Too few arguments to function crunchify_social_sharing_buttons(), 0 passed in ……..”

    would you help me, thanks before

    Reply
    • Hi Rahmat –

      I just tried and i’m not seeing any issue with code. Could you share screenshot of your error?

      I highly suspect some typo in your site’s functions.php file related to this code. Make sure to copy completely above code without any issue.

      We are also running on PHP 7.3 the same code 🙂

      Let me know.

      Reply
      • Here is it:

        Fatal error: Uncaught ArgumentCountError: Too few arguments to function crunchify_social_sharing_buttons(), 0 passed in C:laragonwwwwp3wp-contentthemesfuturio-childsingle.php on line 77 and exactly 1 expected in C:laragonwwwwp3wp-contentthemesfuturio-childfunctions.php:39 Stack trace: #0 C:laragonwwwwp3wp-contentthemesfuturio-childsingle.php(77): crunchify_social_sharing_buttons() #1 C:laragonwwwwp3wp-includestemplate-loader.php(74): include(‘C:\laragon\www\…’) #2 C:laragonwwwwp3wp-blog-header.php(19): require_once(‘C:\laragon\www\…’) #3 C:laragonwwwwp3index.php(17): require(‘C:\laragon\www\…’) #4 {main} thrown in C:laragonwwwwp3wp-contentthemesfuturio-childfunctions.php on line 39

        Reply
        • Hi Rahmat – thanks for sharing exception stack.

          This looks like an issue with your single.php file. Which theme are you using? See if you could find an issue on line 77 of single.php file.

          Reply
    • Hi Michal – of course you could.

      Shortcode method is not part of above code but you could just call above function using shortcode.

      If you are looking at complete code then let me know and I’ll write short tutorial on this.

      Reply
    • Hi Carlos – try cleaning up your site cache. It’s because of CSS loading issue.

      Once you apply fix, try cleaning up cache completely. Hope this helps.

      Reply
  18. hy this code is aswm but i have one problem in this my facebook link is not worked.

    error : Sorry, this feature isn’t available right now: An error occurred while processing this request. Please try again later.
    Please resolve it

    Reply
    • Hi Kumar – can you share more details? Also, would be great if you could send screenshot. Are you logged in to Facebook?

      Make sure there is no typo in code.

      Reply
    • You get this error if u try it via localhost. I had same problem but it works perfect when the site is online

      Reply
    • As Costas mentioned below, are you running code locally? You won’t see this issue on live site.

      Hope this helps.

      Reply
  19. Hi!

    I added an email button, which seems to work but the CSS load work and the button is transparent/white.

    I added this to the css:

    .crunchify-email {
        background: #00aced;
    }
     
    .crunchify-email:hover,.crunchify-email:active {
        background: #0084b4;
    }

    And this to the functions .php

    		// Adding email share URL
    		$emailURL = 'mailto:?subject=' . $crunchifyTitle . '&body=Check out this site: '. $crunchifyURL .'" title="Share by Email';
    
    		$variable .= '<a href="'.$emailURL.'" rel="nofollow ugc">Email</a>';
    		$variable .= '';

    Any idea what I have missed?

    Reply
    • Hi Janine. This is just a function. Could you send me complete code? Seems CSS variables are missing in above code.

      Reply
  20. This looks fantastic! Is there any way to implement event tracking into this so I can see in Google Analytics when clicks have been made.

    Reply
    • Nope. That’s a point. We don’t want any extra Java Script to create popup code. New window is more than better experience for users.

      Reply
      • I don’t agree. For me it’s a must have. People are used to this pop way of sharing. If you open the share page in an other tab. I believe not doing that and you will loose some people on the way as they already left your site.

        Reply
  21. Thank you for this post i was really finding a way other than plugin.
    just i little problem the social sharing icons are on every page including post page after including this also // if not a post/page then don’t include sharing button.

    Reply
    • Hi Abhijeet – can you please share your requirement in details? I’ll be able to give you condition for your code including CPT.

      Reply
  22. working great. thanks for sharing..
    but I have problem with share to twitter or/and pinterest whenever my title post contain “&” character, twitter or/and pinterest will cut my post title until that character.

    but at least now I got solution, for one who experience the same issue and still didn’t get it right, here’s the solution, just replace $crunchifyTitle = str_replace( ‘ ‘, ‘%20’, get_the_title()); with $crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, ‘UTF-8’)), ENT_COMPAT, ‘UTF-8’);

    hope it helps.

    Reply
  23. Sharing sometime doesn’t get the thumbnail of the post after clicking on FB button and after posting in Facebook,my website logo appears rather than the post image.

    Reply
  24. Hi.
    I would like to add Instagram button but I don’t know how.
    Can you give little help, please?

    Thank you.
    Rui

    Reply
    • … I know that it it is possible only on mobile browser version but the question is:
      Can I add the button code to the site in a way that it only appears on mobile browser vrsion?

      Thank you

      Reply
          • Hi there – sorry. Instagram is not providing any sharing button as of now.

            Here is official detail from Instagram:

            At this time, uploading via the API is not possible. We made a conscious choice not to add this for the following reasons.

            Instagram is about your life on the go – we hope to encourage photos from within the app. We want to fight spam & low-quality photos. Once we allow uploading from other sources, it’s harder to control what comes into the Instagram ecosystem. All this being said, we’re working on ways to ensure users have a consistent and high-quality experience on our platform.

  25. Hi,
    How to php echo the output in the theme template file rather than at bottom/top of content for custom post type ?

    Thank you

    Reply
  26. Thank you so much for this article. I have been looking for something like this for weeks. There are hundreds of plugins, but they all slow down the pageload so much.
    One small thing: the Pinterest option doesn’t work. It opens Pinterest and tells you to choose a board and if you choose a board you visit it. Nothing is being add to any board on Pinterest.
    Anyone else experiencing the same with Pinterest?

    By the way, can I also add an e-mail button?

    Reply
    • Got Pinterest working (made one image for the whole website and that one is used for Pinterest).
      Have also tried to add an e-mailbutton, but that crashes my website.
      I’m not that good with php.
      Can anyone point me in the right direction?
      How can I add an e-mail button?

      Reply
      • Got the e-mail working. Problem was with copying the code the ‘ became curved and made my website crash. After correcting all ‘ the button was shown and ofcourse the website worked again 😉

        Reply
  27. Thank you so much for this post! We’ve been looking for a plugin that works with our theme and I think this guide might just work the best for us! Thanks!

    Reply
  28. Hi, your code works very good in mobile and desktop devices, but appears in amp version too, any way to disable this code in amp version?? Thanks for you great support.

    Reply
    • Hi Mauro – try adding some wrapper around class crunchify-social, something like below

       code here ... 

      CSS file:

      .hide-on-mobile {
      	display: none!important;
      }
      
      Reply
  29. I am a new blogger and I have to say that I started to visit your blogs after finding a very interesting post about some info that I was looking for. I have to admit that after receiving some of these great posts on my email and reading through them, I have found on this blog a huge source of valuable information that helps me climb to a higher level every day. These posts are very valuable for me. I learn lots of things from your post. Very knowledgeable. I always read your post. I want to be blogger, but now I am developing and designing websites. We have lots of website designs, also we design websites as per our clients requirement. Now we are offering a hug discount on designs and development. We are designing website as per categories. All type of websites we are designing.

    Reply
    • Thank you so much Rashmi for very valuable comment and nice words. Our goal at Crunchify is to provide only valuable resources and tutorials for all my readers.

      We don’t compromize on Quality of the articles and Site Speed. Happy blogging and keep visiting.

      Reply
  30. we provide the exact solution to any issue that is related to the Yandex email . and the main aim of our team is that provide the solution and every customer will be satisfied.

    Reply
  31. This is awesome, all the social sharing buttons I’ve used really slow down my site. I’m wondering now how to show on “posts only” no pages?

    Reply
  32. Optimized. Big help! Thanks a lot, App Shah!

    Just wondering how to apply this on a lightbox…? Colorbox perhaps?

    Reply
    • Hi Jess – do you really need lightbox? Try avoding it at all mean. I would look at page loading benefits Vs. value add to user.

      Reply
  33. Congratulation, it´s a good post. I would like to know if you know the way to put sharing icons in the post grid. Thanks

    Reply
  34. Hi there,
    Thank you for your very useful post on Social Sharing! I am trying to reconfigure mine and wanted to add the ‘wordpress’ social sharing button. I did this but I cannot get the ‘url’ for sharing on WordPress. Nor can I find it anywhere..!
    I see that you don’t include it in your code either. Is there a particular reason for doing so? If you do know what the ‘url’ value for WordPress sharing is, do you mind sharing it with me please??
    Thanking you in advance..!

    Reply
  35. Great post on how to add social icons without a plugin! We would like to be able to add a share by email button to this script without needing a plugin, thanks

    Reply
  36. Hola perdone por no escribir en ingles, pero soy de España, busque esto por todos lados hasta encontrarlo en su sitio y no solo eso, también he encontrado muchas soluciones que ahora mismo estoy viendo como implementarlas.

    Mi pregunta es, ¿como podría poner los iconos dentro de los botones que usted ha compartido?, me encanta su creación, eso hay que reconocerlo, ahora voy a ver su otro articulo para poner los botones flotantes, si desea puede pasar por mi web, tengo un articulo para poner entradas relacionadas sin plugin, para así evitar plugin innecesarios.

    Sin mas espero que le guste: https:// muyblogger.com/entradas-relacionadas-sin-plugin-wordpress

    Un cordial saludo, Daniel Blanco

    Reply
  37. First of all thank you for posting.

    The plugin I am looking for is the one you are having on your website. Could you please let me know what plugin are you using.??? i am looking for my web site site. please share your opinion.

    Regards

    Reply
  38. Excellent tutorial! This is really helpful to used my business site development. This is massively helpful my site. It is simple and easy to used.

    Thanks.

    Reply
  39. Hi Jordan – are you still facing this issue? Try cleaning browser cache and site cache. If you are using CDN then don’t forget to flush cached files too. Hope that helps.

    Reply
  40. Hi.

    I just noticed that the following error messages are displayed when I turn on “WP_DEBUG”:

    Notice: Trying to get property of non-object in /home/xxxx/public_html/wp-content/plugins/custom-social-plugin/plugin.php on line 142

    Notice: Undefined variable: post in /home/xxxx/public_html/wp-content/plugins/custom-social-plugin/plugin.php on line 142

    Notice: Trying to get property of non-object in /home/xxxx/public_html/wp-content/plugins/custom-social-plugin/plugin.php on line 142

    I think the affected line will be the following one (Line 142):

    $crunchifyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );

    Just for your reference: the php version for my blog is 7.0.

    Can I just ignore it? (When I turn off “WP_DEBUG”, this message does not appear.

    Reply
  41. Hi, why didn’t it work for me? The functions.php is ok. and i added the code so it works fine. But the style.css not worked for me. Only text links are under the posts but the buttons aren’t shown. So what am i missing? Should i had to upload some icons before doing this?

    It seems like this: FacebookTwitterLinkedin, bu no icons! Can u please help me?

    Reply
  42. Any idea on why this isn’t working for me? Specifically, the Facebook sharing URL leads to this error:

    “Can’t Load URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.”

    The other sharing link work fine.

    Following the instructions in that error message, I created a Facebook app and added all domains and subdomains to the App Domains field in the app settings and made the app public. Yet, even after following Facebook’s advice, I’m still seeing the error.

    Let me know if I need to share more info. I can’t give a link to the site, so hopefully you all have come across this issue before and can help without it.

    Reply
    • I think I figured it out.

      I replaced the above suggested sharing code for Facebook:

      $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;

      with this:

      $facebookURL = 'https://www.facebook.com/v2.4/dialog/share?app_id=966242223397117&href='.$crunchifyURL;

      The Facebook app id is the default Facebook app id, but it could be replaced with one’s own app id if desired.

      You may want to suggest this fix in the original post so folks running into this problem will know how to fix it.

      Thanks goes to this WordPress forum post for the help:

      https://wordpress.org/support/topic/top-scorer-functionality/

      I’m still not sure why the code Facebook recommends using doesn’t work for me, so any suggestions will be appreciated. 🙂

      Reply
    • Ideally it should work without any Facebook appID. On Crunchify, it’s working seamlessly.

      Could you share your blog URL and screenshot if you could?

      Reply
  43. good tutorial but the code to paste seems to require the use of shorturl?
    what do i put instead of $crunchifyURL
    i replaced crunchify with my domain (without the extension) in all the places and it sort of worked except i got just text links and no boxes.
    what have i missed? i’m using twentysixteen theme.
    thank you

    Reply
  44. Hi! You’ve made a great impact on my site but is there a way to more easily control where the buttons reside? I’d like them off my home page’s Services posts. Thanks!

    Reply
  45. App Shah, awesome work. Clean concise blog post, great examples, easy to use. Thanks a ton.

    Quick question, trying to have the FB, G+, LinkedIn windows open in a smaller window, trying to do this:

    onclick=”javascript:void window.open(‘https://www.facebook.com/sharer/sharer.php?u=’,’1362258769818′,’width=1400,height=800,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=1,left=0,top=0′);return false;”

    Getting errors using it though, any suggestions would be welcomed!

    Reply
  46. I am very impressed with all this. I have been using ShareBar for a long time, but unfortunately this plugin is not enqueuing styles nor JS in the proper way and not optimized for speed, like your solution.

    I am wondering if you tried to use a vertical bar, like in Sharebar plugin (I guess this could be handled via CSS, maybe).

    Reply
  47. For the full styling of “Pin It” button I had to add the data-pin-custom=”true” attribute in a href of https://www.pinterest.com/pin/create/button. It is important because it keeps your custom markup, including your HTML and CSS. If this attribute isn’t included then Pinterest will render one of their own Save buttons instead.

    Reply
    • Hi Anat Tal – Thanks for pointing this out. I’ve just updated above tutorial and added data-pin-custom="true" to pinterest button.

      Happy blogging and keep sharing.

      Reply
  48. Awesome, Shah! 😀
    Love it!
    This is the answer to my question.

    Just wonder if there’s any way so I can make the share button bigger?
    Wanna make it easier for the visitor to share the post.
    Thanks!

    Reply
  49. Hello, I see you also offer a plugin but there is no link. So, with this tutor, how can I add email button please?

    Thank you.

    Reply
  50. Thanks for you brilliant idea, but when I implemented your code to my site, the social icon is not displaying but as a link text, check the screenshot please. My website is waponpointdotcom, thank you.

    Reply
  51. Thanks for your brilliant idea, but when I implement the code on my website, it doesn’t display it as an icon but as a link text. See the screen shot please, thank you.

    Reply
    • Hi Arafin – Ideally you should ignore this. But if you want to have more space between buttons then you could modify CSS properties from 2 px to 10 px.

      .crunchify-link {
          margin-right: 10px;
      }
      Reply
  52. Hi, does this solution for social sharing use cookies?
    Thank you a lot.

    (sorry for the previous comment into the wrong discussion)

    Reply
  53. Excellent resource works perfect, thank you for your work and for sharing it.

    How I can do to show at the same time the buttons at the beginning and end of the content?

    Greetings!

    Reply
    • Hi Roc21 – any reason you want to show sharing button at the beginning and end of post? To be honest, it wont be good experience for users.

      Between – code is there above for both locations.

      Reply
  54. Thanks a lot for this easy social sharing option, but I would like to DISABLE IT FOR PAGES. I want to show it only on posts. Could you please help me?

    Reply
  55. It’s great on my “Post”. But it also appears on another Page. How to hide this on “Page” and my Woocommerce “Single product Page” ?
    Thanks anyway
    🙂

    Reply
  56. Hello. It’s great tutorial!
    But I wonder, can I call this function in some point not hook the content. I want to put out it in my query.

    Reply
  57. Thanks a lot this is awesome, and workes fast and looks great 🙂
    But I have a question though,iIs there a way to make pinterest grab the image designated by Yoast SEO as a facebook og thumnail?

    Thank you.

    Reply
      • Oh yeah. That’s right. We are adding this code:

        &media='.$crunchifyThumbnail[0] in Pinterest URL and that’s why. Do you know why you have different image for Pinterest? I would use the same featured image 🙂

        Reply
  58. Thanks for this wonderful post.been all over the place on net for this b4 i stumbled on your post. However, how do i go about using this only on my posts and not on the entire web pages?

    Reply
  59. Hi,

    This is what I get. If I remove $sharingTitle = str_replace ( ‘ ‘, ‘%20’, get_the_title() ); it works but then I loose the title.

    Reply
  60. Ah… the solution to display it as a text widget in the sidebar was so simple… LOL.
    Just change:

    add_filter( 'the_content', 'crunchify_social_sharing_buttons');

    to:

    add_shortcode( 'crunchifybuttons', 'crunchify_social_sharing_buttons');
    Reply
  61. Really brilliant post! I always tend to avoid plugins for several reasons and this code works like a charm. Thank you so much!

    Just wondering though, is there a way to get the buttons to appear in a text widget? Perhaps via shortcode or something instead of at the bottom or top of the post?

    Reply
  62. First of all very very thank you for this awesome code. I was looking for something like this and was landed on other wordpress plugin. Very similar approach without JS. But eventually I added you code to my blog. But, I’m facing problem on Pin it button, no images showing on pinterest.

    I’ve another question. Why not added the onload javascript to open new window?

    Reply
    • Hi Sen. As far as you have featured image setup for your post, it should appear for Pinterest share option. As the main goal of this social sharing media button, I would avoid JS usage at all 🙂

      Reply
  63. Woow.. fantastic way to add sharing buttons ! Love it !

    I have a DIV (#shareButtonsWrapper) in my blog post in a specific position where I would like to insert the code provided by crunchity to generate my share buttons. Is it possible ?

    Reply
  64. Hey App,

    Great Solution! I’m using the Genesis Framework, is there a way to add the Social Buttons to appear under the title for each Post when viewing the Blog Page?

    Reply
    • Hi Tom Nunn – have you tried following section “If you want to show Sharing button at the top of the post then use this code (Step-1 only):”?

      Hope that helps. If you are looking for custom solution then let me know, i’ll update you.

      Reply
  65. Thanks for sharing. Your solutions is lifesaver for websites which have poor page speed due to heavy plugins. We have used it on our website and it works like Charm.

    Big Big Thanks again!

    Reply
  66. hello thanks for your post, but I want to know how we can put share buttons on another part, like the bottom of the title. regards

    Reply
  67. Hi, these social buttons inherit the default hover effect of theme, what should i do now?

    Default hover link text color is red, on mouse over it turns white.

    Please help

    Reply
    • Hi Saud Khan –

      We have specified color white for link already in CSS for property .crunchify-link. Please make sure it’s not checked out. Try adding !important keyword to it.

      .crunchify-link {
          color: white !important;
      }
      Reply
    • Hi David. We have specified color white for link already in CSS for property .crunchify-link. Please make sure it’s not checked out. Try adding !important keyword to it.

      .crunchify-link {
          color: white !important;
      }
      Reply
  68. i update code in my site afterward google page speed showing this error : “Size tap targets appropriately
    Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.
    The following tap targets are close to other nearby tap targets and may need additional spacing around them.
    The tap target Twitter is close to 1 other tap targets.
    The tap target Facebook is close to 1 other tap targets.
    The tap target LinkedIn is close to 1 other tap targets.
    The tap target Pin It is close to 1 other tap targets.
    The tap target Admission 2016 and 14 others are close to other tap targets.”

    Reply
    • Usually social media icons look good if those are placed next to each other. If you want to do more adventure then you could increase margin-right property to 30 px, but it wont look good 😉

      .crunchify-link {
          margin-right: 30px;
      }
      Reply
  69. Nice article. Thank you for sharing this. However $post variable is undefined. I think there should be global $post; at the top of the function.

    Reply
  70. Hi For some reason the buttons display in my woocomerce checkout cart, is there a way to modify to exclude from
    is_cart() is_checkout() is_account_page
    thanks

    lee

    Reply
    • Hi there – of course. Try this condition.

      if(!is_cart() && !is_checkout() && !is_product() && is_singular() || is_home()){
      --------> Put code here
      }
      

      This is what I’m using on Crunchify 🙂

      Reply
  71. I just wanted to let you know that the post link does not work properly when a post which contains non-English characters in URL is shared with Twitter. Using the “urlencode” function will resolve this issue. Just for your reference.

    Reply
  72. How do I show my description of my blog post when I share it on Facebook?
    How should I write the code for $crunchifyDescription ?

    Another question I have is how do I display my featured image when I share my blog post on Facebook?

    My current share code for facebook. Is this correct?
    $facebookURL = ‘https://www.facebook.com/sharer/sharer.php?u=’.$crunchifyURL.’&media=’.$crunchifyThumbnail[0].’&description=’.$crunchifyDescription;

    Reply
  73. I love this solution! However, using this with a Woocommerce shop, I can’t get the code to pick up the correct image. Can you help me? Thanks so much!

    Reply
    • Hi Ibadullah – we are using “the_content” filter which is used to filter the content of the post. Basically it will add content after post. Could you share your blog link and i’ll take a look.

      Reply
  74. Hello

    The facebook and google plus sharing buttons not working.Any help?
    Google error “The requested URL was not found on this server. ”
    Facebook error “Sorry, something went wrong.

    We’re working on getting this fixed as soon as we can.”

    Reply
      • I can’t see your reply below. Which reply? Sorry I mean if i publish a blog post and share it on Facebook . I want to show the blog post image. So every blog post will have a blog picture for the Facebook share. Right now if I I share my blog post on Facebook it will show my website ogg photo. Thanks 🙂

        Reply
      • Sorry I mean if i publish a blog post and share it on Facebook . I want to show the blog post image. So every blog post will have a blog picture for the Facebook share. Right now if I I share my blog post on Facebook it will show my website ogg photo.

        Reply
  75. I really appreciate the tutorial. It’s fantastic! I do have a question though. This tutorial is to place the share icons on pages, but how would I set them up to attach and post to individual elements on a page? Specifically, I’m building a page of archived PDFs. How would I go about attaching the buttons to those individual posts, so that they share the PDFs? Here’s the mockup of the page that I’m building, so that you can get a feel for what I’m trying to accomplish: http:// futurethink. com/mockup/infographic.html I really appreciate any help!

    Reply
  76. Great post! I’ve been using your social buttons and they looks swell.
    Tiny adjustment I’ve made to the css:

        .crunchify-link {
                      margin-top: 2px;
                      display: inline-block;
        }
    

    That makes the buttons spread over two lines if the containing div gets two small. Without it, since there’s no spaces between the buttons, the line would only break in the middle of the “Pin it” button.

    Reply
  77. Hi, I would like to have the Social Sharing buttons with a Sprite. How can I do it?
    I have seen your post using Sprites but i’ts only for Follow Buttons.
    Thanks.

    Reply
  78. Hello, Friends

    Recently, I have developed wordpress based recruitment oriented website. After completing all requirement of website, i would like to set Social Share & Follow button for Facebook, Google+ & Twitter, How do i set up it. I am new to use WordPress so please describe your answer in brief..!

    Reply
    • Hi Kesri – thanks for stopping by. As you may have seen above – try putting code into your theme’s style.css and functions.php file and you should see nice social sharing buttons on your blog posts.

      If you are not comfortable modifying those file then use plugin which I’ve created and put all above code there: https://crunchify.com/optimized-sharing-premium/. It’s handy for newbies.

      Reply
  79. How to add this buttons to a custom template page? is_singular() || is_page(mycustomtemplatepage) doesn’t work. Thanks in advance!

    Reply
    • Hi there –
      You could try this code as sample:

      if ( is_singular('deals')) { // Here "deals" is a slug name for my CPT
              remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); 
              add_action( 'genesis_sidebar', 'crunchify_add_sidebar' );
      }
      
      Reply
    • Hi Phil. I would extract out sharing button code and create a function and call it two times under $content block. I’ll update a tutorial with steps may be in couple of days. Stay tuned.

      Reply
  80. Hello,

    Thanks for the tutorial!! I have it all on my client’s site & although it seems to be working, it adds a ‘ ‘ to the permalink url.

    https:// www. facebook. com/sharer/sharer.php?u=http:// mashbillwhiskey. com/upcoming-event/i-love-whiskey-pt2/

    should be:

    https:// www. facebook.com/sharer/sharer.php?u=http:// mashbillwhiskey.com/upcoming-event/i-love-whiskey-pt2/

    It added it between the word “upcoming” and the hyphen.

    Any help would be appreciated!

    Reply
      • Hello!! Thank you for the reply!

        The links are in my original comment, but here is the main site: http :// www. mashbillwhiskey. com

        Reply
  81. Hi, Thanks for really useful tutorial.
    Post thumbnail and Title are okay to display when share…. How can I display some text of post content (like: excerpt) after the title?

    Reply
    • Hi there. I’ll take a look and will update. But note: not all social sharing option allow you to pass excerpt. Ideally it should be picked up using open graph metadata in Header automatically 🙂

      please find attached image.

      Reply
      • Hello App, can you tell me how to do this. I have added your share on my page. It works briljantly, only it doesn’t show up on my blog page which is not the first page of my website (static page).

        Reply
        • Hi there – which WordPress theme are you using? In above code, we do have is_singular() hook which applies to posts, pages and attachment pages. So it should work in your scenario too.

          Reply
          • I use Moesia, but change it completely to my needs. As you can see it does not show on the blogpage http:// http://www.casitadelcuco. es/blog/ So would like to paste a hook in the PHP to get it on the blog page.

          • Thanks Geert for posting site link. I saw you have except enabled on home page and hence you are not able to see buttons on home page, which is valid 🙂

            Same thing you could see on Crunchify home page for bottom 6 posts 🙂 Excerpt flow doesn’t call the_content() hook.

          • Yes, I see now excerpt is calling the buttons. In the blog overview, the text of the buttons comes in my blogposts excerpts. It messes up everything a bit.
            Sad there is not any php or html hook to get the buttons at the top of the page and out of my blog excepts. Have to find a way now to get everything straight.

  82. Hi there, I implemented the code on my site. The new WordPress plugin didn’t work for me and it was a pleasure also to have more customization possibilities, by learning how to code it by my self. Thanks for the tuto!

    I would like to add a bit more of text and buttons but I hadn’t success getting the div wrapping responsively to a second line on small screens… Any idea?

    Thanks in advance

    Reply
  83. Hey i’m using you code for a while in a custom theme and it’s really nice, I’m looking to add a whats app icon which display only on mobile of course… do you have any idea ?

    Reply
    • Hi Olivier – as per my information – there isn’t any way we could add it without javascript loading which basically violates our purpose of using this code. Here we are not loading any JavaScript so far for all above sharing buttons.. and I would like to continue on that route 🙂

      Reply
  84. Hey guys, I’ve been trying to get my social media icons to not show on some of my pages and I tried this solution based on some of App’s comments below. It works fine with only one id number but not with more than one. What I am doing wrong?
    if(is_singular() && !is_page(3,13,14,15,99,101,187,223)){ // sample: 234 is a page id

    Reply
    • Hi Paul – you could create custom function something like this:

      function crunchify_force_ssl( $force_ssl, $post_id = 0, $url = '' ) {
      // List of post or page IDs on which you need SSL cert
      $list_of_post_page = array(2343, 153, 54, 5);
      if ( in_array( $post_id, $list_of_post_page ) )
      return true;
          }
          return $force_ssl;
      }
      add_filter('force_ssl' , 'crunchify_force_ssl', 10, 3);

      More info: https://crunchify.com/wordpress-how-to-force-specific-pages-to-be-secure-ssl-https/

      Reply
      • Hi App, thanks I’ll give it a try. Question though: why am I forcing ssl instead of just using the if statement? I don’t understand php so bear with me please.

        Reply
          • Well unfortunately I can’t figure out how to do this so I’ve gone to another forum for help with how to make this work. Thanks anyways.

    • Hi Jeffrey – I would suggest you to put your best image from your post as a featured image. I believe – it’s the best automated option to attached an image.

      Reply
  85. Thank you for a great tutorial. I’ve got totally fed up with the plugins out there, and I’m so glad to switch to this. Couple of questions though:

    1. Would you have a suggestion how to add buttons for “Print this” and “Email this”?
    2. Could this be inserted somewhere else than at the top/bottom of the main content? For example, I’m using the theme Twenty Sixteen. It lists all the post meta stuff in a separate div entry-footer, which comes after the entry-content div. Could I insert the buttons into that div somehow with modifying only the functions.php?

    Reply
    • Hi Jasso – try adding below line for email this link:

      $emailURL = ‘mailto:?subject=’ . $crunchifyTitle . ‘&body=Check out this site: ‘. $crunchifyURL .'” title=”Share by Email’;

      You just need to add above code into functions.php file and you should be good.

      Reply
  86. I tried adding the code for the top in the functions.php above the code for the bottom and got a 500 server error. Wish I could figure out how to make it work on both the top and bottom of the posts/pages.

    Reply
    • Hi Paul. Sorry for late reply. I’ve created very simple plugin for users who don’t want to modify functions.php and other files. Here is a link: https://crunchify.com/optimized-sharing-premium/

      Currently it supports only top/bottom position but I’ll add option for both in next release. Just update the plugin next time you see update and you will have that option too. Please stay tuned.

      Reply
      • Hi App, thanks for your reply but I was hoping to avoid using a plugin which is why I liked your function solution. I’ll just stay with the bottom only solution if that is what I have to do to avoid using a plugin which will slow down the page speed results. Thanks again.

        Reply
  87. Is it possible to have the icons show up at the top and bottom of the pages/posts at the same time instead of just one or the other? If so, what would be the code to use?

    Reply
    • I just took the code that displays the icons at the top of the post and changed the following:

      return $variable.$content;

      to

      return $variable.$content.$variable;

      Reply
  88. Hi,

    Thanks for your tut, i did it and worked.
    But i only want to display social button in post (not index, page …)

    You can see in eBookDe (.) com now.

    What do i have to do ?
    Thanks.

    Reply
  89. Hi there, I know this isn’t a new tutorial but it was exactly what I need to have custom social share buttons, many thanks for sharing it. I have one question, I applied this to a Genesis child theme, and the buttons are placed right after the post, I need to place them inside the post footer, the hook is genesis_entry_footer, how can I do this? Thanks!

    Reply
    • I believe – we have to put code inside content in order for us to get URL, title and image URL by default. For placing it inside post footer – you need to have custom query to get all above parameters.

      Reply
  90. Hi, exactly what i was looking for, thanks for sharing! Unfortunately Facebook and Google+ does not work anymore. Some suggestions? Thanks!

    Edit: Sorry, was my fault… everything is fine! 🙂

    Reply
  91. Hi there,
    I’ve installed your plugin on my website and it works beautiful. Thanks alot!
    I just couldn’t figure out how the make sure that the social buttons are only shown on category pages. I tried to implement if loops at different positions within crunchify-social-sharing.php but it never worked out like in your examples above.

    Category example page: http:// www. teilenswert. de/witze/schwarzer-humor
    Singe example page: http:// www. teilenswert. de/witze/kurzwitze/2960-kondom-auf-finnisch

    I would like to setup the social buttons only on category pages or at least to change its look on single pages. Have you got any hints (e.g. examples) for me how to solve my problem?

    Reply
  92. when I click facebook or pinterest, I don’t see the image I am sharing . Is that normal if I don’t see the image because I am using localhost now? If I put on the server will i see the image?

    Reply
      • Thanks for the reply. So that’s mean if my wordpress site is on the server, the social image will appear on facebook share and pinterest share?

        Reply
          • thank you.. how do I add & in the title? for example,
            $crunchifyTitle = str_replace( ‘ ‘, ‘%20’, ‘Brave & co -‘ . get_the_title());

            right now it shows up , Brave

          • Hi Shah, I upload my site to the server. When I click facebook share or pinterest share, i don’t see the product image i’m sharing. How do I made the image appear when I’m sharing?

          • Hi Sisi – are you applying above script on your wordpress blog? Can you share screenshot? Last time you mentioned it was woocommerce product or other.

          • The issue I’m having is that I have a “photo of the day” in the footer of my website, and it ALWAYS chooses that footer image over the image(s) that are in the actual post.

  93. How do I reposition the social button ? For woocommerce product page, it display in the product description tab. I want to display outside the tab.

    Reply
  94. Thanks for the code. How do I display them in woocommerce product page and my custom post type “journal” post page?

    Reply
  95. Hello,

    I use storefront with woocommerce. I would like to add share buttons just after product description.
    I tried the code above and removed the add_filter and write this (before function declaration):

    add_action( 'woocommerce_single_product_summary', 'crunchify_social_sharing_buttons', 20 );

    It did not work. Any idea?

    Reply
    • Hi Murhaf – I would avoid making additional HTTP requests to get counter number. That’s the whole point making our own simple social sharing button.

      Reply
  96. No worries. You could achieve that by putting your custom CSS inside your theme’s @media CSS query like mentioned here…

    @media only screen and (max-width: 480px) {
        .crunchify-link:hover,.crunchify-link:active {
            color: white;
        }
        .crunchify-twitter {
            background: #00aced;
        }
    .... and so on....
    }
    Reply
    • Has this been proven to work yet and if so could someone post the complete code we need to put inside our style sheet? Thanks

      Reply
    • Hi App, I have been unable to make the media query above work and was wondering if you could add it to the tutorial for those of us who struggle with responsive design a little bit. Thanks in advance.

      Reply
  97. It seems I need a lesson in how to modify the Facebook and Twitter share links. I’ve tried several variations and nothing works. The Facebook link in your code works. It takes people to Facebook and lets them enter in some text before sharing a blog post. But the URL displays twice. It doesn’t display the blog post title, and I’d also like to display an excerpt.

    With the Twitter link, I’d like remove the post title and insert some text. I’ve Googled the heck out of this and must not be using good search terms. An article on how these share links function and can be modified would be really helpful.

    Excellent code snippet, though. Thank you!

    Reply
  98. How to use it as a shortcode? I have a custom theme and it messes up the layout below a post this way. .e.g execute the code on single.php, content.php, search.php and index.php via shortcode.

    Reply
    • Hi Driezzie – unfortunately this is custom code hence there isn’t any shortcode for it. But you raised good point. If time permits – i’ll create WordPress plugin for this one.

      Stay tuned.

      Reply
  99. My self-created social share Facebook icon stopped working. This tutorial works like a charm. It’s elegant and clean. I was easily able to place it in my Genesis child theme and splice in the CSS from my previous set.

    I was wondering, though, how I might also include a social share icon for Pinterest.

    Thank you!!

    Reply
    • I found your social sharing list of URLs. Very helpful, thank you!

      It doesn’t like this, though. I get an error message.

      $pinterestURL = 'https://pinterest.com/pin/create/bookmarklet/?media='[post-img]&url=[post-url]&description=[post-title];

      The format seems correct, but the error message says it doesn’t like the = sign. They all have = signs, though, so I’m not sure why it’s not happy.

      Reply
    • I fixed it. :o)

      The placement of the closing apostrophe (not sure what PHP folks call it) is a bit different than what’s used for Twitter and Facebook in your code. The entire Pinterest URL is just that: an URL. So the entire thing has to be enclosed. My mistake was trying to mimic how Twitter and Facebook are written.

      Here’s the correct version:

      $pinterestURL = 'https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=[post-url]&description=[post-title]';
      Reply
  100. Thanks for the Tut,

    I added:

    $shortTitle = str_replace( ‘ ‘, ‘%20’, get_the_title());

    to help validation errors:

    https:// validator. w3. org/nu/?showsource=yes&doc=http%3A%2F%2Fcrunchify.com%2Fhow-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal%2F

    validator wants %20 in url text

    Reply
  101. Great Tutorial.. It is working like charm in my theme only the issue is on homepage in post excerpts social media buttons & links are not working properly and showing up as text .. can you tell me what could be the issue ..

    Reply
    • Hi Johny – usually excerpts removes all html metadata and output only plain text result. If you want you could remove condition is_home() from above code. Button will not be visible on home page.

      Between i’m working on WordPress Plugin for the same. Please stay tuned.

      Reply
  102. Thank you so much for this excellent tutorial. I need some help though – instead of showing the links below content, I would like to show these buttons below the post. Can you please help me?

    Reply
    • Hi AG – what do you mean by below post? There are multiple hooks in wordpress that we could use. Want to get exact info. Please attached screenshot if required.

      Reply
  103. hello there! thank you for this brilliant piece of code! but this css is not responsive. can you tell us please how we can make it responsive?

    Reply
  104. Great tutorial! I have a question, though: how do I set up the parameter to grab the image in the post, so I can include a share on Pinterest button? Thanks!

    Reply
  105. Brilliant post. Just what I was looking for. Many thanks for taking the time to put this together. Great stuff 🙂

    Reply
  106. Hi Tui – it would be custom query. Try to get your page ID and exclude it into using if condition.

    if(is_singular() && !is_page(234)){  // sample: 234 is a page id
    
    Reply
    • Hi Lim – it would be custom query. Try to get your page ID and exclude it into using if condition.

      if(is_singular() && !is_page(234)){  // sample: 234 is a page id
      Reply
  107. It works great! However I’d like to know how to do for the custom post only ? I tried to change the “add_filter” but nothing appears :
    add_filter( ‘name-of-the-custom’, ‘crunchify_social_sharing_buttons’);
    Thanks !

    Reply
  108. Hi Inder – above code should work with any WordPress themes as we are using only default official WordPress hook. Can you try changing to default theme? If you don’t see an issue after switching to default theme then try contacting your theme owner.

    Reply
  109. Thanks for your article. I used it in my WordPress theme. One thing, where can I find the scripts of other social networks. In your article, you gave us 4 ones, now I want Pinterest or LinkedIn or Delicious for example?

    Reply

Leave a Comment