Social Network Management in Craft

in #craftcms6 years ago

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?

Sort:  


Exclusive 30 days free upvotes to your every new post. No need to send any kinds of steem or sbd its full free service. we have paid service too so please check them too. Active the free upvote service and learn more about it here : http://www.steemitfollowup.cf

Congratulations @designkarma, you have decided to take the next big step with your first post! The Steem Network Team wishes you a great time among this awesome community.


Thumbs up for Steem Network´s strategy

The proven road to boost your personal success in this amazing Steem Network

Do you already know that awesome content will get great profits by following these simple steps that have been worked out by experts?

Congratulations @designkarma! You received a personal award!

1 Year on Steemit

Click here to view your Board of Honor

Do not miss the last post from @steemitboard:

Saint Nicholas challenge for good boys and girls

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @designkarma! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 62205.55
ETH 2397.85
USDT 1.00
SBD 2.50