Requirements

Joomla! 4.4 PHP 8.1 PHP 8.2

Joomla! 5.1 Joomla! 5.2 PHP 8.1PHP 8.2 PHP 8.3

  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the plugin
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse]  and select your downloaded plugin
  4. click [Upload & Install], wait for the installation to finish

Configuration

  1. in the back-end go to menu Extensions > Plugins
  2. search / locate the 'jsSocials' content plugin
  3. open the plugin
  4. in the tab [Plugin] set status to [Enabled]
  5. in the tab [jsSocials buttons] configure your buttons > look at the tool-tips for information about what each button does
  6. [FULL (subscription) version] in the tab [Custom campaigns] configure your UTM parameter (e.g. used for tracking Campaigns in Google Analytics)
  7. in the tab [Auto buttons] configure the automatic insertion of the buttons on selected categories (top, bottom, readmore position) or views
  8. in the tab [jsSocials theme] configure the theme that you want to use
  9. click [Save & Close] and you are good to go

Activate Joomla! One Click update and change-log integration

When you install the extension, it will automatically integrate with the Joomla Updater for both updates and change-logs.

On first use, the Joomla updater will prompt you with a 'Download Key is missing!' message.

  1. On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
  2. On your site: Go to System > Update Sites, locate the extension, and paste the Download ID into the 'Download Key' field. Click [Save and Close].

Important:
If you're using this Download ID on a new server, you’ll receive an email to approve the device. Click the link in the email to enable downloads from this server.
Without approval, updates won’t be authorized, and the Joomla updater will display a 401 Unauthorized error when trying to fetch updates.

That’s it! You're all set.

Manually add Social sharing buttons in your blog / article

You can place the buttons automatically on the top or bottom (or both) positions of the selected article categories, but the real power lies in the manual placement of the Social sharing buttons:

  1. open the blog / article (or even HTML module!) that you want to place the Social sharing buttons in
  2. insert:
    1. {jssocials} into the location where you want to automagically display the Social sharing buttons
    2. [FULL (subscription) version]:{jssocials url="https://your custom url", title="your custom text", buttonorder="F,T"} into the location where you want to automagically display the Social sharing buttons
  3. click [Save & Close]
  4. when surfing to your article / blog on the frontend, the Social sharing buttons should automagically show up: Cool :)

Overview of tag parameters (ochJSsocials: FULL (subscription) version)

You can set or override the configured plugin settings with the following parameters. Want to remove a configured setting? Just add the parameter with empty string (like: via=""):

  • url="htps://your custom url"
  • title="your custom title"
  • buttonorder="your buttons in the order you like"
  • via="X (twitter) via accountname"
  • call2action="X (twitter) added text"
  • hashtags="X (twitter) added hashtags"
  • quote="your Facebook quote text"
  • image="your Pinterest image"

Support for Custom Article Fields (ochJSsocials: FULL (subscription) version)

You can set or override the configured plugin settings with the following Custom Article Fields, you need to first create these Custom Article Fields and then map them to ochJSsocials in the plugins Integration tab:

  • url (field type url)
  • title (field type: text)
  • buttonorder (field type text)

Facebook Like box (ochJSsocials: FULL (subscription) version)

In the ochJSsocials configuration you need to add the code from the Facebook Like Button Configurator. Here you can configure the Like box just the way you like it. You can leave the 'URL to Like' default because ochJSsocials will overwrite this url on the page with the page url or with the url you configred via a ochJSsocials parameter.

When done configuring the Like box, press [Get Code] and select your App-ID and Language.

