Add Periscope to Simple Social Icons

I have a client who has gotten into Periscope in a big way. Right now the only way for her to embed her Periscope videos into her WordPress site is to upload them to YouTube first, but meanwhile, there was a more basic problem: adding a link to her Periscope profile into Simple Social Icons, which I’m using in both the header and the footer of the site to display social profile links.

Simple Social Icons normally uses the Entypo icon font from Fontello. Entypo does not include a Periscope icon. Neither does Font Awesome. The only icon font I could find with a Periscope icon is called Socicon. I had never heard of it before I started searching for a Periscope font icon, but given the impressive array of social icons it includes and its general ease of use, I can definitely recommend it now. There’s even a Socicon WordPress plugin to make loading it onto your site easier.

I modified Sridhar Katakam’s helpful tutorial “How to Replace, Reorder, and Add New Icons in Simple Social Icons” in order to do what I needed to do. (Yes, you do have to pay for access to Sridhar’s tutorials. And if you are a developer at about my level of accomplishment, it is worth every penny.)

First, I installed the Socicon WordPress plugin, just to make my life easier. (This is supposed to be a minor fix, after all.) The plugin is new, without many active installs, but worked immediately with no fuss.

Next, I modified the simple_social_default_glyphs filter in functions.php, as follows:

// Add Periscope to Simple Social Icons

add_filter( 'simple_social_default_profiles', 'custom_simple_social_default_profiles' );
function custom_simple_social_default_profiles() {
	$glyphs = array(
			'dribbble'		=> 'D',
			'email'			=> '@',
			'facebook'		=> 'b',
			'flickr'		=> 'v',
			'github'		=> 'Q',
			'gplus'			=> 'c',
			'instagram' 	=> 'x',
			'linkedin'		=> 'j',
			'pinterest'		=> 'd',
			'rss'			=> ',',
			'stumbleupon'	=> 'E',
			'tumblr'		=> 'z',
			'twitter'		=> 'a',
			'vimeo'			=> 's',
			'youtube'		=> 'r',
			'periscope'		=> '0',
		);

	$profiles = array(
			'dribbble' => array(
				'label'   => __( 'Dribbble URI', 'ssiw' ),
				'pattern' => '<li class="social-dribbble"><a href="%s" %s>' . $glyphs['dribbble'] . '</a></li>',
			),
			'email' => array(
				'label'   => __( 'Email URI', 'ssiw' ),
				'pattern' => '<li class="social-email"><a href="%s" %s>' . $glyphs['email'] . '</a></li>',
			),
			'facebook' => array(
				'label'   => __( 'Facebook URI', 'ssiw' ),
				'pattern' => '<li class="social-facebook"><a href="%s" %s>' . $glyphs['facebook'] . '</a></li>',
			),
			'flickr' => array(
				'label'   => __( 'Flickr URI', 'ssiw' ),
				'pattern' => '<li class="social-flickr"><a href="%s" %s>' . $glyphs['flickr'] . '</a></li>',
			),
			'github' => array(
				'label'   => __( 'GitHub URI', 'ssiw' ),
				'pattern' => '<li class="social-github"><a href="%s" %s>' . $glyphs['github'] . '</a></li>',
			),
			'gplus' => array(
				'label'   => __( 'Google+ URI', 'ssiw' ),
				'pattern' => '<li class="social-gplus"><a href="%s" %s>' . $glyphs['gplus'] . '</a></li>',
			),
			'instagram' => array(
				'label'   => __( 'Instagram URI', 'ssiw' ),
				'pattern' => '<li class="social-instagram"><a href="%s" %s>' . $glyphs['instagram'] . '</a></li>',
			),
			'linkedin' => array(
				'label'   => __( 'Linkedin URI', 'ssiw' ),
				'pattern' => '<li class="social-linkedin"><a href="%s" %s>' . $glyphs['linkedin'] . '</a></li>',
			),
			'pinterest' => array(
				'label'   => __( 'Pinterest URI', 'ssiw' ),
				'pattern' => '<li class="social-pinterest"><a href="%s" %s>' . $glyphs['pinterest'] . '</a></li>',
			),
			'rss' => array(
				'label'   => __( 'RSS URI', 'ssiw' ),
				'pattern' => '<li class="social-rss"><a href="%s" %s>' . $glyphs['rss'] . '</a></li>',
			),
			'stumbleupon' => array(
				'label'   => __( 'StumbleUpon URI', 'ssiw' ),
				'pattern' => '<li class="social-stumbleupon"><a href="%s" %s>' . $glyphs['stumbleupon'] . '</a></li>',
			),
			'tumblr' => array(
				'label'   => __( 'Tumblr URI', 'ssiw' ),
				'pattern' => '<li class="social-tumblr"><a href="%s" %s>' . $glyphs['tumblr'] . '</a></li>',
			),
			'twitter' => array(
				'label'   => __( 'Twitter URI', 'ssiw' ),
				'pattern' => '<li class="social-twitter"><a href="%s" %s>' . $glyphs['twitter'] . '</a></li>',
			),
			'vimeo' => array(
				'label'   => __( 'Vimeo URI', 'ssiw' ),
				'pattern' => '<li class="social-vimeo"><a href="%s" %s>' . $glyphs['vimeo'] . '</a></li>',
			),
			'youtube' => array(
				'label'   => __( 'YouTube URI', 'ssiw' ),
				'pattern' => '<li class="social-youtube"><a href="%s" %s>' . $glyphs['youtube'] . '</a></li>',
			),
			'periscope' => array(
				'label'   => __( 'Periscope URI', 'ssiw' ),
				'pattern' => '<li class="social-periscope"><a href="%s" %s>' . $glyphs['periscope'] . '</a></li>',
			),
		);
	return $profiles;
}

I’m doing two things here: modifying the default glyphs to use Socicon, and adding the Periscope URI into the widget.

Unlike Entypo and Font Awesome, Socicon uses ordinary letters of the alphabet, punctuation, and symbols to represent icons. There’s an icon chart here.

Next, of course, we need some CSS modifications so that the icons don’t display gibberish. Even though the client’s site is only using a few social links, I added CSS for all of the glyphs in Simple Social Icons.

.simple-social-icons ul li.social-dribble a,
.simple-social-icons ul li.social-email a,
.simple-social-icons ul li.social-facebook a,
.simple-social-icons ul li.social-flickr a,
.simple-social-icons ul li.social-github a,
.simple-social-icons ul li.social-gplus a,
.simple-social-icons ul li.social-instagram a,
.simple-social-icons ul li.social-linkedin a,
.simple-social-icons ul li.social-rss a,
.simple-social-icons ul li.social-stumbleupon a,
.simple-social-icons ul li.social-tumblr a,
.simple-social-icons ul li.social-twitter a,
.simple-social-icons ul li.social-vimeo a,
.simple-social-icons ul li.social-youtube a,
.simple-social-icons ul li.social-periscope a {
	font-family: 'socicon';
}

And that’s it! There’s now a Periscope icon and link in both the header and footer.

Oh, and if you want to see the whole site, which is at the soft-launch stage, it’s at http://www.yourmentalhealthfirst.com.