
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.
Awesome. Very useful. Thank you!
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.
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.
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!
Hi, John.
I’m pretty sure that adding Yummly would work the same way, but I haven’t tried it.
Cheers,
Sallie
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!
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?
How to reduce font awesome loading time?
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).