WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I was looking into using Socialite.js to load my twitter/facebook icons. I found the following tutorial, which helped me to build the desired functionality.

The links display, but just as text (with HTML-list bullet points). Everything seems to be in place (css/js/sprite).

I know its a long shot, but anybody got any ideas? Thanks in advance.

EDIT: Here is the code I've used...hopefully it will make sense to somebody haha :)


function wptuts_load_socialiate() {
    // Register Socialite
    wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true );
    // Register social initialiser script
    wp_register_script( 'wptuts-social', get_template_directory_uri() . '/js/wptuts-social.js', array('jquery', 'socialite'), '', true );

    // Now enqueue Socialite
    wp_enqueue_script( 'wptuts-social' );

    // Register social CSS
    wp_register_style( 'wptuts-social', get_template_directory_uri() . '/css/wptuts-social.css');

    // Now enqueue social
    wp_enqueue_style( 'wptuts-social' );
add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' );

function social_after_the_content( $content ) {
    $custom_content .= $content;
    $custom_content .= '
<ul class="social-buttons cf">
    <li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li>
    <li><a class="socialite googleplus-one" href="https://plus.google.com/share" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li>
    <li><a class="socialite facebook-like" href="http://www.facebook.com/sharer.php" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li>

    return $custom_content;
add_filter( 'the_content', 'social_after_the_content' );



$(‘.social-buttons’).one(‘mouseenter’, function()



.social-buttons { display: block; list-style: none; padding: 0; margin: 20px; }
.social-buttons > li { display: block; margin: 0; padding: 10px; float: left; }
.social-buttons .socialite { display: block; position: relative; background: url('http://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png') 0 0 no-repeat; }
.social-buttons .socialite-loaded { background: none !important; }

.social-buttons .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
.social-buttons .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
.social-buttons .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
.social-buttons .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }

.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

the js is in the js folder (theme/js) along with Socialite.min.js and the css file is also in its own folder (theme/css).

share|improve this question

closed as too localized by kaiser, Brian Fegter, Wyck, Rarst Oct 2 '12 at 21:08

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

First: Please, really read through the FAQ. It will makes things a lot easier for everyone - you included. And no, I'm not only talking about this question. When you've read the FAQ and understand the sites mechanisms, then you'll see that it's ok to post updates in your question (and not in comments) or add solutions as answers to your own question and several other things how you can improve the overall stats for the site and get better answers to your own questions. – kaiser Sep 5 '12 at 13:30
Ok, understand the edit thing...I changed my previous posts and added all my "edits" to the original post. – Frank Morrison Sep 5 '12 at 13:35
That is fair enough, I can appreciate how difficult this would be. I tried to edit all my posts with answers in the original posts. – Frank Morrison Sep 5 '12 at 14:06
Updated the post with the code I used – Frank Morrison Sep 5 '12 at 15:06
FINALLY! Got it working :) For anybody else reading this, I created the files originally in sublime, but while in work i re-did everything...but in notepad. Works. Thanks for your help Kaiser, I appreciate you taking time to help me with this. – Frank Morrison Sep 10 '12 at 13:51
up vote 0 down vote accepted

kaiser pointed me to firebug (FF addon) which confirmed what I thought, the css/js files were not being loaded correctly. But everthing seemed ok. I copied the css into my main styles sheet and things started to look better (however, some things still didnt work).

I re-did the tutorial (for the fourth time), but this time I didn't use sublime (used notepad) and everything works. I can now remove the css from my main styles sheet and everything still works.

Thanks for the advice and the heads up on firebug...and when copying from tutorials :)

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.