Join our HiFi mailing list to receive the latest news & updates

Social Media Links

Overview:

The point of this snippet is to create a folder of links in your site tree that correspond to a site's various social network presences.  This makes it easy for a client to update and control their social network links.

Requirements:

No external requirements.

Components:

Template:

<nav id="social">
    {% for link in hifi.get({type: 'link', inMenu: true, orderBy: 'ordinal', parent: box.id }) %}
    <a{% if link.newWindow %} target="_blank"{% endif %} href="{{ link.url }}">
        <img src="{{ link.custom.social_links.icon }}">
        {{ link.title }}
    </a>
    {% endfor %}
</nav>

CSS:

#social {
    position: relative;
    width: 250px;
}
    #social a {
        display: block;
        text-decoration: none;
        margin-bottom: 5px;
        color: #444;
    }
        #social a img {
            display: inline;
            vertical-align: middle;
            margin-right: 10px;
        }

Installation:

To install this snippet, you first need to create a folder in your site tree that you will use to hold the social links.

Then you need to create a custom fieldset and apply it to that folder. It should be called 'Social Links' and have a single 'File' field called icon.  You can set depth to "1" and applies to self to "no".

Finally, you need to update the template so that it is pulling from the correct folder url.

Comments

  1. There are no comments yet.