Open Social Links in New Tab

Last modified Sep 10, 2020
Difficulty Beginner
Language JavaScript

Watch Tutorial

Useful links

Divi Switch
Divi Space Membership

Transcript:

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.

JavaScript

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

 

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 https://elegantthemes.com, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

21 Comments

  1. connie

    worked like a breeze!

    Reply
  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');
        }
    
    Reply
  3. Tor

    still working

    Reply
  4. Caleb

    Works very good, thank you.

    Reply
  5. Dáithí O Broin

    Just what I wanted. Worked perfectly.

    Reply
    • Joshua

      Thanks for testing and letting everyone know!

  6. Cassy

    Works well ! 🙂

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

    Reply
  8. fabio

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

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_510331');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_510331">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_510331">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Try:

       
  9. Ralf Tenbrink

    Works a charm

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

    Reply
  11. Judith Seidl

    Very helpful, thank you so much!

    Reply
  12. E Power

    Perfect, thanks!

    Reply
  13. Rony

    Still working! very nice little code. Thank you.

    Reply
  14. Jan

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

    Reply
  15. DJ

    Works for me on the most current version of Divi!

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

    Reply

Submit a Comment

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

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