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.

Log in to your Admin Panel and navigate to Manage > Packages & Plugins.

manage se pluginsClick the “Developer SDK” menu tab and select “Create a Package”.

SE dev sdk

Choose “Widget” for the Type.

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.

Create Widget SocialEngine

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.

SocialEngine install widget

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

netbeans view


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).

As we don’t have any settings for this part of the tutorial, we don’t need to change the Controller.php file other than adding our copyright.

Now, go to your test site and add the block to the Layout Editor. We put ours in the Site Header.

Test front end to see if there are issues. If you don’t want to add settings, you’re done.

Want to add some settings? Here we go!

In the manifest.php file, we need to add the setting array. Under ‘category’ we add the Admin form array:

You see above that we’ve shown you a multiOption input and text input. We suggest you look at standard SocialEngine widgets and modules to see various options available for settings.

Open the Controller.php file if you don’t already have it open. You need to add the settings here for the script to use them. This is our full Controller.php file.

At the top, you see our copyright. Below that is the standard code that is already added by the SocialEngine script when creating the widget:

We added our settings in order to use the variables in our template (tpl) file.

Now we open the index.tpl file to make the changes and use the settings.

Notice above we used php echo statements:

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.

Questions? No problem! Ask at our official ScriptTechs Forum.


Content Protection by