Topic: VK.COM Social network Button

1 2 3 →

Author

Posts

July 12, 2014 at 6:41 pm #67844

Participant

Hello,

Your theme is great, but I have one small problem. Maybe you know, in Russia VK.COM is one of the most popular social network. Unfortunately your theme does not support this social network. Could you give me advice? How I can build my own icon for this network in style of X-theme or maybe you can easily include vk.com in your theme?

Thank you in advance.

July 13, 2014 at 10:56 pm #68179

Christian

Moderator

Hey Dmitry,

To include VK in top and footer social icons, please add the code below in your functions.php.

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' );
  $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' );
  $behance     = x_get_option( 'x_social_behance' );
  $tumblr      = x_get_option( 'x_social_tumblr' );
  $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-social-facebook"></i></a>'; endif;
    if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-social-twitter"></i></a>'; endif;
    if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-social-google-plus"></i></a>'; endif;
    if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-social-linkedin"></i></a>'; endif;
    if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-social-foursquare"></i></a>'; endif;
    if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-social-youtube"></i></a>'; endif;
    if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-social-vimeo"></i></a>'; endif;
    if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-social-instagram"></i></a>'; endif;
    if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-social-pinterest"></i></a>'; endif;
    if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-social-dribbble"></i></a>'; endif;
    if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-social-behance"></i></a>'; endif;
    if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-social-tumblr"></i></a>'; endif;
    if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-social-rss"></i></a>'; endif;

  $output .= '<a style="position: relative;top: -2px;" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" href="#" class="vk" title="VK" target="_blank"><i class="x-icon-vk"></i></a></div>';

  echo $output;

}

And, add the code below in the Customizer > Custom > CSS.

.x-social-global a:hover.vk {
background-color: #54769B;
}

Hope that helps. 🙂

July 17, 2014 at 10:30 am #70149

leomrus

Participant

Thank you very much! It is work 🙂

July 17, 2014 at 2:24 pm #70243

Kosher K

Member

You’re Welcome,

Cheers

July 30, 2014 at 5:21 pm #75612

leomrus

Participant

One more things! Could you help me to make social sharing button to vk.com? Is it possible?

July 31, 2014 at 3:37 am #75885

Christian

Moderator

Hey Dmitry,

This is possible but would be outside the scope of our support due to the extra variables that need to be implemented.

Thank you for understanding.

January 16, 2015 at 9:01 pm #184840

yifanzhou

Participant

Hi there,

For Post #68179 above, if I wish to add 3 social icons, instead of just one, what should I do?

Do I just duplicate “$output….echo $output;” twice and also add the corresponding extra CSS to Customizer? When I do that, I see all three social icons but they are lined up in a vertical column.

This is what I added to functions.php

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' );
  $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' );
  $behance     = x_get_option( 'x_social_behance' );
  $tumblr      = x_get_option( 'x_social_tumblr' );
  $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-social-facebook"></i></a>'; endif;
    if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-social-twitter"></i></a>'; endif;
    if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-social-google-plus"></i></a>'; endif;
    if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-social-linkedin"></i></a>'; endif;
    if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-social-foursquare"></i></a>'; endif;
    if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-social-youtube"></i></a>'; endif;
    if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-social-vimeo"></i></a>'; endif;
    if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-social-instagram"></i></a>'; endif;
    if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-social-pinterest"></i></a>'; endif;
    if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-social-dribbble"></i></a>'; endif;
    if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-social-behance"></i></a>'; endif;
    if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-social-tumblr"></i></a>'; endif;
    if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-social-rss"></i></a>'; endif;

  $output .= '<a style="position: relative;top: -2px;" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" href="http://www.facebook.com" class="facebook" title="facebook" target="_blank"><i class="x-icon-facebook"></i></a></div>';

  $output .= '<a style="position: relative;top: -2px;" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" href="http://www.twitter.com" class="twitter" title="twitter" target="_blank"><i class="x-icon-twitter"></i></a></div>';

  $output .= '<a style="position: relative;top: -2px;" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" href="http://www.weibo.com" class="weibo" title="weibo" target="_blank"><i class="x-icon-weibo"></i></a></div>';
  echo $output;

}

And to Customizer

.x-social-global a:hover.weibo {
background-color: #54769B;
}

.x-social-global a:hover.facebook {
background-color: #54769B;

}.x-social-global a:hover.twitter {
background-color: #54769B;
}

Thanks.
Ivan

January 18, 2015 at 4:33 am #185439

Christopher

Moderator

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

May 7, 2015 at 10:13 am #268211

leomrus

Participant

Hello,

After last update of theme this function are not working.

May 7, 2015 at 2:24 pm #268396

Nabeel A

Moderator

Hi Dmitry,

Please use this code instead in your child theme’s functions.php file for the latest version of X theme:

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', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $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"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></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"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square"></i></a>'; endif;

    $output .= '<a href="http://link/to/your/profile" class="vk" title="VK" target="_blank"><i class="x-icon-vk"></i></a></div>';

    echo $output;

  }
endif;

Find this line at the bottom $output .= '<a href="http://link/to/your/profile" and change href attribute with original URL.

Let us know how this goes!

May 13, 2015 at 7:58 am #272496

leomrus

Participant

Should I include any new CSS for activation?

May 13, 2015 at 9:23 am #272573

Thai

Moderator

Hi @boytsov,
Would you mind providing us with your website URL so we can take a closer look?
Many thanks.

May 13, 2015 at 12:19 pm #272713

leomrus

Participant

cubiculum.ru

May 13, 2015 at 4:15 pm #272915

Nabeel A

Moderator

Hey Dmitry,

Have you added the code in your child theme’s functions.php file? You will not need any CSS for it’s activation. Once the code is added you should be able to see the VK icon.

Thanks!

May 22, 2015 at 9:27 am #279519

leomrus

Participant

Yes, i did it, but my theme not child. Where I can see it? in customizer?

Author

Posts

1 2 3 →