
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 WordPressPlugins
without
anyJavaScripts
without
anyperformance
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:

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.'&url='.$crunchifyURL.'&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.'&text='.$crunchifyTitle; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&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: 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 havemore 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.'&url='.$crunchifyURL.'&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.'&text='.$crunchifyTitle; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&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 $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');
How can we have this show this on blog posts only and not pages?
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
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
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
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?
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;
Hi, is there a way to have it as a shortcode instead of automatically adding before and after content? Thanks
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?
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!
Thanks! Is there a C#/MVC/javascript -friendly version of this?
Hi Alius Umbra – There is no Java script here. If you are looking at more options then kindly take a look at Crunchy Sharing Plugin.
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?
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.
Hi AppShah
Is it thrue that the code only works on mobil ?
Thanks for your answer
Thomas
Hi Thomas – code works on Desktop, Mobile, Tablet everywhere.
Are you facing any issue?
The CSS classes for the whatsapp button seem to be missing?
Otherwise this content was amazing, thank you
Hi Shaun Barlow – when you get a chance, please upgrade to version 3.4 and all the issues should be resolved by now.
https://crunchify.com/crunchy-sharing/ https://uploads.disquscdn.com/images/ce070cef500b5414fd477f7febaf0573871a3a345191920416fca9fed5efc87b.png
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.
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.
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
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.
the whatsapp button does not work, could you check it?? Thanks for sharing
Thank you so much Mayabi for feedback. We have fixed Whatsapp share link.
Yes, WhatsApp link is not working. Please update the code. Also, WhatsApp sharing link is not working in your floating and after content. Thanks
Thanks for your feedback. Really appreciate it. We have fixed Whatsapp share link in floating and after content.
Great
Thank you for quick reply and update!
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?
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 😀
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.
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?
Sure you could. Try adding filter is_archive() in above code.
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.
Hi Debadatta pati – thanks for your query.
On Crunchify, we are using Crunchy Sharing plugin. You can give it a try free for 14 days.
why you not use esc_url() ?
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.
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.
Hi Daniele – absolutely yes. You could. Try adding if block with
is_front_page()
andis_home()
condition.Details: https://codex.wordpress.org/Function_Reference/is_front_page
hi can i have code to do this remove from home page and where does it go im not a code expert.
Sure. Can you email me via contact us page? And i’ll try to give you complete code.
Hi Daniele,
Did you solve your issue about excluding some pages?
Hi Carlo – I’ve just updated Daniele too. It would be a custom solution.
Hi Daniele – thanks for your detailed requirement. Your request is very valid. My previous update was mainly about WordPress’s standard filters is_home(), is_front_page() and so on.
If you want to disable sharing on specific page then it needs custom coding and code snippet shouldn’t be generic as post_id and other stuff are related to your blog.
Try emailing me via Contact Us page and i’ll try to give you complete code snippet. Between have you tried our plugin Crunchy Sharing?
Hope this helps.
You didn’t share how to add these buttons with font awesome icons.
I’ll add those steps soon Diljit.
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
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.
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
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.Can you display the buttons via a shortcode rather than putting them in a fixed position?
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.
why for me it show only the text? not show the tag html, like this: “SHARE ON: TwitterFacebookWhatsAppGoogle+BufferLinkedInPin It”
whithout tag or show only text.
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.
A very interesting and helpfull post, but: I folow all 2 basilar step and the icons appear very small, with name of social over the icons; probable why I’m noob of programming and now I code my personal theme from scratch; any suggestion for solve this problem?
My skill in code is like my english… https://uploads.disquscdn.com/images/86242be95b60d6068d3834952a0687928c2630b5d14622ca20e4cf9eeff42183.png
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
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.
You get this error if u try it via localhost. I had same problem but it works perfect when the site is online
Thanks Costas for details. That’s right. Link doesn’t work with localhost development site 🙂
As Costas mentioned below, are you running code locally? You won’t see this issue on live site.
Hope this helps.
the whatsapp button does not work, could you check it?
Thanks for sharing
Hi Gaston. What do you mean it doesn’t work? What error are you seeing?
Note: it works only on Mobile/Cellphone. It wont work on Desktop site.
Hi Gaston – are you still facing this issue. Kindly upgrade to Crunchy Sharing plugin version 3.4.
https://crunchify.com/crunchy-sharing/
https://uploads.disquscdn.com/images/ce070cef500b5414fd477f7febaf0573871a3a345191920416fca9fed5efc87b.png
Can Facebook ‘Like’ but implement in a similar manner?
I believe no. Popup needs javascript loading.
Hi, I was wondering how to get this to show on my Posts page? It shows on my Posts and Pages perfectly, but it is missing from this one 🙂
Hi Janine – what do you mean by Posts page? You mean home page?
Hi, awesome code snippet 😀
Is there anyway to get the Pinterest Pin option to show all the images from the page and not just the featured image?
Hi Janine – nope. Pinterest takes default featured image from post.
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:
And this to the functions .php
Any idea what I have missed?
Hi Janine. This is just a function. Could you send me complete code? Seems CSS variables are missing in above code.
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.
Hello!
I have a question… It’s possible to open the link in a popup windows? Thanks so much 🙂
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.
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.
Sure. It’s your preference how you want to configure buttons 🙂
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.
Hi Abhijeet – can you please share your requirement in details? I’ll be able to give you condition for your code including CPT.
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.
Thanks for sharing tips. I’ll give it a try in few days and will update post with your suggestion if no issue.
Hi there – I’ve just tried and above title fix is working perfectly fine. I’ve just updated above tutorial with the same.
wow.. I’m so glad it can be useful 🙂
thanks!
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.
Please help me,I’m stuck in the middle of the project
Hi Anindya – above method works all the time as far as you have Featured Image setup for each and every blog post 🙂
Top work, thank you for sharing this.
You are welcome Alex.
Hi.
I would like to add Instagram button but I don’t know how.
Can you give little help, please?
Thank you.
Rui
… 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
Ofcourse yeah – you could. Tell me how you would like to put Instagram button and i’ll help you on that.
I would like that too to have Instagram sharing button, can you add that in the tutorial please?
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.
Hi pls reply to my comment. Thank you
Just replied below.
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
Hi Kiran – you absolutely don’t need to do echo on theme template for CPT (custom post type).
is_singular() filter works with all CPT templates. Please check out official doc: https://developer.wordpress.org/reference/functions/is_singular/
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?
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?
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 😉
Thanks for details Peter. I’m glad all is fine at your end now 🙂
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!
You are welcome Barry.
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.
Hi Mauro – try adding some wrapper around class crunchify-social, something like below
CSS file:
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.
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.
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.
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?
I’m wondering the same, Have you resolve this item?
Yeah Charla. Just use
is_singular()
tois_single()
and you will have social sharing buttons only on posts.If you change the if statement from
to
Change singular to single.
Optimized. Big help! Thanks a lot, App Shah!
Just wondering how to apply this on a lightbox…? Colorbox perhaps?
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.
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
Thank you Dorelys.
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..!
Hi Tony – sure. I’ll update you with code. I need to do some research.
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
You are welcome Adam.
hELLO, IS THERE ANY WHY I CAN USE THIS ON BLOGGER
Hi Goody – this should work as it is on Blogger too. Only think you need to know is how to integrate it at top or bottom of the post.
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
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
Hi Alveena – we have this plugin list upto date except couple of more we have added recently: https://crunchify.com/must-have-top-10-plugins-for-your-wordpress-blog/
I’ll update the same post today.
How could I add these buttons somewhere other then the bottom of my post? like say a drop down menu.
Hi Mike – tutorial also shows steps on how to add Social Sharing button at the top of the post. Our Premium plugin option supports shortcode and floating social bar without adding any Javascript. It’s super fast.
How can I add my own icons? How to add a floating share option too?
Hi Hardhik – floating option is available as part of our premium plugin.
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.
You are welcome. I’m glad it wroked for your business.
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.
Hi.
I just noticed that the following error messages are displayed when I turn on “WP_DEBUG”:
I think the affected line will be the following one (Line 142):
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.
Thanks for details.
I believe, you could ignore this as if you don”t have featured image then it will just throw a warning without any issue.
This is just perfect! I have my blog modified but don’t know why Chrome shows differently from IE.
Hi there – what diff are you seeing? Can you share screenshot if possible?
I don’t know why but it works perfectly now. Thank you very much.
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?
Hi Mustafa. Seems CSS code is not loading on your site. Try cleaning browser cache and blog cache list WP Super Cache plugin cache.
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.
I think I figured it out.
I replaced the above suggested sharing code for Facebook:
with this:
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:
I’m still not sure why the code Facebook recommends using doesn’t work for me, so any suggestions will be appreciated. 🙂
Yup. that’s right 🙂
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?
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
Hi there – could you please share site URL and screenshot if you could?
Between – there is no need for shortURL in above code samples.
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!
Hi Matt. Yeah. It’s possible. You just need to tweak this condition:
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!
Hi Doug – I’ll take a look and update.
Great post!
How to add total share counter like mashable[dot]com ?
Hmm. I’ll take a look and update soon. But I’ll most probably pass on it if it needs additional JavaScript.
Thanks to You.
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).
Hi Julian – just replied to your other comment.
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.
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.
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!
Hi Andre – thanks for posting query. Did you get a chance to look at this tutorial: https://crunchify.com/how-to-add-fontawesome-io-fonts-to-wordpress-without-any-plugin/
You just need to replace text with fontawesome tags. Let me know if you face any issue. Also, make sure to include fontawesome css to your site.
How to add icons instead of text ? Like icons displayed in your Post 🙂
Thank You in Advance.
– With Text Social Icons
– Without Text Social Icons
I also want to know how to add bigger icons instead of smaller text. Thanks!
I think he’ll post the tutorial regarding this issue 🙂 Hoping for some +ve Response
Hi Suraj – I’ve just updated Andre in other thread. Let me know if you face any issue.
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.
Hi Andy – as per comment in other thread, please stay tuned 🙂
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.
Hi Warith – that might be because, new CSS wasn’t loading. I see buttons are working perfectly now. Happy blogging.
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.
Hello,
thanks for the useful article.
How to remove the buttons on post “AMP version”?
I mean with this plug-in installed:: https ://it. wordpress. org/plugins/amp/
Hi Andrea – Got your query. I’m working on a plugin with this changes now. Please stay tuned. Might be ready within few days.
This is really amazing mate thanks a ton u saved me few http calls. But I’ve a little issue which needed to be fixed. When I’m analyzing my site urls with google page speed checker getting following message in the mobile tab user experience section.
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.
Hi.
Few words.
One word.
Great.
Very useful tutorial !!!
To make lighter website.
Thanks for share.
You are welcome Felice. Appreciate your comment. Happy blogging.
Hi, does this solution for social sharing use cookies?
Thank you a lot.
(sorry for the previous comment into the wrong discussion)
Hi Chiara. Nope. It doesn’t.
This was very helpful, thank you!
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!
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.
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?
Hi Jayanta – try changing if condition in above code to
This condition works for any post type, except attachments and pages.
Ok, thank you very much.
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
🙂
Hi there.. try changing if condition in above code to
plz how to make the button with popup ? thank you!
Sorry, unfortunately this tutorial is not for you if you want popup 🙁
Speed optimization is a goal for tutorial.
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.
Sure. I’ll provide details soon. It’s not part of above code yet.
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.
I believe – Pinterest grabs all images from that post and you will have option to choose which one to pin. That’s what I see at my end all the time.
Unfortunately when using the crunchify buttons it grabs featured image by default and not the one that is designated for social networks.
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 🙂Great article, but is there a way to remove it from certain pages??
Dont worry i changed – is_singular() || is_home() – too – is_single.
🙂
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?
Hi Steve – if(is_singular() || is_home()) condition applies to Home page, Index page, All Posts and All Pages.
thanks..i get it, but what i want is a condition where this applies only to posts, not pages.How do i go about it pls?
sure. try just is_single() filter, which applies to only post 🙂
excellent article , can you check the code of the button Pinterest? I have non sharing. Thx. Andy
Hi Andy. Didn’t get your questions on non-sharing. Could you share a site link on which you have an issue?
Hi,
This is what I get. If I remove $sharingTitle = str_replace ( ‘ ‘, ‘%20’, get_the_title() ); it works but then I loose the title.
Hi there – seems like an issue with your code. This probably happens, because instead of HTML you are echoing the text. Might be simple glitch the location you have placed code.
Let me know your blog and i’ll help you fix this.
Is there a way to send private messages as I don’t want the url to be public.
Sure. Please use https://crunchify.com/contact/ form.
Ah… the solution to display it as a text widget in the sidebar was so simple… LOL.
Just change:
to:
Great. Kudos for your attempt. I’ll update tutorial tomorrow so it will be helpful to other readers too.
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?
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?
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 🙂
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 ?
Ok.. I’ve created a shortcode right after the add_filter code in the functions.php file (add_shortcode(‘socialSharing’, ‘crunchify_social_sharing_buttons’);) and insert () in my single.php file.
It works like a charm. Thanks to me ^^
Awesome. Kudos to Loki 🙂
Hi Loki – it’s possible. I’m working on plugin which will have shortcode for it. Please stay tuned.
Thank you so much! Replaced the text with font awesome icons and added tumblr, pocket and e-mail. Anyway, they work great! 🙂
Hey there – great. It looks awesome. I’ll enhance plugin and will those option. Thanks for sharing tips. Happy blogging 🙂
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?
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.
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!
Hi Amrit – i’m glad it working and live on your site. Thanks for stopping by and happy blogging.
Hi, how to auto thumbnail syncron and publish on twiiter, facebook, and linkedin?
Hi Prambudi – could you explain your requirement in details?
Hi, thanks for your respon. For now, i’m using your script, especially twitter, facebook, anda Linkdin only. And, when the visitor share my page, the link display my page thumbnail.
I mean, every link share always display thumbnail and link destination. Not only link.
Ack Prambudi. I’ll take a look at your scenario soon.
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
Hi Alan – there are multiple ways to put same button at different location but it depends on your theme setting and hooks.
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
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.Hover links pick the default color theme which is red. How can I change it?
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.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.”
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 😉
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.
Good point. I’ve just updated above tutorial and added
global $post;
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
Hi there – of course. Try this condition.
This is what I’m using on Crunchify 🙂
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.
Thanks for tip. I’ll take a look at this soon.
I used the URL in the default permalink format (such as …/?p=123) ONLY for Twitter.
Got it. I’ve just updated above tutorial and added urlencode for permalink 🙂
Hi,
Do you have a solution for phpBB 3.1?
Hi Tristan – sorry. I don’t.
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;
You could show except but i’m not sure about custom description for each individual post.
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!
Hi Orlando – i’ll take a look and update. Please stay tuned.
Thanks!
How can I change the positions of the share buttons?
If you look at this source code: http://prntscr.com/bk4nsc
Currently the share buttons under
I want to put it under share buttons here
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.
How can you include the share count with these?
Hi Ibadullah – i would suggest not to compromise site speed just to show total number of share count.
There is a way we could get count by making an extra API call for each Social Sharing button but that violates our main purpose of having button without any Java script call 🙂
And what else if we can just show the total shares instead of each share?
It would be the same query mechanism 🙂
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.”
Hi Shoaib. Are you getting this error on localhost? Can you share your blog URL?
Everytime I share my post in facebook, I want to use different image for the post. What code should I add ?
Please see my reply below.
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 🙂
If I share my post on facebook, how do I use different images for my share post on facebook?
Hi Sisi – I wouldn’t suggest that. Above tip will get the featured image from your blog post and post it on Facebook.
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.
Thank you for the simple and quick solution. Worked like a charm!
Is there anything like this for Blogger (Blogspot)?
Not that i’m aware of it.
I need to add LinkedIn, how to I can do it?
Try this:
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!
Is it possible to count shares on facebook / Google + without using javascript ?
I’ll take a look and update. Thanks for suggestion.
Hello, the buttons are also present on the home page, how to disable that ? https://lut.im/FWoRh4rppW/OyKQiyJazgQtQfmt.png
Just remove is_home() condition from below line
Thanks !
Hey there. Thanks for a great post. I can’t seem to get rid of the buttons on my homepage. I removed the is_home() part, but it doesn’t work. Any suggestions?
Try if(is_singular( ‘post’ )) – this is working for me 🙂
Thanks for quick help Lukante 🙂
How can I add the buttons in Woocommerce product pages, right below the “Reference, category and tags” ?
Hi There – i’ll check this out and will update you. I need to first play with woo commerce though 🙂
Great post! I’ve been using your social buttons and they looks swell.
Tiny adjustment I’ve made to the css:
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.
Thanks Kevin for suggestion. I’ve just updated your above tutorial and updated crunchify-link CSS property. Happy blogging and keep coming 🙂
Nice!
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.
Hi there – good point. I’ll try to add that option may be in couple of days.
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..!
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.
How to add this buttons to a custom template page? is_singular() || is_page(mycustomtemplatepage) doesn’t work. Thanks in advance!
Hi there –
You could try this code as sample:
Hi, how can i put le button at the top AND the bottom of all the posts (also custom_post_types) please ?
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.
Thanks for sharing this. It works great on my blog.
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!
Hi George – i never heard of this issue. Can you share your blog URL on which you have enabled it? I would like to debug.
Hello!! Thank you for the reply!
The links are in my original comment, but here is the main site: http :// www. mashbillwhiskey. com
Hi George – Thanks for sharing blog link. I just checked and all links are working correctly. Tried on http:// mashbillwhiskey. com/tag-test/
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?
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.
is there a way to make them appear on the sidebar??
Hi Bimmer – currently there is no such option.
How can I call this Social Sharing in a specific place..? Assume after a or before like. Can I do so..?
Hi Ish. In order to achieve that you may need to play with WordPress and/theme’s hooks/filters.
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).
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.
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.
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
Thanks Hugodebe for nice words. I didn’t get your query clearly. Could you please share screenshot? Will help me provide you better answer.
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 ?
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 🙂
Hey thanks for the info 😉 will avoid it for the moment.
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
Hi Paul – you could create custom function something like this:
More info: https://crunchify.com/wordpress-how-to-force-specific-pages-to-be-secure-ssl-https/
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.
Hi Paul – that was just a sample on how to put list of post IDs in array. You don’t need anything related to ssl 🙂 Sorry for confusion.
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.
Hello,
Is it possible to add a specific featured image when you share a page or post?
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.
thanks al ot for this awesome tut
How do you get this to display only on blog posts?
Hi Nicholas – you could change if condition from
if(is_singular() || is_home())
toif (is_single())
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?
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.
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.
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.
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.
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?
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;
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.
Hi there – just replace if(is_singular() || is_home()) with if(is_single()) in above tutorial.
looking for a way to change this into a vertical fixed bar with social buttons… anyone can help?
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!
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.
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! 🙂
Great. Thanks for an update. What was an issue?
I still develop at the site and the “issue” was the .htpasswd… too stupid 😉
I see. Thanks for an update Nathan.
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?
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?
That’s right Sisi.. On live site you wont have any issue.
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?
yes.
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.
Hi Jared – above script gets featured image from the post. Let’s make sure you have setup featured image correctly for each post.
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.
Thanks for the code. How do I display them in woocommerce product page and my custom post type “journal” post page?
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):
It did not work. Any idea?
What about the counters?
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.
No worries. You could achieve that by putting your custom CSS inside your theme’s @media CSS query like mentioned here…
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
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.
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!
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.
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.
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!!
I found your social sharing list of URLs. Very helpful, thank you!
It doesn’t like this, though. I get an error message.
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.
Hi Carla – let me take a look at this now. Will update you.
Hi Carla – as mentioned above – Pinterest sharing added now. Enjoy and Happy Blogging.
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:
Thank you Carla.
I edited my comment above.
Hi Carla – I’ve just updated above tutorial with Pinterest Sharing code too. Take a look and let me know how it looks on your site 🙂
so very useful topic for every blog holder.
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
Great point les. I’ll update tutorial in weekend with this changes.
I’m not sure I fully understand what this does, but I added this to my code and it works just fine.
Hi Les – just updated above tutorial with your changes. Just realize after Carla’s comment 🙂
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 ..
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.
Awsome Share Thanks . works perfectly on my blog.
What if I don’t want the icons to show on pages? What do I need to do?
Hi Olajide – replace
is_singular
withis_single
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?
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.
Hello
thanks for the tutorial, social icons work great on my blog posts and pages.
Hi! can you please help me with responsive css code of those buttons?
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?
Hi Gre. Great point. I’ll update above tutorial on how to modify CSS for mobile device to make it responsive.
That’s sounds great! I will look forward for this!
You forgot to update the tutorial for make the buttons responsive 🙁
Hi there – sorry for delay. Can you share you site URL? I would like to look at width option for social media buttons.
My Solution, if(is_single() only for Posts not Pages
Hi Su – that’s right. You need is_single() if you want above icons on only posts. Thanks for stopping by.
Hi
I use this code on my Blog: psychomuell, I want the buttons only on Posts, not on Pages,
what I need to change?
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!
Great point Anna. Let me take a look and will update your once i’ll find solution.
Hi Anna – i’ve just updated tutorial with Pinterest sharing code. Kindly update your code and let me know how it looks on your site.
Hi Robert – I’ve just checked but I don’t see CSS classes loaded on your page. Could you please make sure you add CSS to your index.css file?
Brilliant post. Just what I was looking for. Many thanks for taking the time to put this together. Great stuff 🙂
Hi Tui – it would be custom query. Try to get your page ID and exclude it into using if condition.
this does not work for me.
Hi Nicholas – what behavior are you getting? Could you share your requirement?
If I do not want it to be in Pages (Author, About, etc), what should do?
Hi Lim – it would be custom query. Try to get your page ID and exclude it into using if condition.
Nice tutorial, thanks a lot!
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 !
Hi meij57 –
You could replace
is_singular()
with something like thisif ( is_singular('deals')) { // Here "deals" is a slug name for my CPT
.If you want more information then please visit: https://crunchify.com/how-to-add-custom-sidebar-for-custom-post-type-cpt-in-wordpress/
Thanks for your answer ! I change ‘deals’ with the name of the CPT but it still not work. I didn’t make a sidebar as in the link you show, cause I don’t really need it. Do you think this is because of this ? I just wanted share buttons at the end of my CPT. Thanks a lot
Hi meij57 – with very little information and without looking at codebase it may not be possible to suggest any further changes. We do offer paid profession service if you would like to consider.
How do I have it on my homepage and pages?
Hi Tui – as far as your theme displays full post on home/index page your all good. Also is_singular() covers both Posts and Pages.
Is it responsive?
Would it be possible instead of having the buttons at the bottom to place them at the top of the post? thanks
Hi there – Yeah. In this tutorial we are appending everything to
$content
. Rather appending you could create a variable with all social content and then append $content to it.Here is a snippet:
I don’t know if this is what I have to do but on the original script I changed $content to $variable on every line and it didn’t work
Can you please shoot me an email and will send you code snippet. Use contact form.
Hi, i’d like to put at top and also above…what i’ve to do?
thank!
Hi giovannifracasso and disqus_breathlessmahoney – I’ll update this post with your request within couple of days.
Hi there – can you try now? I’ve updated above tutorial with a code which adds sharing buttons at the top of the post.
Hi There – can you try now? I’ve updated above tutorial with a code which adds sharing buttons at the top of the post.
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.
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?
Hi Trang – Please use below for Pinterest and Linkedin.
i’ll create new post which shows list of all Social Sharing URLs and will update.
Hi Trang – find here complete tutorial on list of all social sharing links: https://crunchify.com/list-of-all-social-sharing-urls-for-handy-reference-social-media-sharing-buttons-without-javascript/