Elementor Dynamic Social Medias

by

Dynamic Social Medias for Elementor free version will allow you to display social media icons with their related link on a blog post, page or sidebar with author’s or user’s social media links.

This component use the power of WordPress with the standard Custom Fields and the features of Advanced Custom Fields knows as ACF.

Table of Contents

Add the necessary fields in the user profile

Display dynamiquely social icons on a blog post, with author’s or media links.
If you do not have the fields in the user profile, you have to create it.
Use plugin for add extra user fields or simply add the bellow code in your ‘functions.php‘ theme or in a child theme.
After that you have to fill some or all fields for each user profile.
Pay attention to the spelling of the social network’s names.

function eac_add_hide_profile_fields($contactmethods) {

	$contactmethods['twitter'] = 'URL Twitter';
	$contactmethods['facebook'] = 'URL Facebook';
	$contactmethods['instagram'] = 'URL Instagram';
	$contactmethods['linkedin'] = 'URL LinkedIn';
	$contactmethods['youtube'] = 'URL YouTube';
	$contactmethods['pinterest'] = 'URL Pinterest';
	$contactmethods['tumblr'] = 'URL Tumblr';
	$contactmethods['flickr'] = 'URL Flickr';
	$contactmethods['reddit'] = 'URL Reddit';
	$contactmethods['tiktok'] = 'URL TikTok';
	$contactmethods['telegram'] = 'URL Telegram';
	$contactmethods['quora'] = 'URL Quora';
	$contactmethods['twitch'] = 'URL Twitch';
	$contactmethods['github'] = 'URL Github';
	
	return $contactmethods;
}
/** Contact User Social Networks filter */
add_filter('user_contactmethods', 'eac_add_hide_profile_fields', 10, 1);

Source code to add user profile fields with Syntax highlighter

User Networks Fields
Fill some or all fields for each user profile

Modify the user profiles with the ACF fields to display social media icons

First you have to create a new group, ‘User social media’ in our case whose fields will be added to each user’s profile.

  • The Field Label is the name of your field, which helps you organize your fields
  • The Field name must be exactly the same as in the list below
  • Choose Text as Field Type
  • Scroll down to the Location area and make sure you select User Role
List of supported Social Medias

twitter facebook
instagram linkedin
youtube pinterest
tumblr flickr
reddit tiktok
telegram quora
twitch github

And as for the standard Custom Fields, you will find the Social Networks fields in each user profile

ACF User social media fields
ACF User social media ields location

Add dynamic content for social media icons

  • Select the Text Editor widget and the dynamic icon in the upper right corner of the field.
  • Select entry “Author/Author’s social networks“
  • Select the Social Medias in the list
Author's Social Icons
Author's social media icons
ASN Dynamic tag
Text Editor select the dynamic icon
ASN Author tag
Select Author/Author’s social networks
ASN Selecting tag
Select social networks tags

Customize the social media icons

If you want to customize media icons, you need to apply specific CSS code.

  • To do this, select the corresponding Text Editor
  • Click Advanced tab and open the section ‘EAC custom CSS’
/* Container class Flex */
selector .dynamic-tags_social-container {
    font-size: 25px;
    border: none;
    text-align: center;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
    padding: 8px;
}
/* Icon class */
selector .dynamic-tags_social-icon {
    width: 40px;
    height: 40px;
    line-height: 38px;
    border: 3px solid blue;
    border-radius: 8px;
    display: inline-block;
}

2 thoughts on “Elementor Dynamic Social Medias”

    • Hi @Skyler
      Yes the component ‘Dynamic Social Medias’ is still wordking
      In progress, we are implementing the ACF features with which you will be able to add the fields in the user profile.
      The next version (v1.7.6) will have it and will be published before the end of this week.
      The documentation will naturally be updated.
      Rgds EAC Team

      Reply

Leave a Comment