Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add A Bluesky Social Follow Icon Or Social Sharing Button In Divi

Nelson Miller Profile Orange
In this Divi tutorial I will show you how to add a Bluesky follow icon in the Divi Social Follow module or a social sharing button with our Divi Social Sharing Buttons Maker plugin.

▶️ Please watch the video above to get all the exciting details! 👆

How To Add A Blueskly Social Follow Button In Divi

This first section of the tutorial is about adding a social follow button, which uses the built-in Divi “Social Follow” module. This will display the Bluesky logo in an icon that links to your Blueskly profile.

The second part of the tutorial will be about adding a social sharing button, so if that is what you need, go ahead and skip below.

1. Enable Font Awesome In Divi

Font Awesome is a web font that offers a vast selection of both free and paid icons for your use. To get started, ensure that you have Font Awesome enabled on your site. While Divi includes some level of Font Awesome integration, you will need to install the free Font Awesome plugin to access a broader range of icons, such as those by brands like Bluesky. Additionally, you can directly integrate your own Font Awesome setup into your site. 

2. Add the Divi Social Follow Module

If you are following this tutorial, I assume you have already added the Divi Social Follow module to your layout, ideally in a Divi Theme Builder template like a header or footer. If you haven’t done so, please add it now, and make sure to include the Twitter social network.

Please note that this tutorial will not apply to you if you are using the old default Divi header or footer (not the Theme Builder). I highly recommend upgrading your old header to the Theme Builder header to take advantage of many new features, such as the ability to customize the social icons in Divi.

3. Add An Unwanted Placeholder Icon

This tutorial will guide you in adding a placeholder icon for a network that you don’t intend to use. We will later replace that icon with one for Bluesky. This step is straightforward: simply add a new network that you would not use otherwise. In the following step, we will replace that icon.

4. Replace The Placeholder Icon With Bluesky

We are creating this tutorial because Divi currently does not include the Bluesky icon by default. However, Font Awesome has recently added the Bluesky icon, allowing us to use it on your website. The Bluesky icon is available for free in the “Brands” section of icons, and its Unicode value is e671. This value determines which icon is displayed.

To incorporate the Bluesky icon, you will need to add the appropriate code to the icon’s content property in the Divi Social Follow module. Specifically, we’ll find the correct selector to update both the content and font-family properties. I have already prepared this for you, and you can use the snippet provided below.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*replace placeholder icon with Bluesky in Divi Social Follow module*/
.et-social-behance a.icon:before {
	content: "\e671";
	font-family: "Font Awesome 6 Brands" !important;
}

6. Update The Background color

When you add a network in the module, Divi automatically applies the default brand color of the selected icon. However, you can easily customize this. The brand hex color for Bluesky is #0085FF.

replace the twitter blue background color with X black in the Divi Social Follow module

7. Replace The Hover Tooltip Text Using jQuery

We also need to update the tooltip that appears when you hover over the placeholder social network icon. Currently, it says “Follow on [network name],” but we want to change that. To do this, we’ll use a snippet of jQuery code that can be added to your website.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
 jQuery(document).ready(function(){
    jQuery('.et-social-behance a').prop('title', 'Follow on Bluesky');
 });
</script>

The final result from this tutorial will look like this:

final result of replacing Divi Twitter icon with with X

How To Add A Blueskly Social Sharing Button In Divi

This section of our tutorial is about adding a social sharing button. This will allow visitors on your website to share your page or post to Bluesky. 

1. Install The Divi Social Sharing Buttons Maker Module

The first step to using Bluesky in our Divi Social Sharing Buttons Maker module is, of course, to make sure the plugin is installed. If you are new to this plugin, it basically allows you to add social networks as buttons that visitors can click to share the page or post with others. It’s a very simple-to-use plugin that works just like regular Divi modules, making it easy for people to share your content on social media platforms to increase engagement with your site.

2. Add The Module To Your Layout

The most common place to add a socilar sharing buttons is to your blog posts, so this would mean adding our Social Sharing Buttons Module to the Theme Builder template for All Posts. 

3. Add The Bluesky Social Network

The Divi Social Sharing Buttons Maker module has 30 of the most popular social networks to choose from, including Bluesky. You can simply select Blueysky from the dropdown, and that’s it! You’re done, unless you want to change the design.

4. Adjust The Design And Layout As Needed

If you want to change the layout of the buttons or adjust the design, you can easily do that with a huge range of design options in the module. You can set the number of buttons for each responsive breakpoint, change the layout view, or adjust spacing, borders, colors, text, etc. however you prefer.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0