Integrating social network capabilities with Jomsocial

Overview of Jomsocial

If youʼre not familiar with Jomsocial and what it can do, Iʼll begin this lesson by giving you a quick tour of a website thatʼs using it.

Iʼll go to linux.com and click on Linux Community.

This first section here where you can join the community, or login, is being generated by Jomsocial, as is this memberʼs section here where you can see some of the members of this community. This display of recent activities in the community is also coming from Jomsocial.

If I click on one of these avatar images for the members, I can see some information in their public profile.

Iʼll go ahead and login, and once I do Iʼll see some new tabs appear at the top of the page here.

Iʼll be going into more detail on these tabs later on in this lesson, but the profile tab is where I can edit my public profile information.

The Friends tab is where I can search for people in this community and add friends, or see a list of my current friends that Iʼm connected with in this community.

The Applications tab is where I can select different applications that can be added to my profile page. These are all application extensions, or plug-ins, available for Jomsocial.

Each one of them adds a different kind of functionality to the social network.

And the Inbox is where I can receive or send messages to friends that Iʼve connected with in the social network.

There are a couple other areas of this website that are integrated with Jomsocial, which I can access from the drop-down menu here.

The Community Blogs page is using MyBlog, which is a blogging extension created by Azrul, the same company that makes Jomsocial. Itʼs integrated into the social network so that everyone thatʼs a member of the community can create blog posts on the site.

The Groups page is a feature of Jomsocial that allows people to create subgroups within the community.

1

I can filter the listing of groups by various categories.

If I click on the name of one of the groups, Iʼm taken to that groupʼs main page.

Each group has its own section to display announcements, have discussions in the discussion forum, and chat with each other via wall posts.

And if I click on Events, these event listings are being generated by a joomla extension called EventList.

Jomsocial can be integrated with EventList so that content from the event listings can be displayed within Jomsocial.

If I go to the Forums, this forum is being powered by Kunena and has been integrated with Jomsocial. In part what that means is that when I login to Jomsocial, I am also logged into Kunena.

Also, content from the forum can be displayed in different parts of Jomsocial, as well as in a Jomsocial module, such as the module that shows the latest discussions in the forum.

And although this particular community doesnʼt show it, Jomsocial has the ability to allow community members to upload their own photos and videos.

There are many things that Jomsocial can do. If you want to learn more about all of its features, you can visit the features page on the main Jomsocial site.

Installing Jomsocial

The first thing that youʼll need to do in order to get started with JomSocial is to go to jomsocial.com and purchase the latest version of it.

The purchase process is pretty straightforward, so I wonʼt lead you through it.

Once you have the latest version of JomSocial downloaded onto your computer, youʼll need to unzip the file that you downloaded from jomsocial.com, as it contains several other files, one of which is the main component that youʼll need to install.

The other files that are in this zip file are a couple of other zip files that you need to unzip first, such as the modules zip file and the apps zip file.

Each of those zip files has a large collection of other extensions in them that you can install to extend the functionality of Jomsocial. They were all created by the Jomsocial team, as opposed to Jomsocial addons that were created by third-parties.

Iʼll start by installing the main component.

2

To do this, Iʼll go into the backend of my site and go to Extensions and then select Install/Uninstall.

Then Iʼll click on Browse and find the location of the JomSocial file that I just downloaded, and when I find it Iʼll open up this folder and double-click on the com_community_pro file.

Then Iʼll click on Uploaded file and install.

Next, Iʼll need to click on this button here to complete the installation process.

And now Iʼll be led through a much more extensive installation process then what is common for joomla extensions.

This first page is a welcome page to let me know about the process of installing that Iʼm about to go through, and it also does a quick check of the image libraries that are installed to make sure that everything is compatible.

Everything is okay on this page so Iʼll click on Next.

And once Iʼve done that, the installation process will cycle through all the steps by itself. In other words, once you click on Next once you shouldnʼt need to click on it again.

When the installation is done and successful you will see this page.

And now I can click on Next and Iʼll be taken to the main control panel for Jomsocial.

Iʼll be coming back to this control panel in a little while to show you how you can change the settings for Jomsocial.

Now, itʼs interesting to note that when youʼre done installing Jomsocial, part of the installation process will create a menu item on your main menu for the Jomsocial component.

I point this out because this is not common for extensions to do.

If I go over and look at my main menu now by going to menus and then selecting Main menu, I can see that a menu item for Jomsocial has been added automatically.

