Joomla! 3 PHP 7.4 Maintenance Only
Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1
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 instructionsSocial Media platforms (Twitter, Linkedin, Pinterest, Facebook, Google+, Whatsapp, Mix, LINE, Telegram, Viber, Pocket, Facebook Messenger, vKontakte, SMS, Reddit, Diaspora, Xing, Wykop.pl) are a growing driver for traffic to your blog and integrated Social Media sharing buttons are facilitating community engagement and promotion. But often integrating Social Sharing buttons on your website can break your website's performance (because they load a remotely hosted script) and look-and-feel. Often you are limited as to where these Social sharing buttons are placed on your blog or website. And what are those cookies for that they place? Who asked them to track your visitor? What are they doing with that data?
Time to take control again over your website!
This Joomla! content plugin integrates the open source js-Socials script seamlessly into your web pages. The script itself is only 10K big and because it is installed locally it can be cached and thus is lightning fast!
You get full control on where you want to place the responsive Social sharing buttons: simply by entering the tag anywhere in your blog / article or automatic on the top or bottom positions (or both) of the selected articles.
For example here:
But what do you think of this:
or this:
With the FULL (subscription) version you can set different buttons / button order on a single page! you can even set a different url that you want to share (default is the current page URL). And that's not all: you can even set a custom share text!
And that is not all! The subscription (paid) version also lets you integrate a Facebook Like (or recommend) box on your page:
You can even place the Social sharing buttons automagically in the top / bottom (or both) positions on your articles (configurable per category). And that's not all! you can even choose to have the buttons automagically appear on your featured or category (blog) view: this makes sharing articles from those pages very easy for your visitors.
This will even work on Easyblog entry, categories, latest, bloggers, tags pages! (new feature in v0.3.0)
With one click of the mouse you can change the look-and-feel of all the responsive Social sharing buttons all over your website: all from the plugin's back-end. You want the look and feel to perfectly match your website? No problem: with the custom CSS option you can make them look (and feel) exactly the way you want them to!
[FULL (subscription) version] For the marketeers among us: it is even possible to measure (via e.g. Google Analytics) the effectiveness of your buttons / Social platform via built in UTM support!
Language support
This plugin comes out of the box with the following languages:
- de-DE (partial)
- en-GB
- es-ES (partial)
- fr-FR
- it-IT (partial)
- nl-NL
- pt-BR
- sr-RS
- sr-YU
- tr-TR (Türkçe Çeviri: Mehmet TAŞ)
Don't like the labels on the buttons? Your language not implemented?
You can create or improve your own language on Transifex. Or just use the Joomla! language override system: It's your site, you decide what to do with it :)
Screen-shots
[Gallery created with ochGlightbox]
Want to see the plugin in action?
- ruudOntwikkelt.nl (plain theme, no label, no counter, custom css > color, round buttons)
- www.lerendeleiders.nl (minima theme)
- onlinecommunityhub.nl (plain theme)
Requirements
- Joomla 3.8 or higher
- 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 integration
Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:
- On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
- On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID] field
- Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.
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:
- into the location where you want to automagically display the Social sharing buttons
- [FULL (subscription) version]: 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="twitter via accountname"
- call2action="Twitter added text"
- hashtags="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 Fileds 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 . 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: .
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.