Adding LinkedIn Social Sharing to K2 Items in Joomla!

LinkedIn Social SharingK2 has a cool built-in feature that will allow site owners to enable the display of social sharing icon links at the bottom of K2 items. For some unknown reason, those noble K2 developers have apparently left out the capability to share K2 articles on the LinkedIn social media network. This brief tutorial will help you add that feature to your K2 installation via an HTML override.

I assume you've already enabled the display of social sharing links in your Item View options for your K2 categories.

You'll need to have a 16 pixel square LinkedIn chiclet logo on hand before we get started.

Also, please check your template to see if you already have the following directory:

/templates/your_template/html/com_k2

Some template developers develop specifically for K2 and may already have the necessary files duplicated in your default site template directory in order to do their own custom overrides for K2. If so, skim the following 7 steps, making sure the needed files are duplicated as instructed.

PART I: DUPLICATING THE OVERRIDE FILES AND STRUCTURE SETUP

1. Download the K2 template directory including all enclosed files, to your local computer:

/components/com_k2/templates

2. Also download the k2.css file, located here:

/components/com_k2/css/k2.css

3. Download the social images directory and its contents, located here:

/components/com_k2/images/social

4. Create the new directory structure in your default site template directory (create any missing directories in the path below, if needed, i.e., "html" and "com_k2":

/templates/your_template/html/com_k2/

5. Upload the "templates" directory and its contents into the com_k2 directory you created in your site template directory (see step 4).

Upload the k2.css file to the css directory:

/templates/your_template/css.

6. Upload the social directory and its contents to the images directory:

/templates/your_template/images

7. Upload the LinkedIn logo the following directory:

/templates/your_template/images/social

PART II: ADDING THE LINKEDIN SOCIAL MEDIA LOGO LINK TO YOUR K2 ITEMS

1. Open the following file in a text editor:

/templates/your_template/html/com_k2/templates/default/item.php

2. Search for "social links" to locate the proper section.

Near line 437 you'll see a number of unordered list items with link classes named for several social media networks, GoogleBuzz (K2 v. 2.4.1), Facebook, etc.

3. Insert the following code into the list codeblock wherever you it to display in the current order. I'll insert it just after the Facebook list item:

href="http://www.linkedin.com/shareArticle?mini=true&url=item->socialLink; ?>" target="_blank">

LinkedIn has certain elements that you can include in the URL. The above code includes the following variables:

  • href="http://www.linkedin.com/shareArticle?
  • mini=true
  • url=item->socialLink; ?>" target="_blank">

4. Document the change in a log file so you can reproduce it if needed. Save the changes and upload it to the server.

5. Open the following CSS file in a text editor:

/templates/your_template/css/k2.css

6. Near line 255 you'll find a group of social media link styles, a.facebook, etc. Insert the following code on a new line near those other styles:

a.linkedin { background-image: url(../images/social/linkedin.png); }

Make sure to replace "linkedin.png" with whatever your logo filename is.

7. Click save and upload the file to the server. Load a K2 item into a web browser and test the link.

If you've done everything correctly, the new LinkedIn chiclet logo will display, and clicking it should open up a new LinkedIn post composition window with your K2 Item title displaying in it.

Congratulations!

Depending upon the version of K2 you have installed, you may also need to modify the existing Google Buzz link to Google+, which can be done in a similar manner though Google does not support the import of your link variables yet. Version 2.5 of K2 has the Google+ link.

Here is the link code I used for Google+, which only opens the Google+ page. (Comments with code that imports the URL variables into the Google+ message window are invited.)

href="/https://plus.google.com/share?url=item->socialLink; ?>&message=item->title); ?>" target="_blank">
Joomla Templates and Joomla Extensions by JoomlaVision.Com