Iʼll go ahead and change the name of this menu item from Jomsocial to Community by clicking on the name of this menu item and changing the name right here.

And Iʼll be sure to delete the content thatʼs in the alias field, so that joomla will fill it in automatically based on the new menu item title I just entered.

3

Then Iʼll save this menu item.

Setting up a cron-job

One of the first things that Iʼll need to do in order to ensure that Jomsocial will run smoothly and not affect server performance if my community gets large, is to set up a Cron job on my server.

A Cron job is a way to set up some processes on the server that will run automatically at a given interval of time.

I wonʼt go into the details, but just know that itʼs important to set this up to keep your site running smoothly, and in particular, to keep Jomsocial running well.

There are a few ways you can set up a Cron job on your server. Iʼll show you how to do it through the cPanel interface of the webhost that Iʼm using.

Iʼm already logged in to the cPanel for my web host account, so Iʼll scroll down to the bottom Advanced section and click on Cron jobs.

In the “Add new cron job” section of this page, under Common Settings, Iʼll select every five minutes so that this particular con job is run every five minutes of every day.

Then, in the fields next to Command Iʼll paste in a command that you can get in the intro text above this video.

[ lynx -source "http://yoursite.com/index.php?option=com_community&task=cron" > /dev/null ]

And then, back at the beginning of this command, Iʼll need to change “yoursite.com” to the actual domain name for my website.

Once Iʼve done this I can click on “Add new cron job”.

And once Iʼve done that, I can scroll down in the Current Cron Jobs section and see the Cron job that I just set up.

Viewing the default install of Jomsocial on the front of the site

Before I start configuring things in the administration side of Jomsocial, Iʼll take a look at how the default installation looks on the front of my site.

Iʼll click on Community and I can see how things look right out of the box, or mostly right out of the box. Iʼve got a couple users set up here for demonstration purposes.

4

By default, any users in your Joomla user list will be added as members of this social network.

Iʼll go ahead and login with one of these users.

And once I do, Iʼm taken to my profile page where I can see and edit some basic information about myself.

Also, notice that thereʼs a set of tabs at the top of Jomsocial that allows me to now access some new areas of the social network.

If I want to edit my profile, I can click on this link below here.

Iʼll enter in some info about myself in these fields, and then click on save.

By default, when people sign up for your network, they will have to fill in this profile information.

You can change the settings for that if you donʼt want that to be the case.

Creating Custom Profile Fields

If you want to create custom fields for memberʼs profile, let me show you where to do that.

Back in Jomsocial, Iʼll go into the Custom Profiles tab.

And here are all of the fields in the profile that I just filled out.

You can edit or delete any of these fields if you like, or create new ones.

To edit a field, click on itʼs name and youʼll see this pop-up window come up with some options you can change.When youʼre done, click on save.

If you want to delete a field, check the box next to it and then click on Delete.

If you want to create some new fields, you can either add a new field to an existing group, or create a new group and add your fields to that group.

Groups are basically sections of profile fields. By default, Jomsocial comes with some groups already set up, which you can see here.

To create a new group, Iʼll click on New Group, and in this pop-up box, Iʼll enter in the name of the group, and then click on Save.

5

[Favorites]

And to create a new field, Iʼll click on New Field.

In this window, Iʼll enter in a name for this new field.

[Whatʼs your favorite band?]

And for the type of field, I can select a number of different field types from this list here.

Iʼll just select textbox, which will create a small field for people to enter text into.

For the Group that I want this field to be in, Iʼll select the field group I just created.

For the Field Code, Iʼll enter in a short name for this field in all caps with no spaces.

The Registration setting allows me to set whether or not this field will show up on the profile page that appears during the sign up process. Iʼll leave this set to yes.

For the tooltip, I can put in a little message that will help people figure out what to put here. This is the message that will appear in a small popup box when people hover their mouse over the field.

[Tell us the name of your favorite band.]

Over here I can set whether or not this field will be required or not. Iʼll set this to No.

And Iʼll leave everything else as it is and click on Save.

Back on the front of the site, when I go to edit my profile again, I can see the custom field I just created.

Continuing the tour of a basic Jomsocial installation

If I want to upload a photo for my avatar in the social network, I can click on Change profile picture and upload a new photo here by clicking on Browse, finding an image on my computer, double clicking on it, and then clicking on Upload.

Back on my profile page, I can see the information I entered for the profile questions in the right column.

Also, I can enter a status update, which is like a Twitter tweet or a Facebook update, in this field here.

