Social Icons API

Make’s Social Icons feature enables the user to add links to their online profiles to the header and/or footer of their site. The links are represented by icons that correspond to the services providing the online profiles. Make uses Font Awesome as the source for these icons, and most common services have an icon available.

A developer can also replace the icon for a particular service, or add additional services/icons using the Social Icons API. Each icon definition consists of a URL pattern that corresponds to an array of icon properties. An icon definition looks like this:

array(
	'twitter.com' => array(
		'title' => _x( 'Twitter', 'brand name', 'make' ),
		'class' => array( 'fa', 'fa-fw', 'fa-twitter' )
	),
)

Each definition is required to have a title property, which is the name of the service, and a class property, which is an array of the CSS classes that will be added to the HTML element when the icons are rendered on the site. The CSS classes allow styles to be applied to the element that displays the icon.

---

Example: Using Vimeo’s alternative icon

Some of Font Awesome’s brand icons have multiple versions. This example shows how to update the icon definition for Vimeo to use the alternative icon version.

function childtheme_change_vimeo_icon() {
	make_update_socialicon_definition(
		'vimeo.com',
		array(
			'class' => array( 'fa', 'fa-fw', 'fa-vimeo-square' ),
		)
	);
}

add_action( 'make_socialicons_loaded', 'childtheme_change_vimeo_icon' );

In the above example, the make_update_socialicon_definition() function takes two parameters. The first is the pattern that will be matched against a social profile URL to determine whether this is the correct icon to use for it. The second parameter is the array of icon properties. Since this is updating an existing icon, only the property that is changing needs to be included.

---

Example: Adding a new icon definition

Maybe you want to include an icon that Font Awesome doesn’t have (yet). Using the same make_update_socialicon_definition() function, you can add a new icon definition:

function childtheme_add_myspace_icon() {
	make_update_socialicon_definition(
		'myspace.com',
		array(
			'title' => _x( 'MySpace', 'brand name', 'make-child' ),
			'class' => array( 'myspace-icon' ),
		)
	);
}

add_action( 'make_socialicons_loaded', 'childtheme_add_myspace_icon' );

Note that for the above example you would need to include rules in your child theme’s stylesheet that target the .myspace-icon selector and add your icon image.