Adding a social media icons variables file

My recent discovery of the capture liquid tag which I used to check if a subpage exists was a bit of a revelation. It got me thinking about other ways I could use it to make my themes more user friendly. 

One possible use case was as a means of managing the social media icons displayed on the site. 

As with all things when theme developing, my goal is to make it as user friendly as possible. Ideally there would be no need to edit theme files at all, but in cases where it’s unavoidable then my next goal would be to make the file in question as simple and ‘uncody’ as possible.

So back to the task at hand. The result we’re aiming for here is a method to add a wide range of social media icons to our site in as user friendly a way as possible. 

This feels like one of those instances where editing a theme file is unavoidable so the first step was to create a simple variables file that would contain the social media links. We’ll call it ‘_variables_social_links.html’. As I say, I wanted this to be as intuitive as possible so within that file all we’re going to ask the user to do is list their social media urls with a comma after each one this…

https://twitter.com/thespaceroom,
https://facebook.com/thespaceroom,
https://youtube.com/thespaceroom,
https://instagram.com/thespaceroom,  

The next step is to create a file within our theme to process those social media urls (if they exist) and turn them into some linked icons that we can then add to the front end. 

I then create a file called ‘_social_icons.html’ and add the following code…

{% capture socialLinks %}
    {% include "variables_social_links" %}
{% endcapture %}

Here we’re using our capture tag again and giving it’s content a name of ‘socialLinks’. Inside we’re adding an include tag linking the  ‘_variables_social_links.html’ file containing our social media urls that we just created. 

The point here is that we can use the capture tag to check if there is any content in the variables_social_links file and if not we don’t need to do anything. 

The next task is to do a bit of processing to our socialLinks content to make sure it’s in a format we can work with. We do this by reassigning a processed version of the socialLinks variable to the same variable name…

{% assign socialLinks = socialLinks | strip_html | strip_newlines | split: ‘,’ %}

Here we’re taking our social media urls assigned to the socialLinks variable and doing three things…

1. Removing out any unnecessary html (such as comments) with the ‘strip_html’ filter. 
2. Removing any line breaks with the ‘strip_newlines’ filter
3. Turning our variable into an array so that we can then loop through it to make our icons using the ‘split’ filter. Here we’re specifying that we want to use the ‘,’ character to denote the end of an item in our array. 

Before we move on to the next step we’ll assign one more variable to check how many items our new array contains. 

{% assign socialNumber = socialLinks | size  %}

Here we’re taking our ‘socialLinks’ array and filtering it through the ‘size’ liquid filter to get the number of items in the array which we’re storing in a variable called ‘socialNumber’. 

So now we have a clean array of our social media urls. The next step is to assign an icon to each one. 

For our icons we’re using the remix icon font available here, so our goal here is to cycle through our array, determine which social media company the url is for and assign a suitable icon class. 

Here’s a simple version for just a twitter icon…

{% if socialNumber != 0 %}
    {% for socialLink in socialLinks %}
        {% if socialLink contains 'twitter' %}
            {% assign socialName = 'Twitter' %}
            {% assign socialIcon = 'ri-twitter-fill' %}
        {% endif %}
    {% endfor %}
{% endif %}

So here we’re doing the following… 

1. Checking to see if there are any items in our ‘socialLinks’ array at all by asking if the ‘socialNumber’ variable is more than 0. If so we’re…
2. Looping through our socialLink which is an array of our social media urls
3. Checking to see if the current socialLink item contains the string ‘twitter’ (e.g. https://twitter.com/my_twitter_handle)
4. If so, assigning a variable called ‘socialName’ that contains the name ‘Twitter’ and assigning a variable called ‘socialIcon’ that contains the class name for the remix icon to display a twitter bird.

Here we’ve only checked for one social media type, but in reality you’d need to repeat this process with an ‘elsif’ for as many companies as you want the user to have the option of adding to the site. I’ll add a download file at the end of this with the finished files containing all the icons I’ve allowed but it will look something like…

{% for socialLink in socialLinks %}    
    {% if socialLink contains 'twitter' %}
        {% assign socialName = 'Twitter' %}
        {% assign socialIcon = 'ri-twitter-fill' %}
    {% elsif socialLink contains 'facebook' %}
        {% assign socialName = 'Facebook' %}
        {% assign socialIcon = 'ri-facebook-fill' %}
    {% elsif socialLink contains 'youtube' %}
        {% assign socialName = 'YouTube' %}
        {% assign socialIcon = 'ri-youtube-fill' %}
    {% elsif socialLink contains 'instagram' %}
        {% assign socialName = 'Instagram' %}
        {% assign socialIcon = 'ri-instagram-fill' %}

… ETC, ETC

At the end of this if/else list we’ll set our ‘socialName’ and ‘socialIcons’ variables to empty if none of our social media conditions are met…

{% else %} 
    {% assign socialName = '' %}
    {% assign socialIcon = '' %}
{% endif %}

Now we need to construct our html so that we can output something usable on the front end. We might want our icons to appear as an unordered list because it’s good for accessibility reasons, so next we’ll add the following code before the closing tag of our for loop…

{% if socialNumber > '' %}
    <li>
        <a href="{{socialLink}}" title="Follow us on {{socialName}}">
            <i focusable="false" aria-hidden="true" class="{{socialIcon}}"></i>
            <span class="visually-hidden">
                Follow us on {{socialName}}
            </span>
        </a>
    </li>
{% endif %}

In this code we are…

1. Checking to see if our ‘socialNumber’ variable has any value. If it doesn’t we won’t do anything, if it does we’ll output our list item. 
2. Adding our html for the list item which consists of a list item wrapping an anchor wrapping an icon and a visually hidden span to make the icon readable to screen readers. 
3. On the anchor tag we’re using adding the current ‘socialLink’ variable as the href, and constructing a title from the ‘socialName’ variable.
4. For the icon we’re using an <i> tag with two accessibility related attributes and then we’re using our ‘socialIcon’ variable as a class.
5. We’ve also added a span tag with a class of ‘visually-hidden’ wrapping some text for screen readers which utilises the ‘socialName’ variable. This text will not be visible on the site because we’re going to add this css to hide it.

We now have some code that loops through our urls and outputs an accessible list item with an anchor that links to the url and an icon appropriate to that social media platform. All we need to do now is wrap our list items in the <ul> tag. To do this we’ll go back to the part of the code that wraps our for loop an add out opening and closing tags either side…

{% if socialNumber != 0 %}
    <ul class=”socialMediaIcons”>
        {% for socialLink in socialLinks %}
             ALL OUR CODE IN HERE
        {% endfor %}
    </ul>
{% endif %}

And, that’s it. All that’s left now is to output the result of this at an appropriate place in our theme using the include tag referencing our ‘_social_icons.html’ file and then style the output appropriately in our sass files…

{% include ‘social_icons’ %}