Join my tribe!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions

Comments

  1. Love it! Thanks for the help today. The tut worked like a charm but I wonder if this method is slowing down my page loads? I get something pixel.quantcast.com which seems to take forever to load or its my service provider which is normally the case.

    • Try this for checking site speed: http://tools.pingdom.com/fpt/. Might check it and then check again removing the call to that social.php file. Not sure about the pixel.quantcast.com thing. My guess is it’s being called in via javascript somewhere, but not sure if that’s related to the social icons.

  2. Hi Carrie,

    Great tutorial. I’m linking to this in my talk tonight at the Austin WordPress Meetup. You’re doing what I like to do for clients – just use the simple code from the social media platforms. It just works.

    Bobby, this can potentially slow down the page load as each button is making a call to an outside host. So there’s your page loading waiting on Google, Facebook, LinkedIn, etc. to load the buttons and code from their servers. That’s why I stongly advise people to only place these on single Posts, not their blog index or archive pages.

    Cheers!

    Pat

    • Hey Pat,
      Great point about the individual server calls – is there anything you would recommend doing differently? I guess the Facebook script that’s dropped in the header could be conditionally called in on posts to save that script from executing on all pages…

      Appreciate the mention. Enjoy the meetup!
      Carrie

  3. Hi Carrie,
    Thanks for your ideas, but I don’t see the tutorial. Also, I really like your share link with the rollover choices. What do you use?
    David

  4. Carrie, thank you. I so wish I had found this a month ago. I’m a graphic designer and total WP CSS hack, and I’ve tried so many ugly plugins. It’s a deadly combo, because the answer to ‘How many designers does it take to screw in a lightbulb?’ always seems to be, ‘Does it have to be a lightbulb?

  5. If you want to make your social buttons look a bit different you can use the javascript plugin called Sharrre to create your own social buttons.

    • Hey Paul,
      I haven’t but the “Pin It Buttons for Websites” on this page will generate the code you need. You could just sub in a custom image if you wanted. Not sure I’ve got things worth pinning around here. πŸ™‚

      Carrie

  6. Hi Carrie,

    I’ve been enjoying your blog. I’m having a heck of a time finding the code I need to make simple share icons. I have my own images and don’t want to track how many times someone tweets or likes one of my posts, so I don’t want any numbers displayed.

    I’m using Genesis and can easily insert the code via hooks, but I can’t figure out how to do this. Do you have any suggestions? Sometimes people don’t need to fancy stuff and just want streamlined and simple.

    Thank you!!

    • Hi Carla,
      Thanks for stopping by. This tutorial is using code snippets (and therefore images) provided directly from the social media platforms. I’m sure there are ways to do it using your own images, but I haven’t tried it. The same concept will apply for where you’re hooking into your theme, but the javascript connecting to the social media service will probably change a little.

      I’ve seen some social share plugins that let you upload your own custom images – that might be a simpler route to go!

      Carrie

  7. Hi Carrie ! Thanks for the tutorial but I haven’t understand what I have to change on first line for a different theme.

  8. How to call Social.php in Bloggie theme? or atleast tell me how about tewnty twelve themes? I am stuck at this very last thing.

  9. I’ve created my own Social Share Plugin, using only Javascript, so it doesnt need JQuery or any other framework,
    If you want to take a look, go to http://wp.me/p2uUrZ-4U and leave your reply.
    This way you can have full control over style and positioning, without having to add any back code :).
    Hope you like it.

  10. Hey, Can you help me how to get HTML Share Buttons from this site www(dot)simplesharebuttons(dot)com/html-share-buttons/. I am not able to understand the procedure to do this. Please Reply ASAP.

  11. Do you know how I can get these custom social icons to appear in a widget? Even if it’s a text widget and we copy and paste some share links and are able to style the link classes, that would help a lot. I have not found a way to do this in WordPress yet – to be able to add customized social sharing icons that would go in a widget area, like the sidebar. But the hunt continues… Thanks!

    • Hi Joyce,
      It’s possible to do that, but not quite as simply. When you show the social share icons within the post, you’re in the WordPress loop. If you wanted to show them in the sidebar, you’d have to write an additional query since you’re outside the loop. There may be plugins that do that… not sure.

      Cheers,
      Carrie

    • Hi Joyce,
      Have you tried posting in the WordPress support forum(http://wordpress.org/support/)? I’d be happy to help after you share a few more details (like why a widget? What theme are you currently using?)
      Carrie points out, rightly so, that you’d need to write an additional query to get the permalink to the currently displayed post

      • Hi Kakoma! This is so nice of you to offer to help! Sorry I took a while to respond. We needed it to be in the widget because it was the best way to match the design of the site while also making it easy for the client to update later. It turned out the Simple Share Buttons plugin did the job perfectly. Here is the design so you can see why: http://paonecreative.com/wordpress-website-design/ The only thing I wish is that the plugin could use icon fonts more easily, but we’ve settled for custom images for now πŸ™‚

        I think if this need comes up again for a new design I will be in touch, thank you for your kindness!!! The WordPress community is so awesome that way. I’m always warmed when people like you and Carrie are just willing to be helpful nice people!

  12. Thanks for the tutorial.
    What do you need to change to implement this on a website (not wordpress).
    I’m getting fatal error on line 21; which is <div class="fb-like" data-href="” data-send=”false” data-width=”150″ layout=”button_count” data-show-faces=”false”>.
    Page live at htttp://preciseformwork.co.uk/buttons-2.php

  13. Thanks Carrie!
    I wanted to ask you, if you are using sharedaddy plugin, how do you make it to look like yours
    When i activate it, i just see a box with a cross (+) icon if clicked it will display the sharing buttons, but they do not display as yours. How can i make them look like yours, and also have the text on the left: Like this? Share it!

    Thanks

    • I’m using Jetpack sharing, which is essentially Sharedaddy. Basically just targeted the share elements via CSS and styled them. Feel free to view my stylesheet and borrow. πŸ™‚

  14. Carrie, Love this tutorial and I am currently using it. However, I just found a problem and I don’t know if it’s something within other coding on my site or not. Everything works great for my posts, single posts, however the I cannot get the social media stuff to show on my pages. Is this how the code is meant to work; just on actual posts?

    Thanks!

    • Thanks!

      Yep, the conditional bringing in the social code is_single only triggers on single posts. Change it to is_singular() and that should fix it for you.

      If you’re new to WordPress conditional statements, you may want to check out this post. πŸ™‚

      Cheers,
      Carrie

      • You are amazing! Thank you so much! You have no idea how many blogs I visited to do manually add social media to my posts and them either not work properly or not show up in the correct place until I found this post.

        Thanks again!

  15. This is awesome.

    I am a little new to Genesis & finding out that ShareThis puts links in odd spots both on main and the individual entry.

    I also noticed that Genesis Simple Share puts Zeroes if your page doesn’t have a share, which doesn’t always look great.

    Really nice breakdown, and I never knew how to do an “include” in Genesis until I just read it here.

    It’s a little bit nicer when you can just pull an external file instead of having big blocks sitting there in your functions.php. I think I may follow your lead & externalize what I do have ala your Action hook eventually.

    You’re great. Keep on rockin’ + Thanks!

    -W