How to Create Divi Social Share Buttons without having to install a Plugin

Post By : Jim Monkhouse
Today I’m going to show you how simple it is to create social share buttons for the Divi Wordpress Theme, without having to install “yet another” plugin.

Why are social share buttons important?

Everyone knows that Social Media provides an amazing opportunity to promote our product or service. By adding simple social sharing buttons to our website content we give our users the option to promote our content with just one click.

I’m going to show you two methods of how to quickly and easily create social media share buttons using the Divi theme for WordPress.

Method one – Creating social share buttons for Divi Modules

The first one is perfect for if you want to use Divi modules with built-in links such as buttons, images, and blurbs. This method is lightweight and highly customizable and most importantly takes no technical skills.

Method two-  Creating social share buttons using customisable  HTML anchor tags

The second method is best for people who want complete control over the design of the “social media share link” and have at least a working knowledge of working with HTML and CSS.

Why can’t I just use a plugin to add social share buttons? 

There are many social share plugins available out there, but they have a few drawbacks such as

  • Plugins add bloat to your website, slowing the load speed
  • Plugins can cause security vulnerabilities
  • Plugins can limit the customization of your design, and make your website appear “generic”.
  • Plugins can be overkill if you’re just using one aspect of the plugin functionality. 

When it comes to something as simple as social link sharing, I personally think it’s best to just do it yourself. It will take you 5 – 10 minutes to create some buttons using the Divi Builder.

Here’s a video running you through both Methods of creating “social share links”. I recommend watching this video, before you try this tutorial.

Method 1 – Creating Social share buttons for Divi 

In this tutorial, we are going to use the “Divi Button Module” to create social share links for the following social networks. 

  1. Facebook
  2. Twitter
  3. Pinterest
  4. LinkedIn
  5. Email

Step One -> Design the button template

Create a new button on any page or post, using the “Button Module”

In the content tab of the Button Module, add some text such as “share on Facebook and then click on ”Module settings Content > Link > Button Link Target > “In the new window”

Open the design settings for the button module and scroll down to Button and choose “Use Custom Styles for Button” and add all the following styles. 

  • Button settings “Design” > Button Text Size : 16px
  • Button settings “Design” > Button Text Color : #ffffff
  • Button settings “Design” > Button Background Color : #3b5998
  • Button settings “Design” > Button Background Hover : #153f99
  • Button settings “Design” > Button Border Width : 4px
  • Button settings “Design” > Button Border Color : #3b5998
  • Button settings “Design” > Button Border Color : #153f99
  • Button settings “Design” > Button Border Radius : 50px
  • Button settings “Design” > Button Font Weight : Semi Bold
  • Button settings “Design” > Button Icon : Choose Facebook
  • Button settings “Design” > Button Icon Color : #ffffff
  • Button settings “Design” > Button Icon Placement : Left

The next step is to duplicate this button four more times, so we’ll have 5 buttons in total. And then add the following designs and settings.

Facebook Button

  • Button settings “Design” > Background colour : #3b5998
  • Button settings “Design” > Border color :  #3b5998
  • Button settings “Design” > Background hover color : #153f99
  • Button settings “Design” > Border hover color : #153f99
  • Button settings “Design” > Module icon : Facebook
  • Button settings “Advanced” > CSS ID & Classes > Class : “fb-social-share”

Twitter Button

  • Button settings “Design” > Background colour : #00aced
  • Button settings “Design” > Border color :  #00aced
  • Button settings “Design” > Hover Background color : #00a1f2
  • Button settings “Design” > Border hover color : #00a1f2
  • Button settings “Design” > Module icon : Twitter
  • Button settings “Advanced” > CSS ID & Classes > Class : “twitter-social-share”

Pinterest Button 

  • Button settings “Design” > Background colour : #cb2027
  • Button settings “Design” > Border color :  #cb2027
  • Button settings “Design” > Hover Background color : #cc0006
  • Button settings “Design” > Border hover color : #cc0006
  • Button settings “Design” >Module icon : Pinterest
  • Button settings “Advanced”  > CSS ID & Classes > Class : “pinterest-social-share”

LinkedIn Button

  • Button settings “Design” > Background colour : #007bb6
  • Button settings “Design” > Border color :  #007bb6
  • Button settings “Design” > Hover Background color : #0061a3
  • Button settings “Design” > Border hover color : #0061a3
  • Button settings “Design” > Module icon : LinkedIn
  • Button settings “Advanced”  > CSS ID & Classes > Class : “linkedin-social-share”

Email Button 

  • Background colour : #08aa00
  • Border color :  #08aa00
  • Background hover color : #009320
  • Border hover color : #009320
  • Module settings Advanced > CSS ID & Classes > Class : email-social-share
  • Module icon : Email
  • Button settings “Content” > Link > Button Link Target > “In the same window”

Now we have all the buttons setup and it’s time to add the “share links” to the buttons

Divi ships with jQuery, so we can take advantage of that .

Copy the jQuery code below and then add it to the “Footer” section in your Divi Builder options integrations.

<script type="text/javascript">

// Setup Function
var $jq = jQuery.noConflict();
$jq(document).ready(function() {

// Facebook
var FB_share = ""+encodeURIComponent(document.URL)+"&t="+encodeURIComponent(document.URL);


// Twitter Share
var twitter_Share = "" + encodeURIComponent(document.title)+":%20 "+encodeURIComponent(document.URL);


var pin_Share = ""+encodeURIComponent(document.title)+"&media="+encodeURIComponent(document.title)+"&description="+encodeURIComponent(document.URL);


var Linkedin_Share = ""+encodeURIComponent(document.URL)+"&title="+encodeURIComponent(document.title);
this.href=Linkedin_Share ;

var email_Share = "mailto:?subject="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
this.href=email_Share ;

var whatsapp_Share = "whatsapp://send?text="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
this.href=whatsapp_Share ;



Method 2

This is an alternative method for creating “Social share links” which gives you a bare-bones share link, which you can then style using your own custom HTML and CSS.

Just add the following code directly to a text module, add your own classes, Id’s and icons and style as you like to match the design of your website.

<a class="w-inline-block social-share-btn fb" title="Share on Facebook" href=";t=" target="_blank" rel="noopener noreferrer">

<a class="w-inline-block social-share-btn tw" title="Tweet" href="" target="_blank" rel="noopener noreferrer">

<a class="w-inline-block social-share-btn pin" title="Pin it" target="_blank" rel="noopener noreferrer">

<a class="w-inline-block social-share-btn tmb" title="Post to Tumblr" href=";u=&amp;t=&amp;s=" target="_blank" rel="noopener noreferrer">

<a class="w-inline-block social-share-btn email" title="Email" href="mailto:?subject=&amp;body=:%20" target="_blank" rel="noopener noreferrer">

<a class="w-inline-block social-share-btn lnk" title="Share on LinkedIn" href=";url=&amp;title=&amp;summary=&amp;source=" target="_blank" rel="noopener noreferrer">LinkedIn</a>

<a class="w-inline-block social-share-btn redd" title="Submit to Reddit" href=";title=" target="_blank" rel="noopener noreferrer">Reddit</a>

<a href="whatsapp://send?text=The text to share!" data-action="share/whatsapp/share">Share via Whatsapp</a>

To Summarise

I hope this tutorial been useful in showing you how to build social share buttons without having to install yet another plugin. As always, if you have any questions, leave a comment below and I’ll get back to you

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.


  1. Phil Botha

    Thought you might want to amend the following with but hide on desktop for messenger on mobile and ipad.

    Thanks so much for the great article, found it very helpful.

    // messenger
    var MSNGR_share = “fb-messenger://share?link=”+encodeURIComponent(document.URL)+”&app_id=”+encodeURIComponent(document.URL);


    • Jim Monkhouse

      Thanks for the comment Phil, that’s really useful!

    • Gery

      great idea, unfortunately this does not work. In fact it shoots down the whole thing when implemented.

  2. Thomas

    Thank you so much for this! Only the Pinterest jQuery does not seem to work.

    • Jim Monkhouse

      Thanks for the heads up Thomas, I’ll look into it and revise the code, Cheers!

      • Kumar

        Thanks Jim for this. Very helpful.

        On Pinterest, for some reason, the image selection comes as broken – so unable to choose the image to pin. (I am logged tried on my website and also the above link). Am I missing something here?

      • Julie Pedraza

        Hi Thomas— Thanks for this super helpful post. I too am having an issue with the Pinterest image not appearing via the share link. I’m logged into Pinterest, but now image appears to pin. Any pointers? Much appreciated!

  3. Maria

    Hi! In case I want to apply Whatsapp? It’s different code in web than in mobile?

    • Jim Monkhouse

      Hi Maria

      Thanks for your comment!

      I’ve updated the code block to include whatsapp.Give it a try and let me know what you think?

      • Adriano

        Hey Jim! Thank’s for sharing this content!
        The Whatsapp code it’s not sending the content URL, only the title… Can you help with it?

  4. Kevin

    Very useful tutorial, thank you very much! It works very well but when I share my post on fb, it’s my logo that appears in the fb post, would it be possible to make another image appear?

    • Jim Monkhouse

      Hi Kevin,

      Thanks for your comment,

      Facebook will pull the data from the page your sharing, so you should have the “featured image” or OG meta tags specified image appear on your share link. Thanks

    • Jim Monkhouse

      Thanks for your comment Michael, but as of now instagram does not offer an open sharing endpoint to receive arbitrary URLs or media as far as I know. I’ll be sure to update if if they change their API access. Thanks!

  5. Debbie

    Thank you Jim. Easy to follow but I still jammed it up. Perhaps because I got too creative? I used images and gave them the classes you documented in Method 1. I integrated the script but nothing happens when I click on the image. Not a stylist/coder and would be so grateful for your guidance. (My site is under construction please dont just too harshly.) If willing to take a look, please go to this specific post url as I have social follow on others.

  6. Tomas

    Hi Jim, thanks for your amazing tutorial. It was very easy to implement. I’m having problems trying to get the Jquery code to open the links in a new tab or window. Is it possible? Can you give me a hand, please? Thanks a lot! Stay safe!

    • Jim Monkhouse

      Hi Tomas, in the button module, just choose … content > link> Button link target “Open in the new tab “

  7. Gabrys

    Hi Jim, great tutorial, thanks. I installed it on my site but it opens on the same tab and my site page gets lost. Is there a way to force it to open on a new tab?

    • Jim Monkhouse

      Hi Gabrys, I’ve answered this in the comment above

  8. ma

    can this code be attached per button of social media?
    will this code work for light box per image only of sharing?
    any idea how to use this for light box?

    thanks in advance

    • Jim Monkhouse

      Hi Ma, have you got a more specific example? Do you mean share the content of a lightbox?

    I blog frequently and I truly appreciate your information. This article has really peaked my interest.
    I’m going to bookmark your blog and keep checking for new details about once per week.
    I opted in for your RSS feed as well.

  10. Karie Campion

    Hey Jim!

    This was incredibly helpful! The only thing not working on my end is the “Share by Email” button. Nothing happens. Was I supposed to add anything specific to have that button work?

    Thank you for sharing this information!!

    • Jim Monkhouse

      Hi Karie, I’ve just checked the code and it works on my end, are you still struggling with this?

  11. Quintin Mills

    I am a little stuck as I cannot find the “Footer” section in the Divi Builder options integrations.
    All i have is “head”, “Body”, “top of posts”. “bottom of posts”

    Please can you let me know where i am going wrong.

    Thank you.

    • Jim Monkhouse

      Hi Quintin, you can stick it in a standard Divi “text” or “code” module, just make sure that the block runs after your buttons ( keep the code underneath your buttons.)

  12. Tim

    Hey Jim, thank you for putting this together. I followed your instructions but it is not working for me. Can you please help me figure it out?

    Here is what I did.
    * My page has 1 section and in it 3 rows. I placed the button modules in the middle row.
    * The buttons show up
    * I went to DIVI > Theme Options > Integration and “Enabled the Single Button Code” option.
    * I copy-pasted your jquery code in the “Add code to the bottom of your posts, before the comments”

    On my first attempted to save, I got an error about being blocked by ajax and asking me to whitelist thee action. I did and saved again and it saved fine.

    The issue is, when I click the buttons, it only opens up my own site and doesn’t fetch the URL of the page.

    Thanks in advance Jim or anyone who replies and help me solve this.

  13. Jim Monkhouse

    Hi Tim. Are you using a wordpress security plugin which could be blocking the request? Are you setting the link to “Open a new page”? Thanks

    • nuton

      same to me like tim ….i do same to same like tim …but not work to share when i click fb share button it exist same page

  14. Ernest

    I can’t make it to work with blurbs — it’s not clickable unless I put something in the link. But the buttons are fine.

  15. Nick

    I’ve always wondered why the Divi’s authors didn’t include such functionality.
    Thank you for the information!

  16. LJ

    Hi Jim,

    Can you help us add text to the link in the email button – as you have created it in this example. We want our people using this button to be able to add some words to their email before the page link. Something like: “I found this great webpage, check it out:” and then the link to the page appears. If this question is beyond the scope a comment response, get in touch. Maybe we can hire you?

  17. Lloyd Collins

    Hi Jim

    This has helped me so much… thanks! Is there any way of adding a custom subject line with the email link?


  18. Susanna Fantoni

    I’ve tried this but it just reopens the post in another tab instead of the share option. I’ve tried it with a code a module as well as what you initially suggested in the tutorial.

  19. Melanie P

    I found this article very interesting. Unfortunately I couldn’t get it to work. I read all the above comments and tried to implement it first through the integration tab and then I tried to put a code module after the shared buttons links. It only seems to open a new tab to the same post in my website. Any advice would be greatly appreciated. My blog post url

    • Melanie

      I figured it out! I still had the “” in the class id. Works great! Thank you, Thank you, Thank you!

      • TrevorM

        Thank-you for posting that solution. I did same thing. I was following the instructions a little too close 🙂

  20. Agape

    Thanks you so much Jim! What a super helpful tutorial!

    I did as you explain, and everything works beautifully except for LinkedIn. There I get the following error: “Something went wrong, Refresh the page” – although I am logged in Linkedin. Any idea why that may be happening?

    And on a totally unrelated note, I’ve been trying to figure out how I can have external links on my Divi blogpost open up in a new tab – but I can’t figure out how. Any chance you could write a post or do a video on that as well?

    Thank you so much Jim! Truly appreciate your hard work and sharing your knowledge with us.

  21. Pat

    Hello, This post is great! I am trying to add a bcc(Blind carbon copy) and a message before the link using your Method 1. But I got stuck. Can you help? Thanks!

  22. László Balk

    Hi Jim,

    I did the buttons nicely on the edge of the page and put them in a fixed position. Everything works for me, so it’s super. And thank you very much.

    However, I would also like to ensure that clicking on the button does not open a complete window, but only a window that has been scaled at some point. Just like when I used the Monarch plugin, for example, when I clicked the button, the share window appeared separately in a size of about 400 px x 400 px. Is that possible with Divi?

  23. Felipe Walton

    is there any way to make the facebook app to open everytime it opens the mobile browser

  24. John

    Great post, thank you! For LinkedIn, is there any way to have the pop-up in a new window that is smaller? The new full tab is pretty overwhelming!

  25. britannic

    Thanks in support of sharing such a good ideа, piece of ԝriting is nice, thats why i have read it fully

  26. Brehonna

    Very helpful! I was wondering though if you could link to a different page other than the one the buttons are on? Mainly because if a visitor is on a Thank you page, it’s unnecessary for them to share that page, but rather a different one.

  27. Mark


    Really appreciate what you are doing here.

    I am having a bit of a problem which is that I have added the code at the bottom of the page and added three buttons – one for email, one for Twitter and one for Facebook. I can see all three buttons on the design page but when I load the live page, only the email button shows (and it works fine).

    Any idea why the other two buttons go invisible on the live page?

    Many thanks.


  28. Pietro Luteriani

    hi there, thank you fo posting this. I was thinking if there is a chance to make those buttons only with the icons. I mean i did make just the icons with Divi, but using those CSS class as descrived in your video it won’t work just with the icons.
    Thank you

  29. Jorge

    Hello, thank you for this! can you please tell me how to tweak the code to make it open a new pop-up window instead of a new tab (because new tabs are full-width) Thanks in advance!

  30. Jorge

    If I use this: $jq(‘.fb-social-share’).each(function(){, “_blank”, “width=500, height=350”); a popup appears as soon as my page loads (that is not what I want), and then if I press the button a new tab is opened and not a pop-up. I´m not a programmer I´m just guessing. I hope you can help me to correct this code thanks!

  31. Shood

    Great article, thanks

    just I think that the Whatsapp code in method1 is not correct, should be like this:

    //var whatsapp_Share = “whatsapp://send?text=”+encodeURIComponent(document.title)+”&body=”+encodeURIComponent(document.URL);
    var whatsapp_Share = “whatsapp://send?text=”+encodeURIComponent(document.title)+” “+encodeURIComponent(document.URL);


Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.