How to add a TripAdvisor button to the footer?

Hey Support Team,

If possible, we would like to know how to add a TripAdvisor button to our footer.

So far we have Facebook, G, and Instagram. It would be nice if could integrate the TripAdvisor button with them.

If there is a way, we will appreciate your help a lot.

Many thanks!

Hello @CharlesOsterlund,

Thanks for writing in!

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

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

// Adding Trip Advisor to the social icons
// =============================================================================
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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '<a href="http://www.tripadvisor.com/" class="xing" title="Trip Advisor" target="_blank"><i class="x-icon fa fa-tripadvisor" data-x-icon-s="&#xf262;" aria-hidden="true"></i></a>';

  $output .= '</div>';

  echo $output;

}
// =============================================================================

Please do not forget to insert the correct url of your Trip Advisor link.

Hi, @RueNel

Many thanks for your quick response!

Yes, we have a child theme installed, but since this is the first time we do this, could you confirm if this is the place where we should add the code, please? Under additional functions?

Hey @CharlesOsterlund,

Yes, this is the right place.

Hope this helps. Please let us know how it goes.

Hey @RueNel,

Awesome! It works, but the only thing is that instead of TripAdvisor icon, it shows a square.

Is there any way we can fix that?

Hello Again,

Could you please update it and use this?

// Adding Trip Advisor to the social icons
// =============================================================================
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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '<a href="http://www.tripadvisor.com/" class="tripadvisor" title="Trip Advisor" target="_blank"><i class="x-icon-tripadvisor" data-x-icon-s="&#xF262;" aria-hidden="true"></i></a>';

  $output .= '</div>';

  echo $output;

}
// =============================================================================

Hope this helps.

Hey @RueNel,

Updated and still the same issue. Any other solution?

Hello @CharlesOsterlund,

Sorry if it did not work. There is was typographic error in the code.
Please use this instead:

// Adding Trip Advisor to the social icons
// =============================================================================
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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '<a href="http://www.tripadvisor.com/" class="tripadvisor" title="Trip Advisor" target="_blank"><i class="x-icon x-icon-tripadvisor" data-x-icon-b="&#xf262;" aria-hidden="true"></i></a>';

  $output .= '</div>';

  echo $output;

}
// =============================================================================

I have tested this already and it is now working.

Hey @RueNel,

Thank you very much! It works now. Perfect! :wink:

On behalf of my colleague, you’re welcome! :slight_smile:

Hello,
I was looking for a way to add a social icon which is not Tripadvisor and found it to be simple enough to adjust with the provided php code. So, I figured, other people might come across this article with the same question as I have, hence here’s my solution for you to work with.

I took the code from @RueNel in the thread above and edited the line with the tripadvisor addition

// Adding Slideshare to the social icons
// =============================================================================
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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '<a href="https://www.slideshare.net/[redacted]/" class="slideshare" title="Slideshare" target="_blank"><i class="x-icon x-icon-slideshare" data-x-icon-b="&#xf1e7;"
	aria-hidden="true"></i></a>';

  $output .= '</div>';

  echo $output;

}

If the social platform in question is neither tripadvisor nor slideshare, you need to look for it on Font Awesome. Chances are, if it’s a rather well known platform, that the icon can be found amongst all the others.
Once you found it, what you need is the 4 character Unicode. In case of Slideshare it’s “f1e7”, in case of tripadvisor it’s “f262”. Copy the unicode and replace the 4 characters in the above code, where it says “data-x-icon-b="&#xf1e7”.
Also replace the “href”, “class” and “title” attributes accordingly. Don’t forget to point the URL to your actual site on the platform and not the root url, e.g. “...slideshare.net/companyname/” and not “...slideshare.net/”

Now, with this all done, the new icon is added at the end of all other social media icons. However, unlike the default ones, it does not change its color on mouse-over. But this can be achieved as well with a little change to the code provided by @Prasant in another post.

Go to x theme cornerstone and add the following CSS code to the global CSS section (bottom left):

.x-social-global>a.slideshare:hover {
    background-color: #0073AF;
}

Of course, you got to change slideshare in “a.slideshare:hover” into what you have entered for the “class” attribute of the “<a>” tag above, and change the background-color.

Cheers,
Dani

Thanks for a great guide @AmstD1 :slight_smile:

1 Like

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