How to Add More Social Media Icons to Divi

Welcome to Day 19 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

From content modules and advanced design settings, to pre-made layouts and powerful customization options with live previews, Divi is an incredibly versatile theme. You can design your site to look as unique as you want when you’re using Divi, right down to the nitty gritty details – including your social sharing and following icons.

In fact, there’s no need to install any of the other popular social plugins gracing the thousands of other WordPress sites. Divi has you covered; especially if you don’t mind getting your hands a little dirty with some simple code.

Below, you’ll discover how you can enable extra social media icons in Divi’s theme options, how to use the Divi Builder to insert social media icons anywhere on a page or post, and lastly, how to add more social icons to Divi using a little PHP.

Let’s dive right into it!

How to Easily Enable Extra Social Media Icons in Divi’s Footer

The simplest way to add more social media icons to your Divi site involves accessing the Theme Options panel, enabling the options for Facebook, Twitter, Google+, and RSS, then entering your profile URLs into the fields. When you do this, you’ll see them show up as icon links in the footer of your site:

In your WordPress dashboard menu, hover your cursor over the Divi option, then click on Theme Options. Scroll down just past the AWeber Authorization field to the social icon icons.

You’ll see several buttons that are enabled or disabled already. The last four buttons can be used to enable the Facebook, Twitter, Google+, or RSS icons in your site’s footer. You have the flexibility to enable just one, two, three, or all four of them:

If you decide to enable these social media icons, remember to scroll down and put your profile URLs in the appropriate fields. If you forget this step, the icons will show up in your footer, but links won’t open if clicked:

Scroll all the way down to the end of your theme options and click Save. Now you can check out your site’s footer and click on the social icons to test them out!

How to Use the Divi Builder to Add Social Media Follow Modules in Page or Post Content

Sometimes, putting extra social media icons between blocks of text, images, or other content in the body of pages or posts can make a lot of sense. Your About Us page, for example, would be a good page for adding extra social icons to help inform visitors about how to connect with you, and they’ll certainly stand out more than simply linking to your social profiles using regular text.

The amazing Divi Builder tool makes it easy for you to insert social media icons into your pages or posts. It enables you to build your page or post using over 40 drag-and-drop modules – one of which is the Social Media Follow module.

Any time you create or open up an existing page or post in your WordPress dashboard while using Divi, you’ll see a large purple button beneath the title field labeled Use The Divi Builder:

If you have any existing content in the default WordPress editor, you’ll have to transfer it to the Divi Builder to keep using it. However, if you’re creating a new page or post for the first time, you can simply click Use The Divi Builder to start building your page or post from scratch.

You can use the tool to design your page or post however you like using rows, columns, and any of the 40 available modules. If this is your first time using the Divi Builder, you may want to check out this overview first to get a clear understanding of how it works.

When you’re ready to add social media icons to your page, click on Insert Module(s) in the section you’d like your social media icons to show up:

A list of module options will display; you can scroll down toward the bottom to select the Social Media Follow module:

You’ll be asked to choose the social networks you want before you can start customizing them, so click Add New Social Network to select one from the drop-down list, add your profile URL, and optionally, select a specific color for its icon:

Once you’ve added your first social network, you can continue to add further networks by following the same instructions. They’ll all be listed under your General Settings, which you can edit, copy, or rearrange by dragging them around and dropping them in place:

Once you’ve added your social networks, continue onto the General Settings tab to play around with some further customization options. You can change the link shape, text color, the way the page opens, and the option to include a Follow button for all of your icons:

When you’re all done, click Save & Add To Library, or Save & Exit. You can then save and preview your page or post to see how your new social following icons look on your site.

Adding More Social Media Icons to Divi

So, now we know how to use the default Divi settings to add social media icons to our footer, and how to use the Social Media Follow module to place them anywhere else on our pages. However, what if you wish to mix things up and include some options not available in the Divi Theme Options panel to your footer? If you’ve explored the Social Media Follow module, you’ll be aware that Divi ships with 15 social media icons, and with a little bit of code, you can include any of these into your footer.

Divi’s style.css file, located in its top level folder, shows us exactly how many social media icon possibilities the theme includes by default:

The Divi Theme Options panel only includes options for Facebook, Twitter, Google+, and RSS in order not to clutter things up. However, depending on the focus of your site, you might use an entirely different set of social media platforms. Your content strategy may focus around videos, in which case you’d naturally want to include a link to your YouTube channel in your site’s footer, for example. There’s even a Myspace icon thrown into the mix.

In order to make this happen, all you need to do is head over to your Divi theme’s folder and into the includes folder, where you’ll find a file named social_icons.php. Open it up, and you’ll be greeted by an unordered list class named et-social-icons. Within, you’ll find the code for the four existing social media icons. The code for each looks like this:

