Adding Snapchat to your WordPress social menus
I stumbled across a question asking how to add Snapchat to a WordPress social icon menu. This was a client request, and the question asker was wondering how to add Snapchat to a system that did not include Snapchat as an option.
Social icon menus are made possible in a couple ways. Either by using the core WordPress menu system combined with icons (font or SVG), or a plugin like Simple Social Icons.
In this post, I’ll explain why you may want to steer your client away from announcing your Snapchat in this way, and explain how to efficiently add a Snapchat icon to your social menus if the client is insistent.
Considering Snapchat limitations
There’s a reason why some “social icon” solutions exclude Snapchat. Unlike many other popular social networks, Snapchat has no web interface.
While Snapchat announced profile URLs at the start of 2016, there is no way to interact with Snapchat outside of their Android and iOS apps.
In an interesting development, Google recently announced that Chromebooks would be able to run Android apps, but that just expands the supported device list by one, adding to iPhones, iPads, Android phones, and Android tablets.
There are better, hipper ways of announcing your Snapchat presence on your website, such as displaying a Snapcode.
Even just typing out “Add me on Snapchat: [username]” would be preferable to linking to a Snapchat “profile page” (which don’t actually display any content, just a username and a link to download the app).
In short, I wouldn’t waste your time on this. But if you can’t convince a client otherwise, make sure you’re adding Snapchat support in the most efficient way.
If you have Font Awesome enqueued
Then adding support to your existing WordPress social nav menu is as simple as applying the following line of CSS.
Of course, we’re assuming other styles that apply the ‘FontAwesome’ font family and other icon stylings are set in less specific social navigation selectors.
Note that Font Awesome offers a couple other icon styles for Snapchat. We chose the bare ghost.
If you don’t have Font Awesome enqueued
Then please don’t load the entire Font Awesome library on every single page of your site for the sake of one icon.
We can be much more laser-focused here, thanks to SVG! We’ve discussed SVG social menus for WordPress in a past Themetry blog post, which dealt with menus comprised entirely of SVGs.
We’ll go with more of a mix-and-match approach, combining an icon font with a supplementary Snapchat SVG.
And we’ll be making a child theme of Owari to demonstrate. Owari uses Genericons as its icon font, which does not include a Snapchat glyph, which makes it an ideal testing ground for this technique.
Grab the Snapchat Ghost SVG
You can find it in a fork of the Font-Awesome-SVG-PNG GitHub repository, which as you might’ve assumed from the name, includes individual SVG and PNG files for each Font Awesome icon.
This is the individual SVG equivalent of the “bare ghost” Font Awesome icon we used earlier.
We’ll place the SVG in the root of our child theme directory, for convenient reference in the child theme stylesheet.
We’ll also add a fill color of #0054a6 directly in the SVG, which we’ll need to mimic Owari’s hover effect of the rest of the social icons.
Add the CSS rule
In our child theme, we’ll place the following CSS:
We use an SVG with a fill color that matches our hover color, but use filter: brightness(0%) to make the initial color black, and filter: brightness(100%) to reveal the SVG color to match our hover color.
You can find the finished product in the Owari Snapchat child theme, available for free on GitHub.
If using Simple Social Icons
Simple Social Icons uses a filter, simple_social_default_profiles, that allows you to add additional profile options.
Victor Font goes into more detail, although I would recommend against using Font Awesome for the sole purpose of adding Snapchat glyph, as I explained earlier in this article.
Instead, you can use a free online app like Icomoon to add the Snapchat glyph to SSI’s custom icon font.
Your mileage may vary
If using a “supplemental SVG,” this can get tricky if your icon color is not black or white in any state, but not impossible with other CSS filters. This is something we discussed in our square dotted borders article.
If you’re using an icon font just for social icons, you might as well just make your own custom icon font that includes all the social networks you want to support.
That way you won’t have to mess around with CSS filters to mimic hover/active/focus effects of SVG background images, and won’t be loading any superfluous icons you don’t need.
If we’re concerned with efficiency, we shouldn’t be including assets for a ton of other icons we won’t be using anyway.
Happy Snapchatting!