Removing JetPack for WordPress’s Sharing Icons From Various Plugins

I like some of the stuff that they’ve done with Jetpack plugin for WordPress – it’s definitely one of those “get a lot done, quickly” plugins that throws in quite a few of the pieces of functionality you need for a solid WordPress site.

One of those handy pieces is Sharedaddy. That’s the bit that allows you to add Twitter, Facebook, Pinterest, Google+, and a ton of other social sharing / bookmarking items to every post.

Now comes the problem: sharedaddy likes to be way too good at what it does. I don’t need it to show all the sharing links in, say, a list of all the posts in a category, or when using the MF-Timeline plugin. Unfortunately, Sharedaddy doesn’t have a way of turning it off.

Fortunately, Jetpack does have a something we can use to help fix that. Under Appearance -> Edit CSS it’s got a handy little CSS editor that lets us turn off that extra mess.  But… we’ll need to do a little bit of work to know where we need to turn it off at.

If you’re not familiar with CSS, it’s a quick way of setting a piece of code that determines behavior and characteristics for a specific HTML item, or items (or, even a class of items.)  I’m not going to give ya’ a whole CSS tutorial here – there’s better places for that, and it would take too long.  But it boils down to this:  we need to know what the name is of the area holding the post information that we want to remove the sharedaddy links from.  Um… that wasn’t confusing at all, right?

If you’re using Chrome or Safari, look up how to enable the Developer menus, and how to examine specific on-screen element (in Safari, once the developer menu is turned on, you can right-click on anything on the website and select “Inspect Element” to see all sorts of neat stuff about what’s going on behind the scenes.)

Now, once you’ve got that, here’s the quick way to make the sharedaddy stuff go away.  For instance, if you’re using the MF-Timeline plugin, you can put the following in the Edit CSS section, and it goes away:

.timeline .sharedaddy {

display: none;

}

For those who know CSS… well, you probably already got how to pull this off, and what the above statement means.  For those who don’t:  .timeline is the name of the CSS class that MF-Timeline uses to build up it’s Facebook-style display.  If we had just put .timeline and no the .sharedaddy part, it would make everything about the timeline go away (display: none; is what does that part.  It’s literally saying don’t display this information.)  Using .timeline, then .sharedaddy means anytime you encounter .sharedaddy inside of .timeline’s display, .sharedaddy shouldn’t display.

Pretty simple, once you get the hang of it.  CSS is fun stuff that can make your site look wonderful, and make you pull out your hair at the same time.

To see it in action, here’s the Timeline display on my blog site (note:  it’s slow – it’s pulling in half a million words worth of posts all the way back to 2000.  I need to write some caching into MF-Timeline someday.)

Another quick example is using one of the Category Posts plugins in a widget area.  In this case, it’s setting inside of a UberMenu 2.2 menu item.  To shut up sharedaddy on that area, it took the following:

.cat-post-item .sharedaddy {
display: none;
}

.cat-post-item was the Category Post widget’s CSS class used to display posts inside of a widget area.  You can see it in action at Bluebird Arthouse’s site by mousing over (or touching, if you’re on an iPhone or Android phone) Blogs & Links – the blog area loads in the menu.

See, piece of cake! 🙂