Fotis

Fotis

All templates use the K2 Component as their basic content manager. Here are some basic quidelines of how to install and set it up correctly. For more details on each template's specific setup, please advise its documentation, Visual Walkthrough and the demo site or Quickstart package.

  1. Install K2 Component. Go to the Extensions Manager and install the latest version of the K2 component. Download it on getk2.org.
  2. Setting up K2 General parameters. After a success message, navigate to Components → K2 and from the toolbar on the top right corner, select the Parameters Button. This will open a modal window with the general K2 parameters you have to set up according to your needs. One of the parameters that needs to be set before any item addition are the Image sizes. Here are the available sizes for all K2 views and modules: XS, S, M, L, XL, category image, user image, commenter image. Advise each template's documentation located in this section or the Quickstart package for the recommended sizes.
  3. Setting up K2 Categories. Create your category tree in K2 Categories, which will be according to the structure of your site. Set the parameters in your categories, advise the Visual Walkthrough of each template or the Quickstart package, in order to view the resulting pages you see at the template's demo site. It is recommended to keep the parameters in one root category and set all others to inherit from that one. In most of our Quickstart packages the setup categories are marked with "DO NOT DELETE" on their name for better reference. The parameters differ between templates according to structure and features.
  4. Adding K2 Items. After you have set all parameters up, you are ready to add K2 Items. According to the needs of each template, several K2 Item elements are used. These elements include Image, Image Gallery, Media, Extra Fields, Attachments. On each template's documentation, Visual Walkthrough or the Demo site, there is a more detailed reference of the ones being used on each template. 
  5. Setting up K2 menu items. Your available options are between views of: Item, Category/Categories, Latest items by tag, Latest items by user, Tags list, Author list. The item view gets its parameters from the category it belongs. The category also gets its parameters from the category, while there is the option to multiselect categories and set the list parameters for them. You can also override the ordering of the Category parameters through the menu item. The author and tag lists get their parameters from K2 general parameters. The latest from user/category views are the only menu item views that have their parameters here instead of a category or the general K2 parameters.

Please note that all the above steps should NOT be followed if the Quickstart package is used. All setup has already been made according to each template and should work as a guide for your own customization.

For more information about K2 functionality, visit getk2.org.

All our templates have a set of Template Parameters that need to be taken into account. Some have specific functionality added through these parameters. That extra functionality is mentioned in more detail in each template's documetation. To edit the template parameters you need to follow the steps described below.

  1. On the backend of your site, go to Extensions → Template Manager. Locate the template and open it. You will notice multiple sets of parameters divided in three tabs, that need your attention.
  2. The Standard Tab consists of Branding, jQuery Handling, Custom CSS & JS, Google Web Fonts, Meta Tags, Credits & Copyrights, Google Analytics Integration, Webmaster Tools and Social Links.
    • The Branding consists of some simple parameters used in the template, like the Logo (image or text), Tagline and App Icons.
      • For the Logo, read here on how to customize it.
      • The Tagline has a predifined position on each template. Read here for more.
      • The App Icons can be handled through the appropriate fields. Read here for more.
    • Through the jQuery Handling you can choose whether or not to load the library and if load it, which version of it.
    • You can choose whether or not to use the Custom CSS and JS files provided through each template. These two options is advised to stay Enabled and of course used on any modification you want to apply in order not to lose any changes when you update the template. Read more about them here.
    • On each template we have pre-selected the Google Web Fonts used. You can change that through this option. If you want to select more than one just Shift + Click the ones you want.
    • The Meta Tags section is handling the Meta information used in the <head> section of each template.
    • In the Credits & Copyrights section you can add your site's credits and copyrights. This information is used in the site's meta tags and footer.
    • In the Google Analytics Integration section you can add the Google Analytics tracking code without the use of any third party extension.
    • Through the Webmaster Tools section you can verify your site on the most popular search engines to enable faster content crawling. The IDs you enter are appended as special meta tags in the <head> section of each template.
    • Finally, through the Social Links section you can handle all social profile URLs. You can see in which template this social information is rendered through each ones Documentation or Visual Walkthrough.
  3. The Code tab consists of some blocks where you can add custom HTML, CSS or JavaScript code to your template's output, without using third-party extensions either in the <header> or <body> (in the beggining or end of body tag) of each template. Each one explains the exact location it will load.
  4. The Template Specific tab varies per template and contains information about Highlights, Color Variations, Content Variations, Category Colors or Tabs. In each template's documentation you will find a reference with which ones are used per occasion.

For adding custom analytics code to your site click here.

The Quickstart Package includes a full Joomla installation with K2 (both latest versions) and sample data, exactly how you see it in the demo site of each template, in a single .zip file. Every template has a Quickstart Package for the latest version of Joomla (3.x at the time of writing).

