Social Icons Widget

How do I add/remove services from the list?

This plugin runs the array of services through a filter called social-icons-services before using that array. The list of services is an associative array using a string that’s usable as a CSS class for the key and the proper name of the service as the value. You can remove services by unsetting them from the passed array or add services by simply appending them to the array.

The entire array is sorted in alphabetical order according to the name of the service.

The default array used by the plugin is:

array( 
    'twitter'   => __( 'Twitter' ), 
    'facebook'  => __( 'Facebook' ), 
    'youtube'   => __( 'YouTube' ), 
    'linkedin'  => __( 'LinkedIn' ), 
    'google'    => __( 'Google+' ), 
    'friendfeed'    => __( 'FriendFeed' ), 
    'flickr'    => __( 'Flickr' ), 
);

The widget control inputs require the values entered to be URLs, so you should not try to add list items that are supposed to accept input other than valid URLs.

How do I change the HTML output of the widget?

There are four separate hooks used to filter the HTML output of the widget. They are as follows:

• social-icons-before-list – The HTML code that should be output to open the list (<ul class="social-icons-list"> by default)
• social-icons-after-list – The HTML code used to close the list (</ul> by default)
• social-icons-before-item – The HTML code used to open each list item. This code is printed using the printf() method to inject the appropriate service key as the class. Therefore, you should use %s in the code to indicate where the service key should be printed. The default code is <li class="%s">
• social-icons-after-item – The HTML code used to close the list item (</li> by default)

How do I style the links?

The widget should be assigned a class of ‘social-icons’. By default, the list itself will have a CSS class of ‘social-icons-list’, so you can apply any CSS styles you desire to that class. In addition, as mentioned above, each list item is assigned its own CSS class, consistent with the array key assigned to that item. The default CSS classes that will be used by the plugin are (the proper names of the services are shown in parentheses):

• twitter (Twitter)
• facebook (Facebook)
• youtube (YouTube)
• linkedin (LinkedIn)
• google (Google+)
• friendfeed (FriendFeed)
• flickr (Flickr)

With those classes, you could do something like the following to hide the text of the links and replace that text with the appropriate icons (not included):

.social-icons {
    position: absolute;
    bottom: 12px;
    left: 58px;
    width: 124px;
    height: 32px;
    margin: 0 auto;
}

.social-icons li {
    display: inline;
}

.social-icons li a {
    display: block;
    float: left;
    width: 0;
    height: 0;
    padding: 32px 32px 0 0;
    margin: 0 0 0 14px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    background: url(images/social-icons.png);
}

.social-icons li.linkedin a {
    background-position: -46px 0;
}

.social-icons li.twitter a {
    background-position: -91px 0;
}

.social-icons li:first-child a {
    margin-left: 0;
}

Where can I find icons to use with this widget?

I found an older blog post with some links to a bunch of resources for free sets of social media icons. You can check it out and see if any of the examples shown there strike your fancy. I am not affiliated in any way with that blog or the author of the post.

0.1

• This is the first version of this plugin, so there haven’t been any changes yet.