WordPress | ACF | Social Media Links using Advanced Custom Fields and FontAwesome

social.php

<?php
if( have_rows('social_media', 'option') ):
	echo '<div class="container social my-4">';
	echo '<p class="follow mb-0 align-middle">Follow us</p>';
	echo '<ul class="nav align-middle">';
	while ( have_rows('social_media', 'option') ) : the_row();
		$socialchannel = get_sub_field('social_channel', 'option');
		$socialurl = get_sub_field('social_url', 'option');
		echo '<li class="nav-item">';
		echo '<a class="nav-link" rel="nofollow noopener noreferrer" href="' . $socialurl . '" target="_blank">';
		echo '<i class="fa fa-' . $socialchannel . '" aria-hidden="true"></i>';
		echo '<span class="sr-only hidden">' . ucfirst($socialchannel) . '</span>';
		echo '</a></li>';
	endwhile;
	echo '</ul>';
	echo '</div>';
endif;
?>

Social media links

This snippet uses Advanced Custom Fields repeater field (PRO version only), within an options page to create a social media list.

Symbols/icons via Font Awesome.

The fields

Create the following field:

• Social media | social_media (Repeater)

With the following sub-fields:

• Social channel | social_channel (Select) [See select options below]
• Social URL | social_url (Url)

Use this list for your channel select Choices:

facebook : Facebook
flickr : Flickr
instagram : Instagram
linkedin : LinkedIn
pinterest : Pinterest
skype : Skype
spotify : Spotify
tumblr : Tumblr
twitter : Twitter
vimeo : Vimeo
youtube : YouTube

CSS

Basic CSS here if you're not using Bootstrap:

div.social ul {margin:0; padding:0; list-style:none}
div.social ul li {display:inline-block; font-size:2rem; margin:0 0.5rem}
div.social ul li a {color:gray}
div.social ul li a span.hidden {display:none}
div.social ul li a:hover {color:black}

Updated in September 2017, when I realised the previous iteration was bloated.
This includes extra Bootstrap styles which could be useful, if not remove them and use the basic CSS above to get started.

Also note span.hidden is probably better not to be set to display:none as it renders it completely invisible to screen readers, instead go for this:

span.hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

Some more info on how to install this would be great like what type of fields each should be... :)

Hey @DecoGrafics, sorry it was a bit vague, I've updated the first comment to include more detail. I hope it helps.

Hi, where to save social.php file? inside child-theme? in root?
Sorry I am a noob

appreciate it!

Great work! Awesome write up as well! I did something like this today on the job using your example. However, I used fa-youtube-play instead.

                <?php
                if (have_rows('social_media', 'option')):

                    echo '<div class="social-block">';

                    while (have_rows('social_media', 'option')) : the_row();

                        $socialchannel = get_sub_field('social_channel', 'option');
                        $socialurl = get_sub_field('social_url', 'option');

                        echo '<a rel="noopener" target="_blank" href="' . $socialurl . '"><i
                                class="fa fa-' . $socialchannel . '" aria-hidden="true"></i><i class="fa fa-' . $socialchannel . ' two"
                                                                                aria-hidden="true"></i></a>';
                    endwhile;
                endif;
                ?>

Nice work @theSalafee. Glad it helped!