The installation is similar to that of a Joomla installation. You just need to follow these steps.

  1. Get the Quickstart package for the template you wish to use and upload the .zip file to your server using your prefered FTP client or throught a control panel's file manager (cPanel, Plesk and others have one).
  2. Unzip it. If there is no such capability through your host, you can use the Akeeba Kickstart archive extraction script, extract the Akeeba Kickstart files locally and then upload the extracted files in the same folder you uploaded the .zip file of the Quickstart package.
    For a more detailed description about how to use the Akeeba Kickstart method, read here.
  3. If you haven't already set up a MySQL database, now would be a good time to do so. Do not forget to set the database collation to UTF-8 (utf8_general_ci). Note down the database name, user and password as they will be needed during the installation process.
    If your hosting is based on cPanel this tutorial will help you. 
  4. Open a web browser and navigate to http://www.mysite.com/installation/index.php OR to http://www.mysite.com/kickstart.php if you are using the Akeeba Kickstart method, substituting the www.mysite.com with your site's domain name.
  5. Follow all steps with caution and fill in where needed. Do not forget to substitute the database settings with your own. Also, in the last step it is recommended to click on the Remove the installation directory button as shown in the last screenshot below. If you have used the Kickstart extraction script, close the last step's window and click on the Clean up button in the window where Kickstart is still open.
  6. Once everything is set correctly, you should be able to see the frontend and access the backend of the site.

You can now browse through every element and start your customization.

Note: The Quickstart package requires PHP 5.3. If you have an older version installed in your server then you will have to follow the manual installation of the package.

 

22 10 2014

Before you start with the nuContent plugin setup, go to the Downloads section and download it. The Quickstart package already includes this plugin, so if you choose to use it, there is no need downloading it.

Installing nuContent Package

  1. After logging in the backend of your site, go to the Extensions → Extensions Manager, click on Browse button, locate the .zip file and click on Upload & Install button.
  2. After the success message you can start setting up. Begin with setting up the Plugin first and move on to the Modules afterwards.

Setting up nuContent Plugin

The nuContent plugin, is located in Extensions → Plug-in Manager as Content - NuContent. It has two set of options. The Basic and the Advanced.

In Basic options you can set:

  • in which categories to render the plugin
  • the image sizes to use in your content views. The image sizes available are: XS, S, M, L, XL, like K2. You can select which size you want to render in the listing pages and in the article pages. After putting the options needed, SAVE them and then click on the Import Joomla articles button, located under Maintenance header. It is very important to enter all options for the images and SAVE first, before clicking the import button.

In the Advanced options there are also some set of options that add extra functionality such as:

  • the latest from user X articles,
  • the X number of articles that are related by tag with the one you are viewing and
  • the use of DISQUS as your comments mechanism.

Note *: It is advised to enter all or some of your content first and click on the Import Joomla articles button through the plugin afterwards. If something like that is not possible, use the Regenerate Images option under Maintenance in the plugin parameters.

Setting up nuContent Modules

Along with the nuContent plugin, a set of modules with pretty similar structure and functionality with K2 modules are provided. The available nuContent modules are: nuContent Comments, nuContent ItemsnuContent Menu, nuContent Tools and nuContent Users.

The nuContentComments module includes the following two options: Latest Comments, Top Commenters, like the K2 Comments module. The difference is that the nuContentComments module fetches its content through DISQUS.

The nuContent Items module fetches articles of all/specific categories or specific articles. It has multiple parameters which are similar to those of the K2 Content Module and can be seen through the screenshots below.

The nuContentMenu module could be used to substitute the Menu Module of Joomla.

The nuContent Tools module includes the following options: Archive, Authors List, Blog style - Calendar, Breadcrumbs, Categories List (Menu), Category Select Box, Search Box, Tag Cloud, Custom Code. Depending on which one you choose, you need to set the appropriate parameters. The available parameters are shown to the screenshots below.

The nuContent Users module shows all or specific users/authors with their details (name, avatar, e-mail) and a number of the items they have written.

Depending on the template you are using, visit the demo site, locate the module you want to use and advise the template's documentation or Visual Walkthrough for the appropriate setup.

Note **: In order for the tag cloud option in nuContent Tools module and the tags in nuContent Items to work, you will have to edit the content plugin we described above andclick the Import !Joomla Articles button. The Meta Keywords field of each article is used for the tags and tag cloud.

Note ***: For Joomla 3.1 you can either use the Meta Keywords field and render those tags through the nuContent plugin, or you can just use the Tags field and get the default Joomla functionality of the tags.

There are some steps you need to follow in order to install the template package.

  1. Login to the backend of your site.
  2. Go to Extensions → Extensions Manager, click on Browse button, locate the .zip file of the template you have downloaded and click on Upload & Install button.
  3. After the success message go to Extensions → Template Manager, locate the template you just installed and edit it. Check all parameters and fill in where needed. For more details on that, advise each template's documentation or the Quickstart package you have downloaded.
  4. Once done with that, Save your changes by clicking on the Save button.
  5. As a last step, make this template the Default one. To achive that, choose it from the list and select the Make Default button from the menu on the top of the screen.

Note: If you are using the Quickstart package always update the template package as it may contain changes.

22 07 2014

As you may have noticed the past few weeks, we have unpublished the product pages for K2mart and SuperBlogger. As it occurs with every other product or technology, there is a time when we have to say goodbye, either because a new better product or technology fulfills our needs or simply because it's not required anymore.

18 04 2014
F-i-n-a-l-l-y! Goodbye, adieu, sayonara, άντε γεια & good riddance to Joomla LTS releases!