My updates will appear below here in the recent activity area, as well as on the homepage of the network.

6

I can change some other details about my account, such as my name or password, in the network by clicking on Edit Details.

In the Privacy tab, I can change some settings to control who can see what about me, and what emails I want to receive from the network.

And in the Preferences tab, there will be some other options here.

Under the Friends tab, I have a number of options related to connecting with people

I can invite people to this network and search for people already in the network who I want befriend within the network.

Iʼll search for one now.

When I find a person I want to friend, I can click on this link here and send a request message to them.

Iʼll come back to the Applications tab later. I donʼt have any applications installed in Jomsocial yet, so there wonʼt be anything to see in there.

The Inbox tab is where Iʼll receive messages from my friends in the network, or where I can send messages to any of my friends.

Adding Photos and Videos

If I want to upload some photos to the social network, I can do so by clicking on Upload Photos at the bottom of my profile page here.

Iʼll first need to create an album by clicking on this link, then Iʼll give the album a name, and then click on Create Album.

And I can start uploading photos by clicking on browse and finding some photos that I want to upload.

Once I load one photo I can do the same and continue loading photos into this album.

And once Iʼve got a number of photos loaded onto this page, Iʼll click on Start Upload.

Then Iʼll go back to the album by clicking on this link here.

I can see the images Iʼve added to this album and if I click on one of the thumbnail previews Iʼll be taken to the full-sized image. I can navigate between the images in this album as well by clicking here.

7

Back on my profile page, I can do the same thing with videos as well, except that with the default settings for Jomsocial left has they are, because I havenʼt changed them yet, I am not able to actually upload the video to the server of this website.

In order to add a video, Iʼll need to put in a link to videos that are being streamed from another site such as YouTube or Vimeo.

To do this, Iʼll click on Add Video, and this message is telling me basically what I just said a moment ago.

Iʼll click on next, and on this page Iʼll need to put in the URL for the video I want to put up on the site.

Iʼve got a link to a youtube video already on my clipboard, so Iʼll just paste it in here.

Thereʼs only one video category set up in Jomsocial by default, but I can add more in the configuration section of Jomsocial in the backend of my site.

I can also set the privacy settings for this video right here. Iʼll leave it set to public.

And then Iʼll click on Link Video.

I can see the video that I linked to from YouTube appear in the list of my videos here.

If I click on it, a page will open up where I can see the video, and people can leave comments on the video here as well.

Back on my profile page there are a number of other things that I can do from the menu items available in the same area, such as start a new group, invite friends to this network, or add applications.

Making adjustments to Jomsocialʼs settings

Now that weʼve taken a look at most of the basic features of Jomsocial as they appear out of the box, Iʼll go into the administration panel for Jomsocial and show you where you can make some changes to the settings for everything within Jomsocial.

In the backend of my site, Iʼll go to Components and then click on Jomsocial.

Then Iʼll click on Configuration.

The Configuration area is where I can make a number of changes for how Jomsocial works.

Iʼm in the Site tab right now, and Iʼm not going to go over each of these sections but will point out a few of them.

8

In the Reportings area you can set many things about reports within your social network. Reports are reports made by members who are reporting another memberʼs behavior as inappropriate in some way.

In the Registration section, you can enable or disable the terms and conditions that would be visible during the registration process, and also enable a re-captcha antispam validation form to the sign-up process.

In the Front page section, you can set the name of your social network.

The Social Bookmarking setting allows you to enable or disable the Share This icon on the front of the site, which you can see here when I go to the front of the site.

Iʼll click on this Share This link here.

This allows people to share content from your social network through other social websites.

The Walls section allows you to change some privacy settings for the walls on your site, which are areas where people can leave brief comments for each other, such as on their profile pages.

The Time Offset setting allows you to make it possible for members to adjust their own time zone based on daylight savings time.

Moving along to the Media tab, On this page you can change the number of settings for how photos and videos are handled in your network.

By default, video uploading is disabled, but videos are enabled.

This means that people can post videos by linking to them from a site like YouTube, but they cannot upload the actual video file to your server.

I would recommend leaving this setting as it is, as letting people upload videos to your site will take up a lot of room on your server, and you will likely need to have a minimum of a virtual private server, rather than a shared server, in order to get the video compression process to work properly using FFMpeg.

The groups tab allows you to adjust the settings for how groups are handled, and the Layout tab allows you to make some changes about how things are laid out in the network.

Thereʼs a couple of options for different templates that come with Jomsocial in this section here.

