Customizing Trackable Social Share Icons

Filed under: Blogging,Social Media — Brian

Please note: Support for this plugin is no longer available.

The social media share plugin we developed, Trackable Social Share Icons, is growing increasingly popular, and we are receiving more and more questions about how to customize it. The placement and appearance of the social media icons is highly customizable — you can even use your own custom icons if you want. But the majority of the customization of the placement of the icons is done through the CSS block that you can edit in the Trackable Share admin area.

Today I though it’d be nice to give a couple of examples of how to modify this CSS block to give different positioning and appearance aspects to the icons.

But first, to edit these you’ll need to go to your WordPress admin, and in the left navigation menu under “Plugins” will be “Trackable Share.” Click on that to get to the Trackable Social Share Icons admin page. Toward the bottom is an “Advanced Show/Hide” section. If you click on that you’ll see the CSS block where you can customize the icon style sheet. Note that you can click on the lower right corner of the block to expand the working area.

Here’s what this section of the admin looks like:

We’ll be tweaking the top “Button CSS:” section to change the appearance of the Trackable Social Share Icons.

Right-Aligning the Social Media Icons

By default the social media icons appear left-aligned either at the top, or bottom, or both top and bottom of your posts, depending on what you have selected. However, with the CSS block we can change that positioning and even toss a nice little top border in. Here’s the code:

.trackable_sharing {

border-top: 1px solid #EEEEFF;

padding-top: 1em;

text-align: right;

}

With this CSS our icons will now look like this (with bottom position selected):

Enclosing the Icons in a Box

Here’s another customization option that puts a box around the icons, and makes the icons center aligned. Here we’re specifically putting the custom text outside of the box:

.trackable_sharing {

background: gray;

border: 1px solid #CCCCFF;

border-radius: 4px 4px 4px 4px;

margin-top: 2em;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-o-border-radius: 4px;

padding: 3px;

text-align: center;

}

.trackable_sharing_text {

position: absolute;

margin-top: -2em;

font-style: italic;

color: #17345C;

}

.trackable_sharing > div {

float: left;

}

With this code, your social media icons will look like this:

Making the Icons Appear Vertically on the Left Side of Posts

We can even change the icons from appearing horizontally to appearing vertically and stacking them on the left side of the top of the post. For this we’ll need to set our icons to appear on the top of posts (rather than bottom) then add this text to the CSS block:

.trackable_sharing_text {

display: none;

}

.trackable_sharing {

border: 1px solid #CCCCFF;

border-radius: 3px 3px 3px 3px;

float: left;

padding: 3px;

margin:1.3em 1em 1em 0px;

}

.trackable_sharing a {

display: block;

}

.trackable_sharing > div, .trackable_sharing > br {

display: none;

}

We also put a border around the icons, and now we have our icons appearing like this:

With the editable CSS block at our disposal, the customization options for the icons is almost unlimited. And if you want them to appear somewhere entirely difference, you can always place them exactly where you want in your template using the _trackableshare_embed() function.

Share this post:
Facebook Twitter Pinterest Snailmail Linkedin

19 Comments | Leave a comment

  • Hey..great work.really like the flexibility available with the share buttons.
    Is there any way I can change the Twitter share to show “Via @I_Ghosh” instead of just showing the post title and link?

    Comment by Indrashish Ghosh

  • Unfortunately no, it will automatically show the title and a shortened link, and we don’t currently have any way to customize that (and we’re a little reluctant to offer too much ability to change that, because then it could be abused).

    Comment by Brian

  • There is however a work-around. If you edit the plugin using the built in plugin editor just change the Twitter URL Code to the following:

    ‘twitter.png’ => array(‘url’=>’http://twitter.com/share?url=%url%&text=%title%&via=YOURID’, ‘popup’=>’500×350′)

    It’s just like creating your own Tweet Button. Here’s a link to the related Twitter Dev post. http://dev.twitter.com/pages/tweet_button.

    It would also be rather easy to edit the advanced options to add a Username input and add it to the link.

    Comment by Greg McMullen

  • Hi,
    I’m using your social system, which i like alot, as is very simple and fits perfectly to my site, but im missing one integration icon for: google+
    Do you considering to update your plugin or we will need to use some alternative plugins for it?

    Thank you for your time!

    Comment by Leodor

  • We are in the process of adding the Google+ button right now — we hope to have a new version with Google+ implementation next week. So keep an eye on your plugin page for the update!

    Comment by Brian

  • Hi!
    Nice plugin, is there anyway to get it working for custom posts? I’m using the Portfolio Press theme.

    Thanks!

    Comment by Rickard

  • The icons appear stacked vertically in my posts! No matter which options I choose they always appear this way. Any way to get them to line up horizontally? Thanks!

    Comment by Todd

  • Interesting! Can you give me a link to where this is happening?

    The first thing you want to do is check that button css section that we talk about in this article and make sure it’s entirely blank — code in there should be the only way to force the plugin to display vertically.

    Comment by Brian

  • I like the addition of the Google+ button. Can you tell me how to make it appear to the left of the Facebook “like” button? This is how it appears now:

    http://awesomescreenshot.com/0eejvw873

    Comment by Sophia

  • Love this! Quick question, will Google+ buttons be part of the options in any release to appear in the same style as the other buttons, rather than as a separate option? Or will we need to continue to add it as a custom button if we want it?

    Comment by Ben

  • We’re working on it. Unfortunately the way the Google API works is making it difficult for us to place them in-line with the other buttons in a way that will work with whatever options people choose.

    Hopefully we’ll have a solution for the next release.

    Comment by Brian

  • I would like to get our RSS icon to display next to the 3 icons for Facebook, twitter and Linked In. Can I add this so that all my icons align and one doesn’t look seperate from the rest and if so how do I do it?

    Thanks

    Comment by Lisa

  • Yes, you could set up your RSS as a custom button in the advanced section, if you’re comfortable with handling the code yourself.

    Comment by Brian

  • I was wondering how to add a custom button for Pinterest to this? Would I used the advanced/Additional Buttons section & what code would I put? Thanks!

    Comment by Mary

  • You would have to use the advanced section, but you’d also have to be familiar with coding in WordPress — the code that Pinterest provides for the button hardcodes the URL, so you will ahve to turn that into a dynamic call.

    We are at work on adding the Pinterest button to the plugin and should have it out in the next version.

    Comment by Brian

  • Hello,
    ist there a line of code that I could use to make the buttons appear instead of using the PI settings?

    I would like to put the buttons in my byline by using code. Thank you

    Comment by Hody

  • Yes, you can use shortcode: just insert [trackable_share] anywhere in your post that you want the icons to appear.

    Alternatively you can also build them into the code of your template using the code found under the Advanced section in the admin.

    Comment by Brian

  • Is there an easy way to get the text before the icons (Share this: for example) to appear at the side of the of the icons rather than above the icons?

    Thanks

    Ed

    Comment by Ed

  • Hey,

    can you integrate in your next update _trackSocial instead of -trackEvent for the Google Analytics integration?

    Thanks

    Mario

    Comment by Mario

Leave a comment

 

RSS feed for comments on this post