sollist
jQuery plugin
builds easy customisable lists of social links
  Download explore ›

Simple demo

Sollist comes with awesome free for use icon themes and provides wide customization capabilites

Installation

1. Include jQuery and Sollist's plugin files

Download Sollist, move jquery.sollist.css and sollist-themes folder to your styles folder. Move jquery.sollist.min.js to your scripts folder.

You should place sollist-themes folder near jquery.sollist.css file.
You should NOT rename sollist-themes folder.

Include jQuery, jquery.sollist.css and jquery.sollist.min.js to your page: 

                    
    <head>
    . . .

        <link href="../sollist/jquery.sollist.css" rel="stylesheet">
        
    . . .

        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="js/jquery.sollist.js"></script>

    . . .
    </head>

If you want to use tooltips with your social icons you should also download Tooltipster jQuery plugin and include it to your page: 

                    
    <head>
    . . .

        <link href="../sollist/jquery.sollist.css" rel="stylesheet">
        <link href="css/tooltipster.css" rel="stylesheet" />
    . . .

        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="js/jquery.tooltipster.min.js"></script>
        <script src="js/jquery.sollist.js"></script>

    . . .
    </head>

2. Setup HTML

Create element(s) to contain your social links:

                    
    <div id="sollist"></div>

3. Activate Sollist

Add the following script after jquery.sollist.min.js inclusion.

                    
    <script>
        $(function(){
            $("#sollist").sollist({
                profiles: {
                    facebook: 'http://facebook.com/yourlink'
                    ,googleplus: 'https://plus.google.com/yourlink/posts'
                    ,dribbble: 'https://dribbble.com/yourlink'
                }
            });
        });
    </script>

Themes

Sollist comes with number of free for use icon themes. You can choose one by setting up theme propierty: 

                    
    $(function(){
        $("#sollist").sollist({
            theme: 'lee-gargano-circle-color'
            ,profiles: {
                facebook: 'http://facebook.com/yourlink'
                ,googleplus: 'https://plus.google.com/yourlink/posts'
                ,dribbble: 'https://dribbble.com/yourlink'
            }
        });
    });
lee-gargano-circle-color
source   author
show all ›
lee-gargano-square-color
source   author
show all ›
lee-gargano-circle-white
source   author
show all ›
lee-gargano-square-white
source   author
show all ›
mikymeg-color
source
show all ›
mikymeg-grey
source
show all ›
light-circle
source
show all ›

Use custom theme

Sollist allows you to use your own or third party icon sets.

1. Prepare icon files

  • Place all icon files in one directory
  • All icon files should have same extension (i.e. png or jpg)
  • Icon file name should be the same as related social service name (i.e. facebook.png for facebook or googleplus.png for google+)

2. Activate Sollist with special options

Activate Sollist with following options:

  • themeDirPath — path to directory with icons
  • iconFileExtension — icon files extesion. Default value: 'png'. 

    <script>
        $(function(){
            $("#sollist").sollist({
                profiles: {
                    facebook: 'http://facebook.com/yourlink'
                    ,googleplus: 'https://plus.google.com/yourlink/posts'
                    ,dribbble: 'https://dribbble.com/yourlink'
                }
                ,themeDirPath: 'path/to/icon/files'
                ,iconFileExtension: 'jpg'
            });
        });
    </script>

Hover effects

Built-in hover effects

You can choose appropriate icon hover effect by setting up hoverEffect option. 


    <script>
        $(function(){
            $("#sollist").sollist({
                profiles: {
                    facebook: 'http://facebook.com/yourlink'
                    ,googleplus: 'https://plus.google.com/yourlink/posts'
                    ,dribbble: 'https://dribbble.com/yourlink'
                }
                ,hoverEffect: 'fade-out'
            });
        });
    </script>

Available hover effects:

fade-out
fade-in
rise
rotate
shrink
grow
bounce

Custom hover functions

You can implement your own hover functions and set them to hoverInFunction and hoverOutFucntion parameters. 


    $(function() {
        $('#example').sollist({
            profiles: {
                instagram: 'http://imstagram.com/polinametelkova'
            }
            ,hoverInFunction: function($item){
                $item.css({"padding-left": "50px", "transition-duration": "0.1s"});
            }
            ,hoverOutFunction: function($item){
                $item.css({"padding-left": "0px", "transition-duration": "0.1s"});
            }
        });
    });

Result:

Tooltips

Setup tooltipster

Download Tooltipster jQuery plugin and include it to your page: 

                    
    <head>
    . . .

        <link href="../sollist/jquery.sollist.css" rel="stylesheet">
        <link href="css/tooltipster.css" rel="stylesheet" />
    . . .

        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="js/jquery.tooltipster.min.js"></script>
        <script src="js/jquery.sollist.js"></script>

    . . .
    </head>

You should include jquery.tooltipster.min.js before jquery.sollist.js.

Tooltips options

  • showTooltips — if true, sollist will show tooltips. Default value: false.
  • tooltipsterOptions — object with tooltipster plugin options. Tooltipster options documentation.
  • tooltips — object with tooltip texts. Default tooltip text is service name

Example:


    $("#example").sollist({
        profiles: {
            facebook: 'http://facebook.com/zuck'
            ,deviantart:'http://mikymeg.deviantart.com/'
            ,instagram: 'https://instagram.com/polinametelkova'
        }
         ,showTooltips: true
        ,tooltipsterOptions: {
            theme: "sl-tooltip-black"
        }
       ,tooltips:{
            //facebook tooltip will be 'facebook'
            deviantart: 'icons author page'
            ,instagram: 'pretty girl'
        }
    });

Themes

Sollist comes with two built-in tooltip themes: sl-tooltip-black and sl-tooltip-white.

sl-tooltip-black
sl-tooltip-white

You can also create your own tooltipster theme. Look for Customizing Your Tooltipster's Style chapter at tooltipster documentation page.

Options

Option Type Description Default
profiles object
The only required option.
Object with profile links. Key is service name, value is profile link.
theme string Icon theme name. Themes list. 'lee-gargano-circle-color'
pixelsBetweenItems int Space between icons in pixels. 10
themeDirPath string Path from base url to custom icon theme directory. If you use built-in icon themes, leave this option empty. ''
containerTag string Icons container element tag. 'ul'
elementTag string Icon element tag 'li'
size int Icon size 32
iconFileExtension string Custom icon theme files extension. If you use built-in icon themes, leave this option empty. 'png'
hoverEffect string Icon hover animation effect. If you don't need hover animation, leave this option empty.
Hover animation effects list.		 ''
newTab boolean If true, Sollist will open social profiles page in new tab. true
showTooltips boolean If true, Sollist will show tooltip on icon hover.
More about tooltips setup and customization. 		false
tooltips object Object with tooltip texts. Key is service name, value is tooltip text.
More about tooltips setup and customization. 		false
itemClass string Custom class that will be added to each icon element. ''
itemCss object Custom css that will be added to each icon element. ''
88z/sollist