Open Social Links in New Tab

Last modified Sep 10, 2020
Difficulty Beginner
Language JavaScript

Watch Tutorial

Useful links

Divi Switch
Divi Space Membership


Hey everybody, David here from Divi Space. By default, when someone visiting your site clicks your social media icons in the header or footer, the links open in the same window. If a user clicks on an external link that doesn’t open in a new tab, once they close that tab they won’t be able to get back to your website.

Today I’m gonna show you how to automatically set them to open in a new tab so your website stays open in their browser. But before we start, you can also check our post that covers all three alternative ways to add javascript code to your website. Today I’m only going to cover one. Here we go!

Login to your WordPress dashboard. Hover over ‘Divi’ and click ‘Theme Options’. Select ‘Integrations’. Scroll down to ‘Add code to the < head > of your blog’ box and paste the code in the video description. Make sure you have Enabled header code above. Click save changes. Refresh the page and test it by clicking on the social icon. Awesome, it opens in the new tab!

And great news for our members, this feature is available in the Divi Switch plugin that is included in the membership plans meaning you can click a switch rather than paste a code. You can also get the Divi Switch plugin as a standalone purchase. Once the Divi Switch is installed on your website, head over to the Divi Switch settings in your Divi Theme and enable the switch “Open Social Links In New Tab” and it will automatically set social icons to open in a new tab. Simple, right? Thanks for watching the video. We’ll see you in the next tutorial.


<!-- make social icons click to call -->
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(".et-social-icon a").attr('target', 'blank');


Does this snippet (still) work?

Please let us know if everything worked as expected. We have tested this code with the Version: 3.29.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment! :)

Subscribe to our youtube channel because there’s more to come!


License: This snippet contains code from the Divi Theme, copyright, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments


  1. connie

    worked like a breeze!

  2. Peter

    The snippet did not work for me, but does in vanilla JavaScript:

        var links = document.querySelectorAll('.et-social-icon a');
        for (var i = 0; i < links.length; ++i) {
          var item = links[i];
          item.setAttribute('target', 'blank');
  3. Tor

    still working

  4. Caleb

    Works very good, thank you.

  5. Dáithí O Broin

    Just what I wanted. Worked perfectly.

    • Joshua

      Thanks for testing and letting everyone know!

  6. Cassy

    Works well ! 🙂

  7. Mark

    I could not get it to work. I am not sure where to put the additional code, I tried this:

    jQuery(document).ready(function($) {
    jQuery(“.et-social-icon a”).attr(‘target’, ‘blank’);
    }) jQuery(“a.et_pb_font_icon”).attr(‘target’, ‘blank’);;

  8. fabio

    Im trying to put a rel=non-open on the social media button since lighthouse is complaining.. how would you do it:?

    • Anna Kurowska


  9. Ralf Tenbrink

    Works a charm

  10. Tom magee

    Yup still works awesome. Thanks!
    Don’t know why Elegant doesn’t think this option is kinda important.

    So many things in DIVI need code workarounds… kinda frustrating …

  11. Judith Seidl

    Very helpful, thank you so much!

  12. E Power

    Perfect, thanks!

  13. Rony

    Still working! very nice little code. Thank you.

  14. Jan

    Yes, this worked perfectly by integrating using the header area. Thank you!!

  15. DJ

    Works for me on the most current version of Divi!

  16. Michael

    This code does not work on my version of Divi (as of April 30 2020) but works with this adjustment:

    jQuery(“a.et_pb_font_icon”).attr(‘target’, ‘blank’);


Submit a Comment

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

Receive notifications about our new blog posts.

Next snippet Make Phone Number Click to Call in the Divi Theme
Previous snippet Add Custom Social Media Icon to the Divi Menu