Important:
the ochJSsocials LIGHT plugin has been discontinued and replaced by the ochJSsocials FULL plugin, Check the download tab for a detailed overview and comparison of features! Look in the FAQ for upgrade / migrate instructionsRequirements
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!
- Download the plugin
- in the Back-end go to menu Extensions > Manage
- in the tab [Upload file package] click [browse] and select your downloaded plugin
- click [Upload & Install], wait for the installation to finish
Configuration
- in the back-end go to menu Extensions > Plugins
- search / locate the 'jsSocials' content plugin
- open the plugin
- in the tab [Plugin] set status to [Enabled]
- in the tab [jsSocials buttons] configure your buttons > look at the tool-tips for information about what each button does
- [FULL (subscription) version] in the tab [Custom campaigns] configure your UTM parameter (e.g. used for tracking Campaigns in Google Analytics)
- in the tab [Auto buttons] configure the automatic insertion of the buttons on selected categories (top, bottom, readmore position) or views
- in the tab [jsSocials theme] configure the theme that you want to use
- 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.
- On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
- 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:
- open the blog / article (or even HTML module!) that you want to place the Social sharing buttons in
- insert:
- {jssocials} into the location where you want to automagically display the Social sharing buttons
- [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
- click [Save & Close]
- 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 |
---|---|---|
+ | + | |
> Call-2-Action text | + | |
> VIA text | + | + |
> Hashtags | + | + |
> Tweet Length | + | + |
+ | + | |
> Quote | - | + |
+ | + | |
+ | + | |
- | + | |
- | + | |
Mix (StubleUpon successor) | - | + |
Line | - | + |
Telegram | - | + |
Viber | - | + |
- | + | |
Vkontakte | - | + |
Facebook Messenger | - | + |
SMS | - | + |
- | + | |
Diaspora | - | + |
- | + | |
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)
(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.
- Install ochJSsocials via the Joomla! installer
- open the ochJSsocials LIGHT plugin configuration
- open the ochJSsocials plugin configuration in a new tab
- manually copy the settings from the tab with ochJSsocials LIGHT into the tab with ochJSsocials settings
- when done: disable the ochJSsocials LIGHT plugin and enable the ochJSsocialsplugin (do not forget to [save] both plugins configuration changes
- check on your website if the buttons are what you expect them to be
- 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" }
- .jssocials-share-link .fa-at:before { content:"\f003" }
- 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.