Social Network Management in Craft

Looks like this article is over a year old, so some of the technical solutions or opinions may be a bit outdated now.

Build any website these days, and you'll likely need to include the client's social network links somewhere on your page – usually in the footer.

Over the years I've tried several different approaches to managing and templating these links in my fave CMS Craft, but never been totally satisfied. Well here's an approach I'm currently using, and I thought I'd share it with you.

Custom Fields

First off, you'll need to create a custom field(s) to hold addresses to your social networks. You might do these as entries, but in this example I've just created a bunch of text fields and added them to a Social Networks group in Globals.

Templating

With your fields setup, and data added, it's time to create a template for your social networks and include it in your footer (or wherever) like this:

{% include "_includes/socialNetworks" only %}

Now add the following to your social networks template:

{% set networks = [] %}
{% set networks = networks|merge({
	1: { label: "Facebook", url: socialNetworks.facebook, icon: "facebook" },
	2: { label: "Google+", url: socialNetworks.googlePlus, icon: "googleplus" },
	3: { label: "Instagram", url: socialNetworks.instagram, icon: "instagram" },
	4: { label: "LinkedIn", url: socialNetworks.linkedin, icon: "linkedin" },
	5: { label: "Pinterest", url: socialNetworks.pinterest, icon: "pinterest" },
	6: { label: "Twitter", url: socialNetworks.twitter, icon: "twitter" },
	7: { label: "Vimeo", url: socialNetworks.vimeo, icon: "vimeo" },
	8: { label: "YouTube", url: socialNetworks.youtube, icon: "youtube" }
}) %}

{% if networks|length %}
	<ul class="socialnetworks" aria-label="Social networks">
		{% for network in networks %}
			{% if network.url %}
				<li class="socialnetwork">
					<a href="{{ network.url }}" rel="external" aria-label="Follow us on {{ network.label }}">
						{{ source('_icons/' ~ network.icon, ignore_missing = true) }}
					</a>
				</li>
			{% endif %}
		{% endfor %}
	</ul>
{% endif %}

Alrighty, so firstly we create an array called networks ready to hold our field data. Then we merge in some values:

• The network name
• The Globals custom field value
• A template used for an inline SVG

Finally, we loop through our networks array (if it isn't empty), outputting our values.

Note the {{ source }} Twig function. This returns the content of a template without rendering it, so it's ideal for including inline SVG icons. If you prefer you could instead use a GIF or PNG, or maybe just a text link.

Summary

So this is just one approach, and next time I may just use entries instead of Globals fields for a bit more flexibility in terms of ordering/adding/removing etc... Still, I hope this is useful to somebody. How do you handle social network links?

End