9

And in the Karma section you can change the number of points needed to reach different levels of karma ratings.

If youʼre not familiar with the concept of karma ratings in social networks, itʼs a way for people to rate other members of the network based on their behavior.

If someone does something good and you want to reward them, you can give them good karma points.

In the Display Settings section you can change things like what version of the memberʼs names you would like to have shown, or the format for the date shown in the network.

And the Front page section allows you to control the layout of content on the front page of the network.

The Privacy tab allows you to change some privacy settings for your network, and the Network tab allows you to set whether or not you want your Jomsocial network to be listed in the main Jomsocial network.

The Facebook Connect tab allows you to enable the Facebook connect feature, which will allow people to join and login to your network using their Facebook login info.

Facebook Connect can also import a personʼs Facebook profile into your network automatically, as well as their Facebook status updates.

Iʼll come back to this later and show you how to set it up.

The Remote Storage page allows you to connect the Amazon S3 cloud storage service with your social network so that you can store the content of your social network on the Amazon servers rather than the server where your website is located.

And lastly, the Integrations tab is where you can integrate Jomsocial with other software. Right now the only thing available here is to turn on integration with MyBlog.

Back on the dashboard, the User section allows you to see a list of all of the members of your network, and also many details for each user if you click on any of the usernames.

You can edit anything about the userʼs information from these tabs here.

The Groups tab allows you to see a list of what groups have been created, and the Groups Categories tab allows you to create different categories for groups in your network.

Video Categories allows you to create categories for people to post videos to.

10

Reportings allows you to see a list of any of these reports within your network.

User points allows you to adjust the number of points that users will get for various actions and behaviors within the network.

Back on the dashboard, the Templates section allows you to select one of the templates and edit any of the templateʼs files right here.

If I select one of the templates here, I can then select one of its files and then edit the code of that file right here.

The Applications section is where you can manage any applications that are installed for Jomsocial. Iʼll come back to this little bit.

The Mail Queue is where you can see a list of any e-mails that have been sent from your network.

Jomsocial will send out these e-mails when the Cron job runs on the server.

The Mass Messaging section allows you to send a message to all of the members in your social network at once.

Installing and Configuring Some Applications

Now Iʼll install and configure some applications for Jomsocial.

Iʼll begin with an application that was installed automatically when I installed Jomsocial, which is the Walls plug-in.

The Walls plug-in allows people to leave comments on someoneʼs profile page, on group pages, or for videos.

The Wall application should appear in the list of applications that your network members can install.In oder to activate this addon, Iʼll go to the Applications tab, then click on Browse, and then Iʼll click on Add.

And now when I go to my profile page and scroll down, Iʼll see a comment wall where my friends can leave comments.

If you want to enable walls by default for everyone, let me show you how to do this.

Iʼll go into the backend of my site and then go to extensions and Plug-in manager.

Then Iʼll open the Walls plug-in, which is the Jomsocial add-on controlling the wall feature.

11

In the Parameter section, next to Core Application, Iʼll select Yes.

This will make this a core application for every member of the network, which means it will be added for them automatically.

Then Iʼll click on save and take a look at the front of the site.

By default, the settings for the Wall application are set so that you can only use a wall on someoneʼs profile page or video pages that you have friended, or, if you are a member of the group whose wall you want to use.

There are several dozens of applications, or add-ons, that can be installed in Jomsocial to extend its functionalities.

Some of them have been created by the Jomsocial team, while many others have been created by third parties.

Iʼm not going to be showing you how to use all of them, but I will show you how to install one so that you can see the process. Then, you can search through the available applications for Jomsocial and try some out for yourself.

You can find the available applications for Jomsocial on the main Jomsocial website in the Add-ons section. Iʼll go to that page now.

And here I can see a number of different categories for applications and add-ons.

Since I have a Kunena discussion forum installed on my site, Iʼll find the add-on that will show my latest discussions in the Kunena forum on my profile page.

To find this add-on, Iʼll search for Kunena in the search bar here.

Here it is right here. Iʼll click on its title to access this add-on.

And then Iʼll click on this link to download it.

Now I can go into the back end of my site and install this plug-in in the same way that I would install any other extension.

Iʼll go to Extensions, then Iʼll select Installed/Uninstall, browse to where that file is that it I downloaded, double-click on it, and then click on upload file and install.

Then Iʼll go to the plug-in manager by going to extensions and selecting Plug-in Manager.

Then Iʼll open up the plug-ins that I just installed for Kunena and enable it.