The Joomla team has decided to ditch the Ubuntu style release cycle (a truly WTF decision in the first place) and once and for all end confusion to developers, users, customers and clients from hell.

This means that the current release (3.x) is the current stable release. There is NO need to use Joomla 2.5 anymore. It won't be more stable compared to Joomla 3.x. And when 4.x is released, that will be the new stable release and so on.

An exception will be made for Joomla 2.5 and it will be supported until the end of 2014. Joomla development will then shift entirely to Joomla 3.x.
07 03 2013
2013 is bringing a lot of new cool things from the JoomlaWorks labs. New extensions that we hope will redefine essential functionality within any Joomla site and lots of updates to our existing line of extensions, like K2, Frontpage Slideshow and Simple Image Gallery Pro. The latter will now become a "component based" extension (from just a plugin) to allow content managers to easily create and edit image galleries and their captions for K2 and any other extension within Joomla.

We've always put user friendlyness and ease of use above all when building our extensions. At least up to what's possible for any type of extension.  Simple Image Gallery Pro was great (and still is) as a plugin that allows you to zip a bunch of files and quickly transform them to an image gallery grid. It's no wonder why the free version is one of the most popular extensions in the Joomla Extensions Directory for many years now. People hate to use tools that take more time to deal with than the actual content they're producing. If it takes you more time to upload a gallery than shooting the actual pictures, then there's a problem. And unfortunately, many gallery components in the Joomlasphere simply fail to deliver what they promise.
A few days ago we launched SocialConnect, a new kind of social extension for Joomla which we plan to extend over time to become the no. 1 integration hub for social networks for your Joomla site.

It's part of our "masterplan" to redefine what we consider basic functionality for any Joomla site. It started with K2 and now it's moving deeper into more specialized areas. SocialConnect is an extension that -as with all things made by JoomlaWorks- came out from a real need. And it was tested extensively for more than a year on the K2 Community, before being publicly released.

System requirements


Below are the system requirements for SocialConnect:

  • PHP version 5.5.x or newer.
  • PHP cURL library.
  • PHP JSON.
  • PHP HMAC.
  • Joomla 1.5, Joomla 2.5 or Joomla 3.x.

You can check anytime the system requirements by visiting the SocialConnect Dashboard page:

sc requirements 2018

Further requirements


