R32: How to add Social Sharing to the Divi Blog Module

Update: Due to changes with the way the Divi modules PHP files are structured, this method no longer works correctly. I will update this post when I get time but for the time being comments are closed.

Recipe #32 is the result of a question from Sara Gorsky in the Facebook groups. How to add social sharing to the Divi blog module.

When I saw this question I was immediately intrigued and my first thought was yes, Monarch can do this. And I am sure it can but after a bit of playing its not all that easy and in order to make this recipe as simple to implement and edit as possible, I have taken a different route.

I have chosen to use the free Social Share Buttons by Supsystic plugin for this Recipe but you can use any social share plugin you like, with one caveat; it must provide a shortcode to place the sharing icons as that is how we are going to implement the feature in the Divi blog module. Monarch currently only provides a shortcode for the social follow feature, not social share. But if that changes in future (which I hope it does as I love Monarch) then it should be a simple edit to swap to Monarch.

There are ways to edit a plugin and add in a shortcode but that is a little beyond my skill set at this point in time

The best thing about this method is that once the shortcode is in place, all of the appearance editing is done via the social share plugin. I did try a few but the Social Share Buttons by Supsystic plugin proved to have a nice balance between simplicity and features as well as displaying nicely on the blog module after only editing a few settings.

So let’s get cooking!

Ingredients

The latest version of the Divi Theme from Elegant Themes.

An active child theme. We are going to be adding a new custom PHP file.

FTP or CPanel access to upload your new files.

The Social Share Buttons by Supsystic or a social sharing plugin that includes a shortcode for placement.

Cooking time

This should take you around 20 minutes.

Preparation

The first thing you will want to do is BACK UP before you begin, it’s not a good idea to start editing PHP without a back up

Next we need to install and activate our chosen social sharing plugin. As I said I am using Social Share Buttons by Supsystic but install and activate whichever plugin you feel comfortable with, you will just need to play around with the plugin settings to get the look you want.

I won’t go into detail on this as the plugin is pretty self explanatory and also you may chose to use a different one but below are the settings I am using in this plugin to achieve the look you see in the demo.

Now grab the shortcode from the plugin and save it somewhere as we are going to need that in a little while.

OK, that’s our prep done.

Method

Next we are going to set up a new library layout. Navigate to Divi > Divi Library and click Add New.

In the box that opens give your layout a name and select Section from the template type dropdown, then tick the Global checkbox and click Submit.

Now open up the section settings and on the Design tab set all the padding to zero then save & exit

Next, open up the row settings and set Make this row fullwidth to Yes, Use custom gutter width to Yes and set the Gutter width to 1.

Scroll down to the bottom and set all Custom margin and Custom padding to zero, then save & exit.

Lastly, add a single column and a text module to your row, and in the text editor of the module, paste in the shortcode from your social sharing plugin that we saved earlier. When done save & exit and be sure to update/publish your library layout.

So far so good. Now it’s time for our PHP.

Create a new folder inside your child theme called custom-modules, so your structure should look something like this:

Then inside the custom-modules folder, create a new file called cbm.php

Next, open up the unzipped folder for the latest version of Divi. As of writing, I am using version 3.0.60.

Navigate to Divi > Includes > Builder and open the main-modules.php file

class ET_Builder_Module_Blog extends ET_Builder_Module {

new ET_Builder_Module_Blog;

<?php

class ET_Builder_Module_Blog extends ET_Builder_Module {

class DS_Builder_Module_Blog extends ET_Builder_Module {

new ET_Builder_Module_Blog;

new DS_Builder_Module_Blog;

Now, around line 1048 in your cbm.php, look for this line of code:

This will place our social share library layout directly above the post excerpt in the blog module.

Above excerpt:

If you want it below the post excerpt, you can instead paste it directly below echo ‘</div>’; around line 1082 in your cbm.php file.

Below excerpt:

You will need to change the number (48) to the ID of the library layout you created earlier. You can do this by opening up the layout in the library and looking at the number displayed after ‘post=’ in the URL in your browser.

Save and close your cbm.php file.

If this part has you a bit flustered, then you can just use the code in the toggles below. Open it up and paste the entire contents from the toggle into your empty cbm.php file. Choose the toggle based on whether you want the share icons above or below the excerpt.

Now we need to add a function to call our custom blog module. Open up functions.php in your child theme and paste in the following code then save and close the file.

function ds_social_share_blog() {
    if ( ! class_exists('ET_Builder_Module') ) {
        return;
    }
   get_template_part( 'custom-modules/cbm' );
    $cbm = new DS_Builder_Module_Blog();
    remove_shortcode( 'et_pb_blog' );
    add_shortcode( 'et_pb_blog', array($cbm, '_shortcode_callback') );
}
add_action( 'wp', 'ds_social_share_blog', 9999 );

What we are doing here is telling WordPress to replace the default Divi Blog Module with the custom one we just created in our cbm.php file.

Then save and close functions.php.

Finally, we need to upload our modified and new files. So in your FTP program or cPanel, upload your modified functions.php and your custom-modules folder containing your cbm.php file to your child theme folder.

If you are uploading via FTP, your structure should look like this (you may have more files in your child theme):

That’s it, now refresh your page and your Divi blog module should now show social sharing icons as you have set them in whichever plugin you are using.

You may need to play around with the plugin settings to get it looking exactly how you want. And if you want some extra spacing you can do this by adjusting the padding and margin in the Design tab of the Row settings for the section you created in the Divi Library.

Wow! I got through a whole recipe without a single bit of CSS. That’s got to be a first

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X