Today I downloaded K2 again after 2 years of not using it. Great are the social share options K2 new offers. But I am more active in a B2B environment and like me readers to be able to share my articles on LinkedIN. Only this social medium isn't part of the share options.

Question: How can I add LinkedIN as a share button in K2 articles?

Hi,

I found the easiest way to add a LinkedIn button to K2 articles is to firstly grab the 2 script files from here:

developer.linkedin.com/plugins/share-plugin-generator

Simply select which type of button you like and then copy the 2 script files that appear.

Go to your K2 items php file:

around line 298/299 where the social sharing links start I added the following (I put mine before the Twitter code)

Hope this helps.

Hi. i tried that and it works. The only problem is that the linkedin button appears on top of the other buttons.
Take a look at the image attachment...


I want all the buttons to be in line horizontally

Please help

Hi Marious,
Sorry, should have also posted the CSS as well:

div.itemLinkedInButton {
float: left;
margin: 2px 24px 0 0;
}

That should bring them inline :)

I changed
margin: 2px 24px 0 0; to margin: 10px 24px 0 0;
and its perfect now.

Thanks a lot for the help ;)

Great :cheer:

Happy to help

Please I have the same problem but I'm not understanding where... May I have your help please???

This is my item.php in order by social

<?php if($this->item->params->get('itemTwitterButton',1)): ?>
<!-- Twitter Button -->
<div class="itemTwitterButton">
<a href="twitter.com/share" class="twitter-share-button" data-count="horizontal"item->params->get('twitterUsername')): ?> data-via="item->params->get('twitterUsername'); ?>">
<?php echo JText::_('K2_TWEET'); ?>
</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<?php endif; ?>

<?php if($this->item->params->get('itemFacebookButton',1)): ?>
<!-- Facebook Button -->
<div class="itemFacebookButton">
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-send="false" data-width="200" data-show-faces="true"></div>
</div>
<?php endif; ?>

<?php if($this->item->params->get('itemLinkedInButton',1)): ?>
<!-- LinkedIn Button -->
<div class="itemLinkedInButton">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
</div>
<?php endif; ?>

<?php if($this->item->params->get('itemGooglePlusOneButton',1)): ?>
<!-- Google +1 Button -->
<div class="itemGooglePlusOneButton">
<g:plusone annotation="inline" width="120"></g:plusone>
<script type="text/javascript">
(function() {
window.___gcfg = {lang: 'en'}; // Define button default language here
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<?php endif; ?>

<div class="clr"></div>
</div>
<?php endif; ?>

And this is my K2.css

div.itemSocialSharing {padding:8px 0;}
div.itemTwitterButton {float:left;margin:2px 24px 0 0;}
div.itemFacebookButton {float:left;margin-right:24px;width:200px;}
div.itemLinkedInButton {float:left;margin:2px 4px 0 0;}
div.itemGooglePlusOneButton {}

The LinkedIn's button appear on Google+
The Google+ Button appear on the line down, under the LinkedIn...

Please, some little help...
Thanks

Hi Giuseppe,

By the looks of what you have posted it is correct, I think to align the items properly you might need to edit the margin for the Twitter button.

So where you have:
div.itemTwitterButton {float:left;margin:2px 24px 0 0;}

Try reducing the 24px down to something like 14px, this will move the Facebook link to move to the left and reduce the gap between the twitter button and the facebook button and hopefully allow enough space for the Google + to move up.

If it doesn't on 14px, you may have to reduce the number even further until they appear inline.

Hope this helps :)

This was great -thanks!