Skip to main content

Social Network Management in Craft

by Ian Ebden in , , .

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:

Now add the following to your social networks template:

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?


Thanks for reading



Craft CMS Support Plans

Our support plans are ideal for Craft CMS sites that need regular updates, improvements, and someone technical keeping an eye on things.

12 years Craft experience Regular Craft and plugin updates Custom plugin development Cloud hosting Backups and 24/7 monitoring Performance audits Technical SEO Pre-booked dev time Troubleshooting

We should talk

Tell us about what you’ve got, what’s not working, and where you want to get to.

Make Contact No recruitment agencies please.