12

Over in the parameters, I can change the number of updates that will appear on my profile page, meaning the latest discussions that Iʼve commented on in the forum.

Right now itʼs set to show only five.

And Iʼll leave the Core Application set to No, so that each user will have a choice of whether or not they would like to enable this application.

If I set it to yes, then everyone will have this application enabled by default.

Now Iʼll Save this plug-in and go to the front of the site and go to the Applications tab, and then Iʼll select Browse.

And here I can see the Kunena updates application that I just installed.

To add this application to my profile page Iʼll click on Add.

And now Iʼll go over to my profile page and scroll down to the bottom, where I can now see the latest discussion threads that Iʼve started in the forum.

So thatʼs the process of adding an application to Jomsocial. Each one of them does something different, and many of them have a number of settings and parameters that you can change.

If youʼre interested in adding more functionality to your Jomsocial network, spend some time going through the available add-ons to see what each of them do, and try some out.

Integrating Jomsocial with Facebook

The last thing that Iʼll show you how to do with Jomsocial is how to integrate it with Facebook Connect, which is a way to allow people to sign-up and login to your Jomsocial network using their Facebook login info.

This will allow them to connect their Facebook information with your site.

Facebook Connect can import peopleʼs Facebook profile information into the profile of your Jomsocial Network, and can also do things like send their Facebook updates to the profile page updates in Jomsocial.

If you enable Facebook Connect people will not have to fill out profile information when they sign up to your network because Facebook Connect will import that automatically (as long as a person has privacy settings set on Facebook that will allow that.)

13

There are also a number of other features of Facebook Connect that you can read about on the main Jomsocial site.

Here is how to go about enabling Facebook Connect in Jomsocial.

First, you need to have a Facebook account.

Once youʼre logged into your Facebook account, go to facebook.com/developers.

And once youʼre on this site, click on Set Up New Application.

Give your application a name here, agree to the terms of service, and then click on Create Application.

On this page thereʼs some information that you can configure, such as putting in a description of this application, a couple of logos that will appear throughout Facebook, and a contact e-mail address.

Most importantly, on this page, youʼll need to copy both the API key and the Secret and paste them both into Jomsocial.

Iʼll do that now by highlighting the API key first and copying it to my clipboard by pressing command and C on a Mac or control and C on a PC.

Then Iʼll go back into Jomsocial in the configuration section and click on the Facebook Connect.

In the Facebook API key field, Iʼll paste in the API key I just copied.

And Iʼll do the same thing with the Secret.

And on the right side in the Settings section, there are a number of settings you can change that will control how Facebook Connect integrates and behaves with your site.

Iʼll leave these things set as they are right now and save this.

Back in Facebook Iʼll go to the Authentication section, and Iʼll select both Users and Facebook in the Authentication section.

For the Authentication callback URLs, Iʼll simply put in the URL to my website.

Next, Iʼll go to the Connect tab, and again Iʼll put in the URL to my website here in the Connect URL.

Itʼs important that this URL end in a trailing slash.

14

For the Account Preview URL, Iʼll put in the URL to the page on my site that is the homepage for my siteʼs social network. Facebook Connect will pull some content from that page and display it as a preview in Facebook.

For the Base Domain, Iʼll put in my websiteʼs domain name without the http://.

And for the Account Reclamation URL, Iʼll again put in the full URL to my homepage.

This is a link that will allow people who deactivate their Facebook account to find a way to get back to your site.

Now that Iʼm done with these things, I can save the changes.

Now Iʼll go to the front of my Jomsocial network and I can see that there is now a new option to login or join this network with Facebook Connect.

When I click on it, a window comes up letting me know what Facebook Connect will do in terms of connecting these two networks.

Iʼll go ahead and click on Connect.

I now have an option to select whether I am a new user of this Jomsocial network, or an existing member.

If a person is a new user, they will have to fill out a bit more information after this page.

Iʼll leave it set as New Member and click on next.

Iʼll fill in this information here and then click on Create.

This next page is letting me choose whether or not I want to import information from my Facebook account into this Jomsocial network. Iʼll leave those things checked and click on continue.

And now Iʼm a member of this Jomsocial network and can login in the future with my facebook login info.

Lastly, you should be aware that you will not be allowed to associate your account with Facebook if you are an administrator of this Jomsocial network. If you were able to do that, you would not be able to login to the Joomla administration side of your site because the login info is held on the facebook servers.

And that wraps it up for this lesson on Jomsocial.

15