There are three key elements that need to be set properly in order for this code to work. The first is the et-social-icon et-social-myspace class, where we replace myspace with one of the social media icons from the full list found above. Secondly, we replace the…

…section included in the Facebook example shown earlier. This line of code is used to fetch a URL typed in its corresponding section on the Divi Theme Options panel. In our case we’ll simply type the URL into the code overselves, since there isn’t a section in the panel for additional social media platforms. Finally, we state the name of the social media platform we’re adding within the span tags…

<span><?php esc_html_e('MySpace','Divi');?></span>

…and save the changes to social_icons.php. If you check out your website now, your brand new Myspace icon will greet you from your footer:

Conclusion

When you have Divi’s default footer options, the Divi Builder tool, and a little easily implemented code, there’s no reason you’ll need to install a plugin to add social media icons to your Divi-powered website. Divi gives you full control over how your social icons look and where they show up. To recap:

Access the Theme Options panel to enable any default social media icons on your site.

Use the Divi Builder to add the Social Media Follow module to your posts or pages.

Delve into your Divi PHP files to add further social media icons to your website.

Do you see benefits by having a multitude of social media options available on your site? Let us know by subscribing and becoming part of the conversation via the comments section below!

Article thumbnail image by VKA / shutterstock.com

Divi 100 Day 19

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever! Let the countdown begin.

By Tom Ewer

Tom Ewer is a professional writer, blogger and longtime WordPress enthusiast. He's written over 1,000 articles across the web on the world's most popular Content Management System, and has no intention of slowing down!

Hi Nathan, I post my question here to a better chance to have an answer… Is there a chance that the full wide blog template will be ameliorate in Divi 3.0 ? Because this is clearly “The weak point” of this awesome theme… I mean i would like to have the title at the top of the picture for a more classic and understable layout… like here in the Eleganth Theme’s Blog…
P.S : Sorry for my poor english, I’m french 😉

Verdi
June 18, 2016

Thanks! Would love to see this integrated though (saves time, is cleaner)

Agreed on this. This has always been an obvious miss with Divi that was somewhat addressed with Extra. Social media is a massive part of any online presence these days, and even the extended list of 15 here is limited. What about platforms like Medium and Steller and 500px where there are millions of users (no exaggeration) each day? And MySpace is included on this one?

jnova
July 29, 2016

Did anyone add this already on the forum? I didn’t see it. It needs a like or an upvote or something.

The focus of the post was simply to show how to add more social media icons to Divi – as you’ve pointed out, this is separate to the appropriate modules. Also, you’re right – every theme has the option to add extra icons within the footer, but this is 100 Days of Divi, which is (of course) specifically focused on all things Divi. 🙂

Here’s why I am miffed. You say the post is “specifically focuses on Divi” but it is not. All themes have the same function. What is different in Divi to other themes is the existence of modules and you omitted the social module.

The best way to do this is to extend the array that stores the options. Ive done this on my own website and use it in child themes all the time so my clients have control over this as part of a child theme.

If you guys are interested in a video tutorial I can make one at some point this week. Just let me know if your interested.

Chris
June 18, 2016

Thanks Matthew…I’d be interested for sure!
What’s your website so I (we) could take a look?

Meg Long
June 18, 2016

I would like a tutorial on this! My client recently wanted to add a Periscope icon but Divi doesn’t have that option anywhere, and as stated above, the instagram icon is now out of date so I’d love to be able to replace it.

I initially used the social icons at the top as post the beginning of the post but have since opted to used the square version from the divi builder because it allows for a number of different icons. Love it.

DIVI has so many features. Thanks for this tutorial on how to best utilize the social icons. You mention not wanting to ‘clutter up’ the theme optimizer, but I would think the addition of some very common ones used today would include YouTube, Pinterest, LinkedIn, Instagram, Tumblr. Having to go into the theme files and custom code seems contradictory to the ease of use that DIVI is known for. Any chance the awesome team at DIVI would consider adding these?

Thanks for this. I already had the social media icons set up in my footer bar, but now I have the icons with the Follow next to them on several other pages right below the text. I think this will really help in gaining follows / likes.

To “not clutter up” is a pretty lame excuse for not having more social icons.

It is cluttered because you have a button to enable AND a field for the link. Why the button? Just check if the url field for the network is empty. Show the icon of there is a link and don’t show it if it’s empty. That also removes the problem that “the icons will show up, but links won’t open if clicked”. Divi already does it that way in the person module.

And an even better way to not clutter things up is to apply the same concept of the social follow module to the Divi settings. That way you only need a button to add a social network and when clicked to select the network and enter the url. That’s also how competitor Avada does it.

