Creating a SocialEngine Widget

This tutorial will show you how to make a basic Google Translate widget for SocialEngine. It’s written using SocialEngine 4.8.13. You can find an installable, free copy listed in the SocialEngine Marketplace and at our ScriptTechs’ Marketplace. This free version is not to be redistributed.

Make sure you are using a licensed version of SocialEngine. If you don’t have a copy, be sure to contact them for assistance. Don’t use nulled versions as those can have malware and back doors. It’s also a bad way to present yourself to SE when you want to sell in their marketplace.

For this tutorial, make sure you’re logged in as the SuperAdmin user. You also might want to set the site to Development Mode so you can see any errors should there be any.

We use Mamp Pro on a Macbook pro for our developing environment and Netbeans IDE.

Put the name that you want for it in all lowercase alphanumeric, hyphens “-” are allowed.

Add a title for it. This will be seen by clients if you are making something to distribute. *Note that this tutorial widget won’t be accepted at the SE Marketplace as it’s already.

Enter a description for it if you want to.

Add the author name.

Add a version number. We don’t change the date for ours.

Click “Create Package” once you’re done.

Once you click to create the package, you’ll get a download screen and it will export the basic package. Save it to your computer. Note that the process won’t give you any indication that it completed. Just check your download folder for the file to make sure it did export.

We like to work on the files directly on our development environment via Netbeans IDE. You can do it however you choose. For this tutorial, click “Manage Packages” so that you can install this new widget. You’ll add code after. We won’t go into how to install a widget as you should already know how to do that. Install the widget you just downloaded.

If you’re using Netbeans, you should now see the files in the application/widget folder.

Open each of the three files in your editor: Controller.php, index.tpl and manifest.php .

You’ll see the manifest.php has been filled in with all of the starting info. This is the file that you would add user settings and other settings if you had any for the widget. If you need to change the Description, Author, or Title, feel free. We add our copyright to the top of the file. We’ll show you how to add some basic settings later in this tutorial. For now, the first part of this tutorial will have you make a very basic widget with no settings.

The index.tpl file is the template file. This is where we’ll put our Google Translate widget code. Open the file and remove the placeholder text in it and add your widget code. Our file now looks like this (we added our copyright).

Save the changes and go to the Layout Editor and edit the block wherever you put it. When you click to Edit it, you’ll notice the popup shows all of your settings. Change them some, save it and check front end. It should work with the changes you made.

This is just a basic widget with a few settings. If you want more tutorials like this, feel free to ask at our forum.