Snippet Name: SocialIcons
Snippet Description: Gives a simple way to put social icons on your website.
Snippet Code:
/**
* Social Icons
* Display Social Icons on your website.
* Author :: Jason Stanley
**/
/*********************
** EDIT HERE **
*********************/
/** Social Links
* Change the array below to display network => url
* !!! If you enable styles below this snippet only supports icons for Facebook, Twitter and LinkedIn - Unsupported links will appear as a text link instead of an icon.
**/
$socialIcons = array (
'Facebook' => 'http://facebook.com/',
'Twitter' => 'http://twitter.com/JasonStanley',
'LinkedIn' => 'http://linkedin.com'
);
/** Enable Default Style
* 0 - Returns an unstyled HTML block with id's and classes to enable styling via your template.
* 1 - Returns a styled HTML block with inline styles
**/
$themed = 1;
/*********************
** END EDIT **
*********************/
// Allows site owner to use snippet twice on same page.
if ( ! function_exists('js_si_unstyledBlock')) {
// Returns Unstyled Block
function js_si_unstyledBlock($socialIcons) {
$html = '<div id="socialIcons">';
$html .= '<ul class="inner">';
foreach ($socialIcons as $network => $link) {
$html .= '<li><a href="' . $link . '" class="' . $network . '" title="Join me on ' . $network . '">Join me on ' . $network . '</a></li>';
}
$html .= '</ul>';
$html .= '</div>';
return $html;
}
// Returns Styled Block
function js_si_styledBlock($socialIcons) {
$supportedIcons = array ('Facebook', 'Twitter', 'LinkedIn');
$html = '<div style="backround:#FFF; padding:5px; height:16px;">';
foreach ($socialIcons as $network => $link) {
if (in_array($network, $supportedIcons)) {
$html .= '<a style="margin-right:5px;" href="' . $link . '" class="' . $network . '" title="Join me on ' . $network . '"><img src="http://jasonstanley.co.uk/icons/' . strtolower($network) . '.png" width="16" height="16" alt="' . $network . '" /></a>';
} else {
$html .= '<a style="margin-right:5px; float:left;" href="' . $link . '" class="' . $network . '" title="Join me on ' . $network . '">Join me on ' . $network . '</a>';
}
}
$html .= '</div>';
return $html;
}
}
return $themed ? js_si_styledBlock($socialIcons) : js_si_unstyledBlock($socialIcons);It should be fairly self explanatory. It creates a social icon block on your site when you call [[SocialIcons]]. You can do this either in a page or in your template. Simply edit the code between the edit lines to define what network links you want to display and whether you want it to have a default style applied or be just give HTML.
I am hosting the icons on my server. They will be there - probably - for years but I can't guarentee they will be there for ever. You can host the icons yourself if you wish. The icon set can be found below. You then need to replace the 'http://jasonstanley.co.uk/icons/' link to whatever your server is.
http://www.wpzoom.com/wpzoom/500-free-icons-wpzoom-social-networking-icon-set/
Let me know what you think. Also, I wanted to add a tab to configuration called Social Icons to avoid people having to mess around with PHP. I couldn't see anything in the API that would allow that. Is this possible?
Note: The weird prefix for the functions 'js_si_' stands for Jason Stanley Social Icons. Its to avoid any conflicts with other snippets.
Edited by JasonS, 14 June 2011 - 04:29 PM.