Currently, Divi is cluttered when it comes to adding social follow icons because there are 4 different ways to add them:
1) Divi options: just 4 networks with a button for each to enable/disable + a field for the url.
2) Person module: just 4 networks and only a field for the url.
3) Social follow module: a single button to add a network and when you do that a drop down to select the network + a field to enter the url.
4) Ok, not Divi, but the Monarch plugin uses yet another way. Almost like #3 but still different.

It looks like 4 different programmers needed to do something with social follow icons and then each one invented the wheel all over again. Please make this more user friendly in Divi 3 by using the method of #3 for all places that need social follow icons. While at it, please also include a ‘custom’ option for which you can select your own icon (like you can for the blurb icon) + title + url.

John-Pierre, you should mention this in our Theme Suggestions forum – https://www.elegantthemes.com/forum/. There’s plenty of you that would like to see changes, and posting there is a great way to make your voice heard!

Erik
July 25, 2016

And a “new tab? or just fill the one you’re on?” option would be a great idea.
People get lost on facebook and such, so if they close a tab it would be nice to see my site still being there.

Rebekah Ralston
June 18, 2016

I didn’t notice where you said you should only do this in a child theme or it will be overwritten on theme update? Which, will only lead you to frustration when you have to do it all over again.

Thanks Tom, great article not many people know how easy it is to add social media icons to their header and footer via a child theme.

A lot of Divi users are however not as comfortable with code as others, so a more integrated solution is often better. Also there are some Social Media icons that Divi doesn’t support out of the box. That’s why I wrote the Social Media additions plugin, as it allows a user to add additional social media icons right from the Divi Theme Options page.

Is it just me, or does this post highlight a couple of glaring weaknesses with Divi? I agree with one comment that it seems different Divi developers created different approaches to the Social Follow. But what puzzles me is that, with the incredible importance of social media linking, and the enormous list of social media outlets, why is the entire Divi approach so clunky? This is fundamentally important and it ought to be a simple, intuitive process to manage social icons, including, the ability to simply add new social icons for services you haven’t thought of today! That is my humble opinion.

Manu, it appears your message was incomplete. However, head on over to our forums (https://www.elegantthemes.com/forum/) where other users may have run into the same issue and can offer a solution.

Sarah
June 20, 2016

Hi there. Think this should be included in the Theme Customizer in Divi 3.0! It is a weak point and to make life easier. We shouldn’t have to add custom code for the major social networks – they are needed by most sites after all! – Facebook, Twitter, LI, Google+, Instagram and Pinterest.

Also I think we should be able to remove the ‘Powered by WordPress/Elegant Themes’ link in footer more easily as I don’t want that on my website and nor would any clients!

We’ve not heard of this happening – it’s wise to double-check the code, especially if you’re copying and pasting. Other than than, try posting your issue in our forums – https://www.elegantthemes.com/forum/. Other users could have had the issue in the past, and may be able to offer a solution. Good luck. 🙂

Rebekah Ralston
June 21, 2016

Andre,
Are you keeping the file structure the same? Your child theme will need to have an includes folder and then put your social_icons.php file in it.

Great post – but I saw the sentence – “we only show TW, Fbk, & G+ to keep things uncluttered” – this makes it hard for those who don’t code. All the ones you already have in the divi system are GREAT! – I so wish that you could just have an easier way to access the ones you alrady have coded options for – at LEAST LinkedIn, Pinterest, Instagram & Youtube. I will go to the suggestions page. https://www.elegantthemes.com/forum/. – this is one of my #1 request from clients – and I appreciate the how to info here, I soooo with this were easier. Thanks!

You could mention this in our Theme Suggestions forum as other users have – https://www.elegantthemes.com/forum/. All suggestions are read, and you could end up seeing it implemented in a future update. 🙂

mehdi
June 21, 2016

Hello,

I would like to add Tripadvisor icon…how can I do it if I want the same design result?

Ok… But do we have the ability to add these new icons as quickly as we can with FB, TW, RSS etc.? For a client that has zero coding knowlege, they find it baffling that I need to add their icons for them… Still.

It’s not as quick, but still effective! If it’s something you’d love to see in a future version of Divi, you can always let us know in our Theme Suggestions forum – https://www.elegantthemes.com/forum/

Pedro
July 20, 2016

Is there a way to do it without using a child theme? Thanks for any help!

Hey Tom, my footer code looks a bit different – perhaps due to updates. Maybe you can help me implement an additional icon (Youtube)? I have Facebook and Google+ enabled, and would like to add Youtube after them. Please email me at the address I’ve listed when you have a moment.

There is no ‘social media icons’ folder. You are looking for the ‘social_icons.php’ file in the ‘includes’ folder. Rather than changing the file in the Divi theme, you should create a Divi-child theme. Then create an includes folder, copy the social_icons.php file into this folder, and edit the file there.