0

The native K2 CKK social sharing feature don't pop by default so i spent some time and came up with this social sharing codes i want to share with the community.

See my answer below and hope it helps someone.

1

Add social media sharing to K2 component using https://www.addthis.com/

After registering and getting your addthis buttons codes, goto K2 parameters, in the social tab, place your code inside the 'Social button' code like this:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5886a1000"></script>
<div class="addthis_inline_share_toolbox_umh7"></div>

You have to create a com_k2 override in your template in the html folder and paste the codes in the respective output templates (category items, tag list, and item view) where you want your buttons to appear.

For category items use this code:

 <?php $link = K2HelperRoute::getItemRoute($this->item->id.':'.urlencode($item->alias), $this->item->catid.':'.urlencode($this->item->category->alias)); ?>


 <?php if($this->item->params->get('itemSocialButton') && !is_null($this->item->params->get('socialButtonCode', NULL))): ?>
        <!-- Item Social Button -->

                <a href="javascript:void(0)" class="icons-social social-fb" onclick="javascript:genericSocialShare('http://www.facebook.com/sharer.php?u=<?php echo (JRoute::_($link,true, -1)) ;?>&amp;url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Facebook Share"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                <a href="javascript:void(0)" class="icons-social social-gp" onclick="javascript:genericSocialShare('https://plus.google.com/share?url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Google Plus Share"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

                <a href="javascript:void(0)" class="icons-social social-tw" onclick="javascript:genericSocialShare('http://twitter.com/share?text=<?php echo $this->item->title?>&amp;url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Twitter Share"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                <a href="javascript:void(0)" class="icons-social social-pt" onclick="javascript:genericSocialShare('http://pinterest.com/pin/create/button/?url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Pinterest Share"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>

            <script type="text/javascript">
            function genericSocialShare(url){
                window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');
                return true;
            }
            </script>
        <?php endif; ?>

For tag items view use this code:

<?php $link = urldecode(K2HelperRoute::getItemRoute($item->id.':'.$item->alias, $item->catid.':'.urlencode($item->category->alias))); ?>

         <?php if($item->params->get('itemSocialButton') && !is_null($item->params->get('socialButtonCode', NULL))): ?>
                <!-- Item Social Button -->

                        <a href="javascript:void(0)" class="icons-social social-fb" onclick="javascript:genericSocialShare('http://www.facebook.com/sharer.php?u=<?php echo (JRoute::_($link,true, -1)) ;?>&amp;url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Facebook Share"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-gp" onclick="javascript:genericSocialShare('https://plus.google.com/share?url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Google Plus Share"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-tw" onclick="javascript:genericSocialShare('http://twitter.com/share?text=<?php echo $item->title?>&amp;url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Twitter Share"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-pt" onclick="javascript:genericSocialShare('http://pinterest.com/pin/create/button/?url=<?php echo (JRoute::_($link,true, -1)) ;?>')" title="Pinterest Share"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>

                    <script type="text/javascript">
                    function genericSocialShare(url){
                        window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');
                        return true;
                    }
                    </script>
                <?php endif; ?>

For item view use this code:

<?php if($this->item->params->get('itemSocialButton') && !is_null($this->item->params->get('socialButtonCode', NULL))): ?>
                <!-- Item Social Button -->
                <div class="itemSocialBlock">
                    <div class="post_social">
                        <a href="javascript:void(0)" class="icons-social social-fb" onclick="javascript:genericSocialShare('http://www.facebook.com/sharer.php?u=<?php echo JURI::current();?>&amp;url=<?php echo JURI::current();?>')" title="Facebook Share"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-gp" onclick="javascript:genericSocialShare('https://plus.google.com/share?url=<?php echo JURI::current();?>')" title="Google Plus Share"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-tw" onclick="javascript:genericSocialShare('http://twitter.com/share?text=<?php echo $this->item->title?>&amp;url=<?php echo JURI::current();?>')" title="Twitter Share"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-lk" onclick="javascript:genericSocialShare('http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo JURI::current();?>')" title="LinkedIn Share"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                        <a href="javascript:void(0)" class="icons-social social-pt" onclick="javascript:genericSocialShare('http://pinterest.com/pin/create/button/?url=<?php echo JURI::current();?>')" title="Pinterest Share"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
                    </div>
                    <script type="text/javascript">
                    function genericSocialShare(url){
                        window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');
                        return true;
                    }
                    </script>
                </div>
                <?php endif; ?>

The item view contains the code for LinkedIn button, you can copy to other views as needed and edit the link.

You can now style the buttons with css as needed.

For those using "https" change

<?php echo (JRoute::_($link,true, -1)) ;?>

to

<?php echo (JRoute::_($link,true, 1)) ;?>

in the category list and tag list codes.

Cheers!!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.