Adding target="_blank" rel="noopener" to Social media Links

Hi Guys,

With the advent of google analytics latest updates, if you do not have a "rel=“noopener” " link within your external links, your google ad’s (if you have any) get severely affected.

This needs to be corrected within your theme, or at least have the option to add additional html tags to the url, or a simple select/tick box to enable that code to be placed into the URL afterwards.

BEFORE:
<a href=“https://www.facebook.com/thebeautyspotbymon/” class=“facebook” title=“Facebook” target="_blank" style=“outline: currentcolor none medium;”>

AFTER / TARGET:
<a href=“https://www.facebook.com/thebeautyspotbymon/” class=“facebook” title=“Facebook” target="_blank" rel=“noopener” style=“outline: currentcolor none medium;”>

Any help you can give would be greatly appreciated as short of me adding in the code manually and having to customise the look with inline css of the <a hred> code I would rather if I could just use your theme.

1 Like

Hello Monique,

Thanks for writing in!

Since the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" "target="_blank" rel="noopener"><i class="x-icon-facebook-square" data-x-icon-b="&#xf082;" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" "target="_blank" rel="noopener"><i class="x-icon-twitter-square" data-x-icon-b="&#xf081;" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" "target="_blank" rel="noopener"><i class="x-icon-google-plus-square" data-x-icon-b="&#xf0d4;" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" "target="_blank" rel="noopener"><i class="x-icon-linkedin-square" data-x-icon-b="&#xf08c;" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" "target="_blank" rel="noopener"><i class="x-icon-xing-square" data-x-icon-b="&#xf169;" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" "target="_blank" rel="noopener"><i class="x-icon-foursquare" data-x-icon-b="&#xf180;" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" "target="_blank" rel="noopener"><i class="x-icon-youtube-square" data-x-icon-b="&#xf431;" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" "target="_blank" rel="noopener"><i class="x-icon-vimeo-square" data-x-icon-b="&#xf194;" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" "target="_blank" rel="noopener"><i class="x-icon-instagram" data-x-icon-b="&#xf16d;" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" "target="_blank" rel="noopener"><i class="x-icon-pinterest-square" data-x-icon-b="&#xf0d3;" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" "target="_blank" rel="noopener"><i class="x-icon-dribbble" data-x-icon-b="&#xf17d;" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" "target="_blank" rel="noopener"><i class="x-icon-flickr" data-x-icon-b="&#xf16e;" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" "target="_blank" rel="noopener"><i class="x-icon-github-square" data-x-icon-b="&#xf092;" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" "target="_blank" rel="noopener"><i class="x-icon-behance-square" data-x-icon-b="&#xf1b5;" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" "target="_blank" rel="noopener"><i class="x-icon-tumblr-square" data-x-icon-b="&#xf174;" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="whatsapp" title="Whatsapp" "target="_blank" rel="noopener"><i class="x-icon-whatsapp" data-x-icon-b="&#xf232;" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" "target="_blank" rel="noopener"><i class="x-icon-soundcloud" data-x-icon-b="&#xf1be;" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" "target="_blank" rel="noopener"><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;
// =============================================================================

We would loved to know if this has work for you. Thank you.

Worked for me, thank you.
Agree with OP that this needs addressing in the theme, noopener is de rigueur these days.

1 Like

Hey Paul,

It’s good to know that it works out for you. I have submitted this to our issue tracker so the developers will be made aware of it and the links will be updated.

Thanks for your understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.