Many users like to use the Simple Social Icons plugin with their Genesis Framework based child themes. Authored by Nathan Rice, Brian Gardner and the Studio Press team, it works very well with Genesis. After all, they are the framework's authors. And in keeping with the Genesis philosophy for making everything fairly simple to modify if you know how, the Simple Social Icons plugin makes use of filters to allow a developer to easily modify its content and display. A common request these days is to add the Snapchat icon to Simple Social Icons. This article shows you how to do that.
First, we need to add Snapchat to the plugin's profile and glyphs definitions. Add this to your child theme's functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | add_filter( 'simple_social_default_profiles', 'my_custom_simple_social_default_profiles' ); function my_custom_simple_social_default_profiles() { $glyphs = array( 'bloglovin' => '', 'dribbble' => '', 'email' => '', 'facebook' => '', 'flickr' => '', 'github' => '', 'gplus' => '', 'instagram' => '', 'linkedin' => '', 'pinterest' => '', 'rss' => '', 'snapchat' => '', 'stumbleupon' => '', 'tumblr' => '', 'twitter' => '', 'vimeo' => '', 'youtube' => '', ); $profiles = array( 'bloglovin' => array( 'label' => __( 'Bloglovin URI', 'simple-social-icons' ), 'pattern' => '<li class="social-bloglovin"><a href="%s" %s>' . $glyphs['bloglovin'] . '</a></li>', ), 'dribbble' => array( 'label' => __( 'Dribbble URI', 'simple-social-icons' ), 'pattern' => '<li class="social-dribbble"><a href="%s" %s>' . $glyphs['dribbble'] . '</a></li>', ), 'email' => array( 'label' => __( 'Email URI', 'simple-social-icons' ), 'pattern' => '<li class="social-email"><a href="%s" %s>' . $glyphs['email'] . '</a></li>', ), 'facebook' => array( 'label' => __( 'Facebook URI', 'simple-social-icons' ), 'pattern' => '<li class="social-facebook"><a href="%s" %s>' . $glyphs['facebook'] . '</a></li>', ), 'flickr' => array( 'label' => __( 'Flickr URI', 'simple-social-icons' ), 'pattern' => '<li class="social-flickr"><a href="%s" %s>' . $glyphs['flickr'] . '</a></li>', ), 'github' => array( 'label' => __( 'GitHub URI', 'simple-social-icons' ), 'pattern' => '<li class="social-github"><a href="%s" %s>' . $glyphs['github'] . '</a></li>', ), 'gplus' => array( 'label' => __( 'Google+ URI', 'simple-social-icons' ), 'pattern' => '<li class="social-gplus"><a href="%s" %s>' . $glyphs['gplus'] . '</a></li>', ), 'instagram' => array( 'label' => __( 'Instagram URI', 'simple-social-icons' ), 'pattern' => '<li class="social-instagram"><a href="%s" %s>' . $glyphs['instagram'] . '</a></li>', ), 'linkedin' => array( 'label' => __( 'Linkedin URI', 'simple-social-icons' ), 'pattern' => '<li class="social-linkedin"><a href="%s" %s>' . $glyphs['linkedin'] . '</a></li>', ), 'pinterest' => array( 'label' => __( 'Pinterest URI', 'simple-social-icons' ), 'pattern' => '<li class="social-pinterest"><a href="%s" %s>' . $glyphs['pinterest'] . '</a></li>', ), 'rss' => array( 'label' => __( 'RSS URI', 'simple-social-icons' ), 'pattern' => '<li class="social-rss"><a href="%s" %s>' . $glyphs['rss'] . '</a></li>', ), 'snapchat' => array( 'label' => __( 'SnapChat URI', 'simple-social-icons' ), 'pattern' => '<li class="social-snapchat"><a href="%s" %s>' . $glyphs['snapchat'] . '</a></li>', ), 'stumbleupon' => array( 'label' => __( 'StumbleUpon URI', 'simple-social-icons' ), 'pattern' => '<li class="social-stumbleupon"><a href="%s" %s>' . $glyphs['stumbleupon'] . '</a></li>', ), 'tumblr' => array( 'label' => __( 'Tumblr URI', 'simple-social-icons' ), 'pattern' => '<li class="social-tumblr"><a href="%s" %s>' . $glyphs['tumblr'] . '</a></li>', ), 'twitter' => array( 'label' => __( 'Twitter URI', 'simple-social-icons' ), 'pattern' => '<li class="social-twitter"><a href="%s" %s>' . $glyphs['twitter'] . '</a></li>', ), 'vimeo' => array( 'label' => __( 'Vimeo URI', 'simple-social-icons' ), 'pattern' => '<li class="social-vimeo"><a href="%s" %s>' . $glyphs['vimeo'] . '</a></li>', ), 'youtube' => array( 'label' => __( 'YouTube URI', 'simple-social-icons' ), 'pattern' => '<li class="social-youtube"><a href="%s" %s>' . $glyphs['youtube'] . '</a></li>', )); return $profiles; } |
Unfortunately the font icon set included with Simple Social Icons does not include the Snapchat ghost. For the purpose of this article, I've used FontAwesome for the glpyh. If you have a different preference, you can use any icon font you'd like, but you're on your own for figuring out the code. I've found that one of the best ways to include FontAwesome on your site is to install the Better Font Awesome plugin.
Finally, add this to you child theme's style.css:
1 2 3 | .simple-social-icons ul li.social-snapchat a { font-family: 'FontAwesome'; } |
This code was tested in my local environment with the Executive Pro theme.
Tony Leary
November 22, 2016 at 4:44 pmThanks for this, I used it for Houzz (‘’ for anyone else trying to do the same)
Any suggestions on how I could add the sameAs schema markup, as depicted on this site?
https://www.searchenginenews.com/sample/update/entry/how-to-add-your-social-profiles-to-the-knowledge-panel
Victor M. Font Jr.
November 24, 2016 at 11:01 amThe link that you pointed us to that provides the examples is using JSon to declare the social profile links. If you are using the Genesis Framework, simply add the script block to header scripts through Genesis/Settings/Header scripts. You could also use the Genesis Simple Hooks, or add the code through functions.php by adding an action for the Genesis meta hook.
Grant Austin
November 2, 2016 at 5:38 amLove this tutorial.
What I am struggling to figure out is why the CSS is slightly off. Noticed, I used this for Soundcloud and Mixcloud (as seen in the middle), but the CSS is slightly off for those two.
http://i.imgur.com/Wu1t6WJ.png
I was wondering if you had this issue and managed to fix it?
Victor M. Font Jr.
November 3, 2016 at 10:20 amHi Grant,
Can’t say that I’ve run into this problem. If you post a link to your site, I’m happy to take a look.
Kate Scott
October 6, 2016 at 9:38 amI’m working on a demo site and I modified this code to add a book icon (to represent Goodreads). It worked great except for one thing: The icon’s unicode shows up next to the icon itself in Firefox. I know there have been problems with Font Awesome rendering incorrectly in Firefox and I’ve tried every fix I could find on StackExchange, but nothing has worked. Any ideas on what’s going on?
Victor M. Font Jr.
October 6, 2016 at 9:58 amHi Kate,
Firefox has no problems rendering Fontawesome icons. You didn’t follow the directions in the article. You have the wrong class on the list item you created. Please go back over the article and follow directions for creating the class and li item.
Kate Scott
October 6, 2016 at 2:33 pmOh, I see. Thanks!