Now you can copy the step 2 and Step 3 code into the respective configuration settings of ochJSsocials (tab [Facebook Like].

In the page where you want to show the Facebook Like box you can enter {jssocials fblike}. That tag will then be replace by the Facebook Like box you configured.

If you want to have the Facebook Like box point to a different URL then the current URL, you can set the following tag: {jssocials fblike url="https://your custom url"}.

LIGHT to FULL (subscription) version comparison?

 

 

Available Buttons

Light version

Full version

Twitter + +
 > Call-2-Action text +
 > VIA text + +
 > Hashtags + +
 > Tweet Length + +
Facebook + +
 > Quote - +
LinkedIn + +
Email + +
Pinterest - +
WhatsApp - +
Mix  (StubleUpon successor) - +
Line - +
Telegram - +
Viber - +
Pocket - +
Vkontakte - +
Facebook Messenger - +
SMS - +
Reddit - +
Diaspora - +
Xing - +
Clipboard - +
Wykop - +
Mastodon - +
Popup window (yes) toggle
Responsive Buttons (yes) toggle
Button Labels (yes) toggle
Share count (yes) toggle
Button Order (fixed) Customizable
Button on Device configuration (all) Configure (combination of):
Desktop / Tablet / Mobile

 

Facebook LikeLight versionFull version
Facebook Like Functionality - +

Tag Parameters (overwrite defaults)

Light version

Full version

URL - +
Title - +
Buttonorder - +
Via (twitter) - +
call2action (twitter) - +
Hashtags (twitter) - +
Quote (Facebook) - +

Auto Buttons

Light version

Full version

Position    
 > Top toggle toggle
 > Botton toggle toggle
 > Read More toggle toggle
Exclude Articles + +
Joomla    
 > include / exclude Categories + +
 > Article View toggle toggle
 > Featured View toggle toggle
 > Category View toggle toggle
 > Force Page Title - +
EasyBlog    
 > Include / exclude Categories + +
 > Entry Pages toggle toggle
 > Category Pages toggle toggle
 > Tags pages toggle toggle
 > Blogger Pages toggle toggle
 > Latest Pages toggle toggle
 > Featured Pages toggle toggle
 > Magazine Pages toggle toggle
 > Grid Pages toggle toggle
 > AutoLoaded Pages - +
K2    
 > Include / exclude Categories + +
 > Item Pages toggle toggle
 > Itemlist Pages toggle toggle
 > Latest Pages toggle toggle

Custom Campaigns

Light version

Full version

Custom Campaign Parameters - +
Track Platform - +

Button Themes

Light version

Full version

Classic + +
Flat + +
Minima + +
Plain + +
Custom CSS + +

Component Integration

Light version

Full version

ochBlog Shared By - +
Affiliate Tracker - +

Advanced Settings

Light version

Full version

Mobile check -  
Icon Pack    
 > ochIcons fixed +
 > FontAwesome 4 - +
 > FontAwesome 5 - +
Script and Stylesheet loading - +
Advanced replace - +

 

ochJSsocials FULL (subscription based)

Agency Bundle - 12 months
Agency Bundle - 12 months
Supercharge your Joomla! toolbox with the Agency Bundle! Get all extensions plus 2 Hours of expert support – Subscribe today!
More Information
ochJSsocials - 12 months
ochJSsocials - 12 months
Rapid, privacy-respecting Social Sharing: supercharge your website with lightning-fast buttons!
More Information

(re)Enabling Facebook Share counts (full version)?

Facebook has changed their policy for fetching share counts. When you have enabled 'show counts' and the Facebook share counts are not showing, you need to configure in the [ochJSsocials buttons] tab your Facebook App ID and Facebook App Secret (below the setting where you enable the Facebook share button)

Upgrade / migrate from ochJSsocials LIGHT to ochJSsocials FULL

ochJSsocials LIGHT and ochJSsocials are two independent plugins. This means that you can install them side-by-side.

Upgrading / migrating from one version to another is a manual process. In the example below you have installed ochJSsocials LIGHT and want to 'migrate' to ochJSsocials.

  1. Install ochJSsocials via the Joomla! installer
  2. open the ochJSsocials LIGHT plugin configuration
  3. open the ochJSsocials plugin configuration in a new tab
  4. manually copy the settings from the tab with ochJSsocials LIGHT into the tab with ochJSsocials settings
  5. when done: disable the ochJSsocials LIGHT plugin and enable the ochJSsocialsplugin (do not forget to [save] both plugins configuration changes
  6. check on your website if the buttons are what you expect them to be
  7. if everything is working as expected: uninstall the ochJSsocials LIGHT plugin.

Tips & Tricks

  • See 'strange' jquery text in K2 item's meta description (Facebook / G+ share window)? Look here for a fix
  • Did you know that the Pinterest button only shows when you have an (intro) image in your blog / article?
  • Did you know that in order for the plugin to work on a 'Custom HTML' module, you need to configure this module to 'Prepare content = yes' in the options tab?

Important: when using a Custom module to display the buttons / like box and you display that module on multiple pages: remember to disable caching of the module in the modules advanced settings!

  • Do you prefer round buttons? > in back-end tab [jsSocial buttons] disable label and count and in tab [jsSocials theme] add the following custom css rule
    • .jssocials-share-link { border-radius: 50%; }
    • Make sure you set in [jsSocials Buttons]:
      • Responsive buttons = No
      • Show button labers = No
      • Show share count = No
  • Do the email and whatsapp buttons not have the correct icons? Then your template is probably using an outdated version of the font-awesome icon set. But no worries, that can be quickly fixed by setting up the following custom css rules(s) in tab [jsSocials theme]:
    • .jssocials-share-link .fa-at:before { content:"\f003" }
      .jssocials-share-link .fa-whatsapp:before { content:"W" }
  • You want your own (custom) logo's or icons on the buttons? That is possible by setting up custom css rule(s) in tab [jsSocials theme], e.g. for whatsapp:
    • .jssocials-share-link .fa-whatsapp:before { content: url('https://www.domain.com/directory/.../whatsapp_icon.png') }
    • You both use a remote icon or a local uploaded icon.
  • Display the Social Sharing buttons in Kunena (5.x)? read here how to do that: Social Sharing buttons in Kunena (jssocials)
  • When you entered the jssocials tag in a Custom HTML module and it doesn't 'convert' into buttons: configure you custom HTML module with 'Prepare Content'=yes (Options tab)
  • EasyBlog: In order for the buttons to display on 'auto loaded' pages, you need to configure the advanced setting 'Load Scripts in Head' to 'No'

We do our best to give you the best possible user experience. We are committed to give you the best support possible.

Technical support and feature requests via our forum