tonyw

[tonyw]

I’ve managed to do this successfully – copy posts-social-share.php to your child theme and change the social sharing code in the child theme to this:

COPY CODE

<section class="main-color container-wrap social-share-wrap">
	<div class="container">
		<div class="share-links">
      
            <div class="hr-title hr-long"><abbr><?php _e("Share this", "kleo_framework"); ?></abbr></div>

            <?php if ( $like_status == 1 ) : ?>

                <span class="kleo-love">
                <?php do_action('kleo_show_love'); ?>
                </span>

            <?php endif; ?>

            <?php if ( $social_share == 1 ) : ?>

            <span class="kleo-linkedin">
                <a href="https://www.linkedin.com/shareArticle?url=<?php the_permalink(); ?>" class="post_share_linkedin"
                   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
                    <i class="icon-linkedin"></i>
                </a>
            </span>
            <span class="kleo-facebook">
                <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" class="post_share_facebook"
                   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=220,width=600');return false;">
                    <i class="icon-facebook"></i>
                </a>
            </span>
            <span class="kleo-twitter">
                <a href="https://twitter.com/share?url=<?php the_permalink(); ?>" class="post_share_twitter"
                   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600');return false;">
                    <i class="icon-twitter"></i>
                </a>
            </span>
            <span class="kleo-googleplus">
                <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>"
                   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
                    <i class="icon-gplus"></i>
                </a>
            </span>
            <span class="kleo-pinterest">
                <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if (function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo strip_tags(get_the_title()); ?>">
                    <i class="icon-pinterest-circled"></i>
                </a>
            </span>
            <span class="kleo-mail">
                <a href="mailto:?subject=<?php echo strip_tags(get_the_title()); ?>&body=<?php the_permalink(); ?>" class="post_share_email">
                    <i class="icon-mail"></i>
                </a>
            </span>

          <?php endif; ?>
			
        </div>
	</div>
</section>

You’ll also need to add the icon to the your style.css file in the child theme:

COPY CODE

.icon-linkedin:before {
    content: '\e95c';
}

I also increased the font size of my links to make them more obvious using this code in style.css:

COPY CODE

.share-links span a {
    font-size: 26px !important;
}

[tonyw]

Agree this would be really helpful as LinkedIn is a key professional social network and is missing from Kleo at the moment – I’ve added an XProfile LinkedIn button and other social network icons on the Buddypress members’ profile header using code that has been shared here previously, and have just added it to the social share links.

Social share links added using the following code added in just above the Facebook share section in a copy of kleo/page-parts/posts-social-share.php added to my child theme:

COPY CODE

            <span class="kleo-linkedin">
                <a href="https://www.linkedin.com/shareArticle?url=<?php the_permalink(); ?>" class="post_share_linkedin"
                   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600');return false;">
                    <i class="icon-linkedin"></i>
                </a>
            </span>

and this css code added to style.css:

COPY CODE

.icon-linkedin:before {
    content: '\e95c';
}

[Author]

Posts