• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Add Periscope to Simple Social Icons

October 6, 2015 by Sallie Goetsch 9 Comments

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.

screenshot: Simple Social Icons with Periscope icon by Socicons

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

Related Items

  • It’s WordPress Plugin Developer Donation Day!
  • WP-Tonic 117: Email Marketing and WordPress
    WP-Tonic 117: Email Plugins, Marketing, and Strategy for WordPress
  • There’s a Plugin for That Presentation

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Tutorial, Social Media

Reader Interactions

Comments

  1. Kat says

    March 19, 2016 at 4:08 pm

    Awesome. Very useful. Thank you!

    Reply
  2. Kat says

    March 21, 2016 at 3:17 am

    I spoke too soon. This has taken out the regular glyphs on my client’s site in some font cases and the images are not showing up at all on the social media icons. Something about your code isn’t working. Thanks.

    Reply
    • Sallie Goetsch says

      March 21, 2016 at 8:09 am

      I ran into an issue where I had a parked domain pointing to the site and the icons didn’t show up there, and had to make a change to the .htaccess file to be sure the socicon font would load on all domains.

      Reply
  3. John says

    April 22, 2016 at 12:59 am

    Hi Sallie ! I was never able to find an easy tutorial. I wanted to add periscope to simple social icons. I will add now. Any idea if we can add Yummly as well ? Thanks in advance!

    Reply
    • Sallie Goetsch says

      May 6, 2016 at 7:15 pm

      Hi, John.

      I’m pretty sure that adding Yummly would work the same way, but I haven’t tried it.

      Cheers,
      Sallie

      Reply
  4. Ryan Conway says

    August 15, 2016 at 1:07 pm

    Hi Sallie, I was struggling to find a way to add yelp to the mix, until I came across your tutorial. I seem to be having an issue with the letter showing up instead of the icon. Any thoughts?

    http://bostonstrength.wpengine.com/

    Thanks!

    Reply
    • Sallie Goetsch says

      August 16, 2016 at 8:10 am

      I can’t see anything wrong on your site offhand: the stylesheet for the font is loading and your CSS looks to be correct. I presume you’ve tried clearing the cache and so forth?

      Reply
  5. Puisi says

    December 14, 2016 at 1:24 am

    How to reduce font awesome loading time?

    Reply
    • Sallie Goetsch says

      December 14, 2016 at 9:04 am

      Apparently this is an issue with Font Awesome in general, mostly on Chrome. One suggestion I saw was to download only the icons you need from Fontello. In the case of this tutorial, however, the icons come from Socicon. The Socicon plugin downloads the font so that it loads from your own server, and I don’t notice any delay in the icons loading on the test site I used (Your Mental Health First).

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact