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.
Divi-Website-Expert---Create-Social-Share-Buttons-using-the-Divi-Builder-in-5-mins-

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 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 for creating 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

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 taht .

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 = "https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(document.URL)+"&t="+encodeURIComponent(document.URL);

$jq('.fb-social-share').each(function(){
this.href=FB_share;
});

// Twitter Share
var twitter_Share = "https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content%20" + encodeURIComponent(document.title)+":%20 "+encodeURIComponent(document.URL);

$jq('.twitter-social-share').each(function(){
this.href=twitter_Share;
});

//Pinterest
var pin_Share = "http://pinterest.com/pin/create/button/?url="+encodeURIComponent(document.title)+"&media="+encodeURIComponent(document.title)+"&description="+encodeURIComponent(document.URL);

$jq('.pinterest-social-share').each(function(){
this.href=pin_Share;
});

//Linkedin
var Linkedin_Share = "http://www.linkedin.com/shareArticle?mini=true&url="+encodeURIComponent(document.URL)+"&title="+encodeURIComponent(document.title);
$jq('.linkedin-social-share').each(function(){
this.href=Linkedin_Share ;
});

//Email
var email_Share = "mailto:?subject="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
$jq('.email-social-share').each(function(){
this.href=email_Share ;
});

//Whatsapp
var whatsapp_Share = "whatsapp://send?text="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
$jq('.whatsapp-social-share').each(function(){
this.href=whatsapp_Share ;
});

});

</script>

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.


<!-- FACEBOOK SHARE -->
<a class="w-inline-block social-share-btn fb" title="Share on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=&amp;t=" target="_blank" rel="noopener noreferrer">
Facebook
</a>

<!-- TWITTER SHARE -->
<a class="w-inline-block social-share-btn tw" title="Tweet" href="https://twitter.com/intent/tweet?" target="_blank" rel="noopener noreferrer">
Twitter
</a>

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

<!-- TUMBLR SHARE -->
<a class="w-inline-block social-share-btn tmb" title="Post to Tumblr" href="http://www.tumblr.com/share?v=3&amp;u=&amp;t=&amp;s=" target="_blank" rel="noopener noreferrer">
Tumblr
</a>

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

<!-- LINKEDIN SHARE -->
<a class="w-inline-block social-share-btn lnk" title="Share on LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=&amp;title=&amp;summary=&amp;source=" target="_blank" rel="noopener noreferrer">LinkedIn</a>

<!-- REDDIT SHARE -->
<a class="w-inline-block social-share-btn redd" title="Submit to Reddit" href="http://www.reddit.com/submit?url=&amp;title=" target="_blank" rel="noopener noreferrer">Reddit</a>

<!-- WHATSAPP SHARE -->
<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

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

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.

41 Comments

  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);

    $jq(‘.messenger-social-share’).each(function(){
    this.href=MSNGR_share;
    });

    Reply
    • Jim Monkhouse

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

      Reply
    • Gery

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

      Reply
  2. Thomas

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

    Reply
    • Jim Monkhouse

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

      Reply
      • 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?

        Reply
  3. Maria

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

    Reply
    • 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?

      Reply
  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?
    Thanks

    Reply
    • 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

      Reply
    • 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!

      Reply
  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.
    Blessings!

    Reply
  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!

    Reply
    • Jim Monkhouse

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

      Reply
  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?

    Reply
    • Jim Monkhouse

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

      Reply
  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

    Reply
    • Jim Monkhouse

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

      Reply
  9. waterfallmagazine.com

    https://waterfallmagazine.com
    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.

    Reply
  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!!

    Reply
    • Jim Monkhouse

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

      Reply
  11. Quintin Mills

    Hello.
    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.

    Reply
    • 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.)

      Reply
  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.

    Reply
  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

    Reply
    • 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

      Reply
  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.

    Reply
  15. Nick

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

    Reply
  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?

    Reply
  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?

    Thanks
    Lloyd

    Reply
  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.

    Reply
  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 https://www.yourutahrealty.com/how-to-get-pre-approved-for-a-home-loan/

    Reply
    • Melanie

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

      Reply
  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.

    Reply
  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!

    Reply
  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?

    Reply
  23. Felipe Walton

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

    Reply

Submit a Comment

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