SocialConnect integrates the most popular social networks in your Joomla website. These networks require some setup on their side to allow you to use their services:

  • Facebook integration: Please have a look at the updated documentation here: https://docs.joomlaworks.net/#/pages/socialconnect/facebook
  • Twitter integration: In order to allow users to login to your site using their Twitter account you need to create a Twitter application. Read the “Creating a Twitter Application” section of this document for more information. In addition, since version 1.5, SocialConnect allows you to create tweets of your site content to a specified Twitter user timeline. In order to enable this feature you need to authorize your Twitter application. You can read the “Authorizing your Twitter application” section of this document for more information.
  • Google/Google+ integration: In order to allow users to login to your site using their Google/Google+ account you need to create a Google application. Read the “Creating a Google Application” section of this document for more information.
  • LinkedIn integration: In order to allow users to login to your site using their LinkedIn account you need to create a LinkedIn application. Read the “Creating a LinkedIn Application” section of this document for more information. In addition, since version 1.8, SocialConnect allows you to post your site content to a specified LinkedIn user timeline. In order to enable this feature you need to authorize your LinkedIn application. You can read the “Authorizing your LinkedIn application” section of this document for more information.
  • GitHub integration: In order to allow users to login to your site using their GitHub account you need to create a GitHub application. Read the “Creating a GitHub Application” section of this document for more information.
  • WordPress.com integration: In order to allow users to login to your site using their WordPress.com account you need to create a WordPress application. Read the “Creating a WordPress Application” section of this document for more information.
  • Microsoft integration: In order to allow users to login to your site using their Microsoft account (this includes Outlook.com, Hotmail, Windows Live, SkyDrive, Windows Phone and Xbox Live accounts) you need to create a Microsoft application. Read the “Creating a Microsoft Application” section of this document for more information.
  • Instagram integration: In order to allow users to login to your site using their Instagram account you need to create an Instagram application. Read the “Creating an Instagram Application” section of this document for more information.
  • Foursquare integration: In order to allow users to login to your site using their Foursquare account you need to create a Foursquare application. Read the “Creating a Foursquare Application” section of this document for more information.
  • Amazon integration: In order to allow users to login to your site using their Amazon account you need to create an Amazon application. Read the “Creating an Amazon Application” section of this document for more information.
  • StackExchange integration: In order to allow users to login to your site using their StackExchange account (this includes stackoverflow.com and all the StackExchange sites listed at http://stackexchange.com/sites ) you need to create a StackExchange application. Read the “Creating a StackExchange Application” section of this document for more information.
  • SoundCloud integration: In order to allow users to login to your site using their SoundCloud account you need to create a SoundCloud application. Read the “Creating a SoundCloud Application” section of this document for more information.
  • Tumblr integration: In order to allow users to login to your site using their Tumblr account you need to create a Tumblr application. Read the “Creating a Tumblr Application” section of this document for more information.
  • DISQUS integration: In order to integrate DISQUS comments to your site you need to have a DISQUS account. In order to allow users to log in to our site using their DISQUS account you need to create a DISQUS application. Read the “Creating a DISQUS Application” section of this document for more information.

The SocialConnect Dashboard page can provide you with information about the social networks you have already setup:
sc dashboard 1.8

Installation - Upgrade

To install SocialConnect simply use Joomla Extension installer and install it like any other extension. If you already running an older version of SocialConnect just install the new version without uninstalling the previous one.

Settings

All SocialConnect settings are located under the administration component. Settings are divided in the following groups:

  • Social Login Settings
  • Social Comments Settings
  • Social Auto Post Settings
  • System Settings
  • Permissions

Social Login Settings

Twitter

In order to enable Twitter login to your site you need to create a Twitter application and provide SocialConnect the following settings:

  • Consumer key. This the consumer key of your Twitter application.
  • Consumer secret. This is the consumer secret of your Twitter application.

Both of the above can be found on your Twitter application page. If you are not familiar with Twitter Applications then read the following section which provides a step-by-step process for creating one. Note that you also need to provide these settings if you want to use SocialConnect auto-post feature for Twitter.

Creating a Twitter Application

First go to https://apps.twitter.com/ and sign in using your Twitter account. After that click the “Create New App” button and you will be transferred in the “Create an application” page. There you need to fill in all the fields:

  • Name. Your application name. Give something like your site URL or your site name.
  • Description. Give a short description of your application.
  • WebSite. Give your website URL.
  • Callback URL. Give again your website URL.

Once you fill the above fields, you need to accept the terms. When you have finished click on the “Create your Twitter application” button and you are done! All you need to do now is to spot the “Consumer key” and the “Consumer secret” in your application page and provide them to SocialConnect. Below is a typical Twitter application setup for SocialConnect:
sc-twitter

Google/Google+

In order to enable Google/Google+ login to your site you need to create a Google application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your Google application.
  • Client secret. This is the client secret of your Google application.

Both of the above can be found on your Google application page. If you are not familiar with Google Applications then read the following section which provides a step-by-step process for creating one.

Creating a Google Application

First go to https://console.developers.google.com and sign in using your Google account. After that open the dropwdown list on the upper right part of the screen which is populated with your current projects. You should see a link in the list named  “Create a project....” .  Click on that and then you will be asked to give a name to your project. After you do so, click the “Create” button. Then you will be transfered to the project dashboard page. Click on the block named  "Use Google APIs" and on the next screen use the menu on the left and click the link named "Credentials".  On the next screen click on the "New credentials" button and choose "oAuth client ID" from the dropdown. Choose "Web application" as "application type" and provide your site's URL to the field "Authorized JavaScript origins".  In the field "Authorized redirect URIs" enter the following:

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=googleoauth.

After that click on the "Create client ID" button and you are done.

If you wish to integrate Google+ sign in to your site, then you need to also enable Google+ API for your application. To do so, use  the menu on the left and navigate to "API Manager" and then locate the "Google+ API" and enable it. Finally, navigate back to "Credentials" and edit the last credentials entry you created before. Then in the field "Authorized redirect URIs" add the following one:

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=googleplusoauth

Now just click on the “Save” button to complete the process. You are ready to go now. Just provide the Client ID and Client secret of your application to SocialConnect.

Below is a typical Google application setup for SocialConnect:
sc google 2015

LinkedIn

In order to enable LinkedIn login to your site you need to create a LinkedIn application and provide SocialConnect the following settings:

  • API key. This the API key of your LinkedIn application.
  • API secret. This is the API secret of your LinkedIn application.

Both of the above can be found on your LinkedIn application page. If you are not familiar with LinkedIn Applications then read the following section which provides a step-by-step process for creating one.

Creating a LinkedIn Application

First go to https://developer.linkedin.com/ and sign in using your LinkedIn account. After that click the “API keys” button which can be found under your account name and in the next screen click on the “Add New Application”. Fill in the form and click on the “Add application” button in the bottom of the page. Finally grab the generated API key and Secret key and provide them to SocialConnect. Below is a typical LinkedInapplication setup for SocialConnect:

sc-linkedin

If you have followed the steps described above, now you should be able to use LinkedIn login in your site! However there is a last step to enable the LinkedIn auto post feature. You just need to add one more URL to the "oAuth 2.0 Authorized Redirect URLs" field. The new URL should be: http(s)://YOUR_SITE_URL/administrator/index.php?option=com_socialconnect&view=authorize&service=linkedin


GitHub

In order to enable GitHub login to your site you need to create a GitHub application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your GitHub application.
  • Client secret. This is the client secret of your GitHub application.

Both of the above can be found on your GitHub application page. If you are not familiar with GitHub Applications then read the following section which provides a step-by-step process for creating one.

Creating a GitHub Application

First go to https://github.com and sign in using your GitHub account. After that click the “Settings” icon on the upper right menu. This will navigate you to your account settings page. Then you need to click the "Applications" link of the menu on the left and in the next screen you will see a button named "Register new application". Once you click it you will see the application page. You are asked there to give a name to your application. You can give whatever name you want. This is what users will see when they attempt to sign in to your site using GitHub. Next you need to provide a "Homepage URL" and an "Authorization callback URL" . Type in both these inputs the URL of your site. Finally click the "Register application" button to complete the proccess. Below is a typical GitHub application setup for SocialConnect:
sc-github

WordPress

In order to enable WordPress login to your site you need to create a WordPress application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your WordPress application.
  • Client secret. This is the client secret of your WordPress application.

Both of the above can be found on your WordPress application page. If you are not familiar with WordPress Applications then read the following section which provides a step-by-step process for creating one.

Creating a WordPress Application

First go to http://developer.wordpress.com/apps/ and sign in using your WordPress account. Once you do so click the button named "Create New Application". In the form that appears type the name of your site in the field "Name". You also need to fill in the "Website URL" and the "Redirect URI" fields. Type there the URL of your site and ensure that the type of the application is set to "Web". Finally click the "Create" button. Your application should be ready now. Below is a typical WordPress application setup for SocialConnect:
sc-wordpress

Microsoft

In order to enable Microsoft login to your site you need to create a Microsoft application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your Microsoft application.
  • Client secret. This is the client secret of your Microsoft application.

Both of the above can be found on your Microsoft application page. If you are not familiar with Microsoft Applications then read the following section which provides a step-by-step process for creating one.

Creating a Microsoft Application

First go to https://account.live.com/developers/applications/index and sign in using your Microsoft account. Once you do so click the link named "Create application" and in the next screen type a name for your application in the field named "Application name" ( you can type your site name here). After accepting the terms of use you will be redirected to the application setup page. There you need to enter the URL of your site to the field named "Root domain".

Microsoft also requires the exact redirect URLs to be entered in the application settings, not just the domain. On top of that, those URLs should not contain any query strings. This means that the redirect URL should be set to "http://www.yoursite.com/component/socialconnect/login/windowsoauth" or "http://www.yoursite.com/index.php/component/socialconnect/login/windowsoauth" depending on the SEF settings of your site. We also need to also take care of SSL, so the URL could also be "https://www.yoursite.com/index.php/component/socialconnect/login/windowsoauth"  .

Finally, ensure that the radio button "Mobile client app" is set to "no" and click the "save" button. Your application should be ready now. Below is a typical Microsoft application setup for SocialConnect:
sc-microsoft

 

Instagram


In order to enable Instagram login to your site you need to create an Instagram application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your Instagram application.
  • Client secret. This is the client secret of your Instagram application.

Both of the above can be found on your Instagram application page. If you are not familiar with Instagram Applications then read the following section which provides a step-by-step process for creating one.


Creating an Instagram Application

Navigate to http://instagram.com/developer/ and sign in using your account. After that click on the "Manage Clients" button on the upper part of the screen and click on the "Register a New Client" button. Enter a name and a description for the application. Type your website URL in the "Website" field and enter the following URL to the field named "OAuth redirect_uri":

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=instagramoauth.

Finally click on the "Register" button and your application should be ready for use. Below is a typical Instagram application for use with SocialConnect:

sc instagram

 

Foursquare

In order to enable Foursquare login to your site you need to create a Foursquare application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your Foursquare application.
  • Client secret. This is the client secret of your Foursquare application.

Both of the above can be found on your Foursquare application page. If you are not familiar with Foursquare Applications then read the following section which provides a step-by-step process for creating one.

Creating a Foursquare Application

Visit https://developer.foursquare.com/ and sign in using your account. Click on the "My apps" link of the menu on the top and on the next screen click on the "CREATE A NEW APP" button on the right. Enter a name for the application and type your site's URL to the fields "" and "" . In the field "" enter the following URL:

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=foursquareoauth.

Finally provide the "" and "Detailed description" fields and click on the "SAVE CHANGES" button. Below is a typical application setup for use with SocialConnect:

sc foursquare

 

 

Amazon

In order to enable Amazon login to your site you need to create an Amazon application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your Amazon application.
  • Client secret. This is the client secret of your Amazon application.

Both of the above can be found on your Amazon application page. If you are not familiar with Amazon Applications then read the following section which provides a step-by-step process for creating one.

Creating an Amazon Application

Navigate to http://login.amazon.com/app-console-login and sign in using your account. After that click on the "Register new application" button on the right part of the screen. Enter a name and a description for the application and type your website URL in the "Privacy Notice URL" and click "save" . In the next screen click on the "Web settings" and after that on the "edit" button. In the field named "Allowed Return URLs" add the following URL:

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=amazonoauth.

Note that Amazon requires a secure URL. . This means that your site should be accessible over https.

Finally click on the "Save" button and you are ready to go. This is a typical application setup for use with SocialConnect:

sc amazon


DISQUS

In order to enable DISQUS login to your site you need to create a DISQUS application and provide SocialConnect the following settings:

  • API key. This is the API key of your DISQUS application.
  • API secret. This is the API secret of your DISQUS application.

Both of the above can be found on your DISQUS application page. If you are not familiar with DISQUS Applications then read the following section which provides a step-by-step process for creating one.


Creating a DISQUS Application

Visit https://disqus.com/api/applications/ and sign in using your account. Click on the "Register new application" button on the right. Fill in all the fields and click on the "Register my application" button. After that you will get redirected to the settings page of the application you just created. Enter your site's domain in the "Domains" field and  in the field named "" enter the following URL:

YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=disqusoauth.

Finally, click on the "Save Changes" button. You can find the required keys in the "details" page of your application. Below is a typical application setup for use with SocialConnect:

sc disqus login

 

StackExchange

In order to enable StackExchange login to your site you need to create a StackExchange application and provide SocialConnect the following settings:

  • Client ID. This is the Client ID of your StackExchange application.
  • Client secret. This is the API secret of your StackExchange application.
  • Key. This is the Key of your StackExchange application.
  • Site. Here you select the StackExchange ( StackOverflow for example ) site for which you want to enable login on your site.

Both of the above can be found on your StackExchange application page. If you are not familiar with StackExchange Applications then read the following section which provides a step-by-step process for creating one.


Creating a StackExchange Application

Visit http://stackapps.com/apps/oauth/register and sign in using your account. Fill in name, description and website fields and in the field named "oAuth Domain" enter your site's domain.
Finally, click on the "Register Your Application" button and you are ready to go. Just remember that after entering the client id and the client secret to SocialConnect settings page you also need to select one of the StackExchange sites listed there. Below is a typical application setup for use with SocialConnect:

sc stackexchange

Tumblr

In order to enable Tumblr login to your site you need to create a Tumblr application and provide SocialConnect the following settings:

  • Consumer key. This the consumer key of your Tumblr application.
  • Consumer secret. This is the consumer secret of your Tumblr application.

Both of the above can be found on your Tumblr application page. If you are not familiar with Tumblr Applications then read the following section which provides a step-by-step process for creating one.

Creating a Tumblr Application

First go to https://www.tumblr.com/oauth/apps and sign in using your Tumblr account. After that click on the "Register application" button. Fill in all the fields that are required. In the field named "Default callback URL" you need to enter the following value: YOUR_SITE_URL/index.php?option=com_socialconnect&view=login&task=tumblroauth . Finally click the "Register" button to save your application. You are ready to go now. Just provide the Consumer key and Consumer secret of your application to SocialConnect.

Below is a typical Tumblr application setup for SocialConnect:
sc tumblr

SoundCloud

In order to enable SoundCloud login to your site you need to create a SoundCloud application and provide SocialConnect the following settings:

  • Client ID. This the client ID of your SoundCloud application.
  • Client secret. This is the client secret of your SoundCloud application.

Both of the above can be found on your SoundCloud application page. If you are not familiar with SoundCloud Applications then read the following section which provides a step-by-step process for creating one.

Creating a SoundCloud Application

First go to https://developers.soundcloud.com and sign in using your SoundCloud account. After that navigate to http://soundcloud.com/you/apps and click on the "Register a new application" button. Then you will get prompted to give a name to your application. Give something meaningful (like your brand name) and click on the "Register" button. In the next screen, provide the following options:

  • Website of your app: Enter the URL of your website
  • Redirect URI for Authentication: SoundCloud only accepts SEF URLs in this field. This means that you should have enabled the SEF URLs under Joomla configuration. Depending on your configuration, the value that you need to enter here is one of the following:
    • http://YOUR_SITE_URL/index.php/component/socialconnect/login/soundcloudoauth?Itemid=
    • http://YOUR_SITE_URL/index.php/component/socialconnect/login/soundcloudoauth.html?Itemid=
    • http://YOUR_SITE_URL/component/socialconnect/login/soundcloudoauth?Itemid=
    • http://YOUR_SITE_URL/component/socialconnect/login/soundcloudoauth.html?Itemid=
  • Pick the one that matches with your SEF URLs options.

Finally click the "Save app" button to save your application. You are ready to go now. Just provide the Client ID and Client secret of your application to SocialConnect.

Below is a typical SoundCloud application setup for SocialConnect:
sc soundcloud

 



Social Comments Settings

Here you can find options regarding the comments integration. The first option is named " Comments Service " and it allows you to select one of the available comments services. Each of those services require extra setup which is detailed below:

Facebook

Please have a look at the updated documentation here: https://docs.joomlaworks.net/#/pages/socialconnect/facebook

DISQUS

  • DISQUS shortname: The shortname of your DISQUS account. In order to enable DISQUS comments on your system you need to have a DISQUS account. Visit https://disqus.com/ for more information.
  • DISQUS Developer mode: This tells DISQUS to render in developer mode. This is usefull while developing in a local environment like a local web server which is not accessible from the web. In production environments you need to set this to "Disabled".

 

Social Auto Post Settings

In this section you will find options affecting the auto post features of SocialConnect.

  • AutoPost layout: This allows you to select the layout of SocialConnect auto post widget. The auto post widget is displayed when editing a K2 item or a Joomla article and allows you to share the content of the item ( or article ) being edited to one or more of the supported social networks. Currently SocialConnect auto post supports Facebook and Twitter only.

Facebook

Please have a look at the updated documentation here: https://docs.joomlaworks.net/#/pages/socialconnect/facebook

Twitter

  • Post content to Twitter: Set this to "Enabled" if you want to enable the Twitter option to the auto post widget. This requires that you have authorized your Twitter application to post content.
  • Post on behalf of: Here you can authorize your Twitter application to post content using the auto post widget to a Twitter account. Click the link named "authorize" and follow the steps as guided by Twitter. Once you complete the process the authorization pop up window will close and you will see the screen name of the Twitter account you authorized. Note that in order to be able to authorize your Twitter application you need to already have setup a Twitter application in the "Social Login Settings".

LinkedIn

  • Post content to LinkedIn: Set this to "Enabled" if you want to enable the LinkedIn option to the auto post widget. This requires that you have authorized your LinkedIn application to post content.
  • Post on behalf of: Here you can authorize your LinkedIn application to post content using the auto post widget to a LinkedIn account. Click the link named "authorize" and follow the steps as guided by LinkedIn. Once you complete the process the authorization pop up window will close and you will see the name of the LinkedIn account you authorized. Note that in order to be able to authorize your LinkedIn application you need to already have setup a LinkedIn application in the "Social Login Settings". Finally note that LinkedIn requires to authorize your application after 60 days. If you get an error message during posting to LinkedIn that the access token in invalid or has expired you have to repeat the authorization process from the settings page of SocialConnect.


Advanced Settings

  • For social logins only, generate usernames from:
    • The user's full name. The account of the user will be created using his full name as username. Note that the full name is the name provided by the social network used to sign in.
    • The user's email address. The account of the user will be created using his email address as username. Note that the email is the email provided by the social network used to sign in.
    • The user's email address encrypted. The account of the user will be created using a hash of his email address as username. Note that the email is the email provided by the social network used to sign in.
    • A unique number plus a social network identifier. The account of the user will be created using a generated username based on the social network name and the identifier of the user in that network. For example, users that sign in using a Facebook account will get a username like "[email protected]".

Note that SocialConnect does not create any user accounts. SocialConnect just signs in the user. However,  Joomla is creating a user account for every user that signs in. If you want to change that behavior you can edit the plugin "User - Joomla" and set the setting named "Auto-create Users" to "No".


System Settings

Here you can find settings regarding the general behavior of SocialConnect.

  • StopForumSpam.com integration for user logins: If you enable this, every time a user signs in to your site will be checked for spam activity using the stopforumspam.com API. For more information on this you can visit http://www.stopforumspam.com/ .
  • cURL connect timeout: The number of seconds PHP cURL wait while trying to connect. Use 0 to wait indefinitely. This is an advanced setting and usually should not be changed unless you are facing issues while using SocialConnect. You can read the section of this document titled “Troubleshooting” for more information.
  • cURL timeout: The maximum number of seconds to allow PHP cURL functions to execute. This is an advanced setting and usually should not be changed unless you are facing issues while using SocialConnect. You can read the section of this document titled “Troubleshooting” for more information.

Here you can find settings that can help you tweaking your system to avoid issues while using SocialConnect. For more information on this please read the section of this document titled “Troubleshooting”.

Permissions

SocialConnect integrates Joomla 2.5/3.x permissions system providing the actions “Configure” and “Access Administration Interface”.

Usage

There are two ways for adding SocialConnect to your site. The first one is using SocialConnect module and the second one is creating a menu link to SocialConnect component. In both cases there are some settings that affect SocialConnect functionality. These settings are common and are covered later in this document.

SocialConnect Module

This is the most common way to add a login block to your site. In order to do this you need to create a module instance of the SocialConnect Login module.

SocialConnect Component

This is an alternative way for adding SocialConnect to your site. It may be useful when you want to have a dedicated login page instead of a login block. In order to do this you need to create a standard Joomla menu link to the SocialConnect component.

Settings

Both of the above methods have identical settings. Lets see them in details:

  • Template. Here you can choose the template you wish for the rendering of SocialConnect. The available options here vary depending on the context (module or component) and the available templates to your system. You can learn more about SocialConnect templates by reading the section titled “Templates” of this document.
  • Introduction message. Using this option you can show an introduction message to the visitors of your site. Usually this is being displayed by the SocialConnect template in the beginning of the SocialConnect block. The available options here are:
    • None. Do not display the message at all.
    • Use Default. Display a default text message. The message is coming from the SocialConnect language file.
    • Use custom. Display a custom message. Use this so you can type your own message.
  • Custom Introduction message. Here you type the custom introduction message you wish. This field is a WYSIWYG editor under Joomla 2.5/3.0 and a textarea under Joomla 1.5. In order to display this message you need to set the “Introduction messagesetting to “Use custom”.
  • Registration message (SocialConnect component only). Using this option you can show a message to the visitors of your site to encourage them register. Usually this is being displayed by the SocialConnect template right before the registration button. The available options here are:
    • None. Do not display the message at all.
    • Use Default. Display a default text message. The message is coming from the SocialConnect language file.
    • Use custom. Display a custom message. Use this so you can type your own message.
    Custom Registration message (SocialConnect component only). Here you type the custom registration message you wish. This field is a WYSIWYG editor under Joomla 2.5/3.0 and a textarea under Joomla 1.5. In order to display this message you need to set the “Registration messagesetting to “Use custom”.
  • Sign in message (SocialConnect component only). Using this option you can show a message to the visitors of your site to encourage them sign in to your site. Usually this is being displayed by the SocialConnect template right before the sign inform. The available options here are:
    • None. Do not display the message at all.
    • Use Default. Display a default text message. The message is coming from the SocialConnect language file.
    • Use custom. Display a custom message. Use this so you can type your own message.
    Custom Sign in message (SocialConnect component only). Here you type the custom sign in message you wish. This field is a WYSIWYG editor under Joomla 2.5/3.0 and a textarea under Joomla 1.5. In order to display this message you need to set the “Sign in messagesetting to “Use custom”.
  • Footer message (SocialConnect module only). Using this option you can show a message to the visitors of your site. Usually this is being displayed by the SocialConnect template in the end of the SocialConnect module. The available options here are:
    • None. Do not display the message at all.
    • Use Default. Display a default text message. The message is coming from the SocialConnect language file.
    • Use custom. Display a custom message. Use this so you can type your own message.
    Custom Footer message (SocialConnect module only). Here you type the custom footer message you wish. This field is a WYSIWYG editor under Joomla 2.5/3.0 and a textarea under Joomla 1.5. In order to display this message you need to set the “Footer messagesetting to “Use custom”.
  • Login Redirection URL. Select a menu item of your site to redirect the user after a successful login.
  • Logout Redirection URL. Select a menu item of your site to redirect the user after a successful logout.
  • Encrypt Login Form. Submit encrypted login data (requires SSL). Do not enable this option if Joomla is not accessible using the https:// protocol prefix.
  • Render Menu. Select a Joomla menu to be rendered when user is logged in.

 

Templates

Youcanuse HTML and CSS template overridesinsideyour Joomla templateandcompletelychange the way SocialConnect elements display on your website! You can either choose to use the versatile base styling of the bundled SocialConnect templates or simply override them (boththe HTML and CSS code). Below are the instructions to make SocialConnect overrides depending on the SocialConnect usage (module or component).

Module Templates

Module templates resist in the directory /modules/mod_socialconnect/tmpl. SocialConnect module comes with two ready to use templates.

In order to override the built in module templates you can simple copy /modules/mod_socialconnect/tmpl/TEMPLATE folder within your Joomla template's /templates/YOUR_JOOMLA_TEMPLATE/html/mod_socialconnect folder. Whatever changes yo udo from now on within this folder, will completely override the SocialConnect output, exactly as you would with any other MVC module.

Alternatively you can create your own template by placing your template folder to /templates/YOUR_JOOMLA_TEMPLATE/html/mod_socialconnect. There is no need to place your template to the module templates directory.

SocialConnect module uses two layouts one for guests and one for authenticated users along with one associated CSS file. You are able to override all files or selected files, as you would with any other MVC module, with the better exception that SocialConnect overrides CSS files as well!

Below you can see the file structure of a SocialConnect module template folder:

authenticated.php

default.php

/images

/css

/–– style.css

If you maintain this structure within /templates/YOUR_JOOMLA_TEMPLATE/html/mod_socialconnect/TEMPLATE you can override the entire module output!

Component Templates

Component templates resist in the directory /components/com_socialconnect/templates. SocialConnect component comes with three ready to use templates.

In order to override the built in component templates you can simple copy /components/com_socialconnect/templates/TEMPLATE folder within your Joomla template's /templates/YOUR_JOOMLA_TEMPLATE/html/com_socialconnect folder. Whatever changes you do from now on within this folder, will completely override the SocialConnect output, exactly as you would with any other MVC component.

Alternatively you can create your own template by placing your template folder to /templates/YOUR_JOOMLA_TEMPLATE/html/com_socialconnect. There is no need to place your template to the component templates directory.

SocialConnect component uses four layouts one for guests and one for authenticated users, and one for the email prompt process for social networks that do not provide user's email account from their API. It also has one CSS file. You are able to override all files or selected files, as you would with any other MVC component, with the better exception that SocialConnect overrides CSS files as well!

Below you can see the file structure of a SocialConnect component template folder:

authenticated.php

default.php

twitter.php

/images

/css

/–– style.css

If you maintain this structure within /templates/YOUR_JOOMLA_TEMPLATE/html/com_socialconnect/TEMPLATE you can override the entire component output!

Troubleshooting

In case you are facing issues with SocialConnect there are some simple steps you can take in order to resolve them. SocialConnect prints the error messages on the screen in order to help you identify the cause of the issue. In general there are two kind of issues that you may face while using SocialConnect.

Server/Network errors

The first kind of issues has to do with server/network setup that is preventing SocialConnect to communicate with the social networks it integrates. SocialConnect uses PHP's cURL functionality to make requests to the social networks. In case you get such an error (“Name lookup failed” for example) you can try to tweak PHP settings to resolve it. SocialConnect provides two settings under it's configuration:

  • cURL connect timeout. The number of seconds PHP cURL wait while trying to connect.
  • cURL timeout. The maximum number of seconds to allow PHP cURL functions to execute.

Try to set both of those values to a high enough value (100 for example) if you are facing server/network issues.

Social network errors

This is the other kind of issues you may face while using SocialConnect. If you get an error message like “401: Failed to validate oauth signature and token” then that means that you have not setup correctly the social network you are trying to authenticate with. In that case read again the corresponding section of this document regarding the setup of the specific network and check again that you have completed everything as it is required.