7 Subscribers

My status

Available for hire...

ask for a free quote

Tweet

I can work from anywhere in the world

socialSidebar – jQuery Plugin

Update: If your after WordPress support please go here instead

I always find myself clicking on peoples sidebars mainly for Twitter but sometimes Facebook and LinkedIn.    So I decided to turn it into a jQuery plugin that I can deploy easily for my clients.    I used some generic buttons but added in my plugin the ability to specify custom images. I decided that to make it super fast to deploy I would use a CDN to distribute the images and Javascript files.   Which makes installation super easy.

Example

An example of the plugin is available to your right =D

How to Setup

Step 1)  Copy the following code into the <head> section of your website.   This include contains all the necessary images, CSS and Javascript.

<script src="http://thomasalwyndavis.com.nyud.net/socialsidebar/jquery.socialsidebar.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
        $('body').socialSidebar({
            'top': '100px',
            'twitter': {
                'username': 'yourtwitterusername'
            },
            'facebook': {
                'link': 'http://linktoyourfacebookpageorprofile.com'
            },
            'linkedin': {
                'link': 'http://linktoyourlinkedinprofile.com'
            }
        });
    })
// ]]></script>

You’re done!

Everything is hosted on external servers, so you don’t have to worry about bandwidth, file permissions.  The CSS is inline so no extra http request are being made and your current styles aren’t being affected.

Customization

Besides the obvious customization of changing the amount of pixels from the top.  You can also specify custom images for each of the three social networks by changing the variable ‘image’. For example;

<script src="http://thomasalwyndavis.com.nyud.net/socialsidebar/jquery.socialsidebar.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
        $('body').socialSidebar({
            'top': '100px',
            'twitter': {
                'username': 'yourtwitterusername',
                'image': 'http://someserver.com/custom.jpg'
            },
            'facebook': {
                'link': 'http://linktoyourfacebookpageorprofile.com',
                'image': 'http://someserver.com/custom.jpg'
            },
            'linkedin': {
                'link': 'http://linktoyourlinkedinprofile.com',
                'image': 'http://someserver.com/custom.jpg'
            }
        });
    })
// ]]></script>

Feedback

Leave any feedback you can below in the comment section please and I will always get back to you. If you create custom buttons I will link to your site if you share them. I will add most suggestions and look forward to your replies.

Thanks,
Thomas
p.s. If you like this plugin do me the favor of scrolling to the top and tweeting the page or liking on facebook!

Popularity: 31% [?]

posted on Tuesday, September 21st, 2010 by admin in jQuery
>

6 Responses to “socialSidebar – jQuery Plugin”

  1. Bobby says:

    Nice post Thomas – thanks for this – one suggestion with your css – change/alter your ‘z-index’ to 100 so the social images always rest on top of all other content on the page…

  2. admin says:

    @Bobby, included this thanks for your suggestion! Feel free to post your implementation for a backlink

  3. says:

    Like what you have done, just need to work out where to put it on my site. I use the Thesis theme and need to look around on how to get to the header area.

  4. admin says:

    It should automatically go into the section, I will send you an email tomorrow and we will try to solve it.

    Thanks for the feedback!

  5. Thomas Davis says:

    Hi mru,
    try the javascript file attached to the wordpress version on my site if you are still having difficulty.

  6. Ian Araujo says:

    Thank's!!
    You save my day!

Leave a Reply

olitec
thomas davis

asds