Adding additional Social Share buttons to Joomla articles

Since the release of the Gavern Framework one of the core GavickPro features has been support for Social share buttons. We decided to add as a standard the most popular social network icons, like Facebook, Twitter, Google+ and Pinterest. Yet there are many more social networks out there that cater for a range of different tastes and cultures, each with their own icons and share buttons. In this article we’ll look at the process required to add your own social network icons by adding two popular icons that are not currently included in our templates.

GavickPro’s share buttons

If you take a look at the Social API tab of our template options you’ll find options to configure all the social network-related elements of a given template. You can set options such as the button layout, choose whether to enable or disable particular buttons, and control which pages the social elements will appear on. Bear in mind that if you add a new social media button it will not come with the same features as the pre-prepared social buttons in the template. This means that you’ll need to specify the button layout and function during button-generation; that is, in the code itself. To disable the button, the created code will need to be deleted.

This is of course quite a major disadvantage compared to the default buttons that include all the additional features, but to implement a new social network’s button with all the features that the default buttons include would require a much larger time investment, which is not really worth it when, once you are comfortable with the process, a new button may be generated in seconds. This tutorial will cover extending the default social sharing buttons with two additional popular network buttons; Add to Pocket and LinkedIn, as these are very popular requests in our forum. Adding buttons from other social networks will be very similar to the ones covered in this guide, but if you are running into any trouble with adding a particular social network’s button leave a comment and let us know!

Add to Pocket

Pocket is a service that allows you to store virtually any content on the web for later, whether articles, videos, images and more. Pocket provides multiplatform applications that provide a host of options for saving articles across a range of devices, whether browser, tablet or smartphone. Email support allows you to email links that will then be automatically added to your stored articles, and integration with over 500 popular apps including Twitter and Flipboard means that many of your favorite social or media apps will already support Pocket.

There’s is also a solution for developers to add a button directly on their website which will automatically save currently viewed article to this service. Aside from the main functionality of Pocket there is another benefit; when you read the linked resource later you will be provided with a clean view. This means that any advertisements, extra modules or other elements that may distract you from reading will be removed.

To add a Pocket button to our Social API area we’ll first need to generate the code. To get the button code head over to this website and choose your preferred button type.

For this tutorial we’ll go with the default vertical layout with a counter as this style blends nicely with the Steak House template we’re going to add the button to. The generated code which this button uses looks like this:

<a data-pocket-label=&quot;pocket&quot; data-pocket-count=&quot;horizontal&quot; class=&quot;pocket-btn&quot; data-lang=&quot;en&quot;></a>
<script type=&quot;text/javascript&quot;>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>

Remember that this code may be different if you select a different layout type so it is really important to copy it directly from the Pocket website. Now, all that we need to do is to copy this code to the default Social API area. The article layout and existing share buttons is defined in the template/html/com_content/article/default.php file, so this is the file we should edit. In most of our templates the Social API area block is in a DIV container:

<div id=&quot;gkSocialAPI&quot;>…</div>

It is really important to add the new button just before the closing tag for this element – . Once you find this area copy the code from Pocket into the end of the DIV container; after saving the effect should be like this screenshot:

LinkedIn

Introducing LinkedIn is probably not necessary; it’s the premier business-related social network specialised with growing your business contacts. The website is available in more that 20 countries and apart from the business-networking features like job listings, skills and influencers you also have a regular social network feed to keep you up to interact with your contacts and post interesting notes, whether business related or otherwise. As with Pocket, LinkedIn have prepared a dedicated website where you can customize and generate share button code.

In LinkedIn’s Build a Share Button you can define your own button and grab the code for it. We’ll use the vertical layout like we did with the Pocket button in the last section, because we like to keep things uniform. When choosing your button make sure that the URL to be shared field is left empty because we want the button to share the currently viewed article, rather than a specific URL. If left blank, then the script will automatically detect the current URL and share it. The code for the vertical button with a counter is as follows:

<script src=&quot;//platform.linkedin.com/in.js&quot; type=&quot;text/javascript&quot;>
  lang: en_US
</script>
<script type=&quot;IN/Share&quot; data-counter=&quot;top&quot;></script>

As with the previous button we need to copy this code to the template/html/com_content/article/default.php file; if you’ve already added a button for Pocket then you should copy the code right after the code for the Pocket button, but before the closing DIV. Otherwise, if you want to add a LinkedIn button only just find the closing tag for the

After this step you should see the extra button in your Joomla articles:

Adding other buttons

In this short tutorial we’ve focused on two of the most popular share buttons that you may find at websites, apart from those already available in our Social API, like Facebook, Twitter and Pinterest buttons. Every service implementation may be different so though you will always need to edit the Joomla article view you will also sometimes need to include a script in the template’s