Phuc Pham

Just place the Widget on your sidebar to display these icons.

Social Icon Links

To customize the social icon link with your own icons easier.

robfelty

This is a very simple plugin that uses Javascript to form a collapsable set of 
links in the sidebar for the links (blogroll). Every link corresponding to a 
given link category will be expanded.
You can use multiple instances of the widget, each with its own set of options. In this way you could have one set of links for certain categories one place on your page, and another widget with a different set of links somewhere else.
It is based off of the Collapsing Categories and Collapsing Pages plugins.
<h4>What’s new?</h4>
<ul>
<li>
0.4 (2015.08.12)
<ul>
<li>Compatible with WP 4.3</li>
</ul>
</li>
<li>
0.3.5 (2010.06.23)
<ul>
<li>Fixed javascript path error</li>
</ul>
</li>
<li>
0.3.4 (2010.06.18)
<ul>
<li>Fixed html validation when target is blank (thanks http://dropdeaddick.com)</li>
</ul>
</li>
<li>
0.3.3 (2010.01.28)
<ul>
<li>Switched from scriptaculous to jquery. No longer conflicts with plugins 
which use mootools (e.g. featured content gallery)</li>
<li>Restricted settings page to authorized users</li>
</ul>
</li>
</ul>
<h3>Options</h3>
Style options can be set via the settings panel. All other options can be set 
from the widget panel. If you wish to insert the code into your theme manually 
instead of using a widget, you can use the following options. These options 
can be given to the <code>collapsLink()</code> function either as an array or in query 
style, in the same manner as the <code>wp_list_links</code> function.
<pre><code> $defaults=array(
 'showLinkCount'=> true ,
 'catSort'=> 'linkName' ,
 'catSortOrder'=> 'ASC' ,
 'linkSort'=> 'linkName' ,
 'linkSortOrder'=> 'ASC' ,
 'inExclude'=> 'exclude' ,
 'inExcludeCats'=> '' ,
 'expand'=> 0 ,
 'customExpand' => '',
 'customCollapse' => '',
 'defaultExpand'=> '',
 'animate' => 0,
 'nofollow' => true,
 'debug' => false
 );
</code></pre>
<ul>
<li>showLinkCount
<ul>
<li>When true, the number of links in the category will be shown in 
parentheses following the name of the link category</li>
</ul>
</li>
<li>catSort
<ul>
<li>The order in which link categories should be sorted. Possible values:
<ul>
<li>‘catName’ the name of the link category (default)</li>
<li>‘catId’ the id of the link category</li>
<li>‘catSlug’ the slug of the link category</li>
<li>‘catOrder’ custom order specified in the links options</li>
<li>‘catCount’ the number of links in each category</li>
</ul>
</li>
</ul>
</li>
<li>linkSort
<ul>
<li>The order in which link linkegories should be sorted. Possible values:
<ul>
<li>‘linkName’ the name of the link (default)</li>
<li>‘linkId’ the id of the link </li>
<li>‘linkUrl’ the url of the link </li>
<li>‘linkRating’ the rating assigned to the link</li>
</ul>
</li>
</ul>
</li>
<li>catSortOrder
<ul>
<li>Whether categories should be sorted in normal or reverse order. Possible 
values:
<ul>
<li>‘ASC’ normal order (a-z, 0-9) (default)</li>
<li>‘DESC’ reverse order (z-a, 9-0)</li>
</ul>
</li>
</ul>
</li>
<li>linkSortOrder
<ul>
<li>Whether link should be sorted in normal or reverse order. Possible values:
<ul>
<li>‘ASC’ normal order (a-z, 0-9) (default)</li>
<li>‘DESC’ reverse order (z-a, 9-0)</li>
</ul>
</li>
</ul>
</li>
<li>inExclude
<ul>
<li>Whether to include or exclude certain categories
<ul>
<li>‘exclude’ (default) </li>
<li>‘include’</li>
</ul>
</li>
</ul>
</li>
<li>inExcludeCats
<ul>
<li>The link categories which should be included or excluded</li>
</ul>
</li>
<li>expand
<ul>
<li>The symbols to be used to mark expanding and collapsing. Possible values:
<ul>
<li>‘0’ Triangles (default)</li>
<li>‘1’ + –</li>
<li>‘2’ [+] [-]</li>
<li>‘3’ images (you can upload your own if you wish)</li>
<li>‘4’ custom symbols</li>
</ul>
</li>
</ul>
</li>
<li>customExpand
<ul>
<li>If you have selected ‘4’ for the expand option, this character will be 
used to mark expandable link categories</li>
</ul>
</li>
<li>
customCollapse
<ul>
<li>If you have selected ‘4’ for the expand option, this character will be 
used to mark collapsible link categories</li>
</ul>
</li>
<li>
defaultExpand
<ul>
<li>A comma separated list of link category IDs or Slugs which should be 
expanded by default</li>
</ul>
</li>
<li>animate
<ul>
<li>When set to true, collapsing and expanding will be animated</li>
</ul>
</li>
<li>nofollow
<ul>
<li>When set to true (default), rel=’nofollow’ tags will be added to links</li>
</ul>
</li>
<li>debug
<ul>
<li>When set to true, extra debugging information will be displayed in the 
underlying code of your page (but not visible from the browser). Use 
this option if you are having problems</li>
</ul>
</li>
</ul>
<h4>Examples</h4>
<pre><code>collapsLink('animate=true&nofollow=false&expand=3,inExcludeCats=blogroll,lousy-friends')
</code></pre>
This will produce a list with: 
* animation on 
* no nofollow tags 
* using images to mark collapsing and expanding 
* exclude links in the categories blogroll and lousy-friends
<h3>Demo</h3>
You can see this on my test blog at http://robfelty.com/test
<h3>CAVEAT</h3>
Currently this plugin relies on Javascript to expand and collapse the links. 
If a user’s browser doesn’t support javascript they won’t see the links to the 
posts, but the links to the links will still work (which is the default 
behavior in wordpress anyways)
The option to show the number of links currently uses the number stored in the 
database, which includes both visible and invisible links. If you have 
invisible links, this number will be wrong.

Collapsing Links

This widget uses Javascript to dynamically expand or collapsable the set of links for each link category.

Social Icon Links vs Collapsing Links