Setting up a projects widget for your initiative website
By Ed Mitchell 29th October 2012
Transition Initiative webmasters can add the ‘Projects widget’ to their own websites in a few easy steps outlined below.
You need to be a registered Transition Network site user, and the ‘web point of contact’ for a Transition Initiative that is listed in the Initiatives Directory.
- Projects Widget homepage with links to FAQs, forums etc.
This is a beta product, so we are still experimenting. We hope that you will find potential improvements, and unforesee-able platform issues and things like that. We also hope that it works, and looks clean and fits in with your websites and lives.
Please keep a log of your experience as you set up a projects widget so that your feedback (and problems) are practically ‘fix-able’. We have set up a Frequently Asked Questions page, which covers questions we have encountered so far, but can grow with your questions. If you encounter a problem, please take a screengrab if possible. The more information you provide gives us the greater chance of understanding the problem.
Please also ask your website visitors to try the projects widget, add their projects, and feedback to you so that we know it is being tested ‘in the wild’.
When people submit projects through the projects widget on your website, you will receive an email asking you to approve or delete it. This is easy to do, and will take you one minute and is an important part of the process so please attend to this ‘moderation’ requirement as soon as you can.
NB: there are two widget options: these are separate. You can add either, neither or both.
Thank you for trying this out! You can always email Ed for help or questions.
Here are the steps:
- On TN.org: Go to ‘my account’ in your account
- Click on PSE moderation
- On TN.org: choose your style and initiative
- On TN.org: check the demonstration
- On TN.org: copy the code that the TN.org site creates for you into a text file
- On Your Website: open up the ‘widgets’ page and create a new text widget
- On Your Website: add the widget code from TN.org into the widget, save
- On Your Website: See the widget on your site
- On Your website: add a new page for the full page widget, add the full page widget code in HTML view, and save
- On Your website: See the new page in your site (and in my navigation if you look)
- Then visitors add their project submissions and you approve or delete them – blog post coming soon.
1. On TN.org: Go to ‘my account’ in your account
Log into the Transition Network site, go to your user account by clicking on your name in the top grey bar on the right. You will see a box on the right with a button to click to get the widget. Click it.
If you don’t see this box, you are probably not a ‘web point of contact’ for an Initiative in the Directory. Edit your initiative profile, or ask someone to edit it for you – to add you as the web point of contact.
2. On TN.org: agree to the T&Cs, and subscribe to the widget updates
We are very likely to update the widget code from time to time; please do not unsubscribe to updates about this as we will need to tell you of changes. Also you will need to agree to the T&Cs (they are the same as the main site which you have already agreed to).
3. On TN.org: on the ‘get widget page’ choose your widget and initiative
You have three options:
- full page widget (to go in a full page on your site)
- sidebar widget (to go in the sidebar of your site)
- button only (just a button, no listings of projects)
Choose one widget option, and which initiative profile you are relating the widget to. You can make as many widgets as you like.
4. On TN.org: check the demonstration
You will now see your widget of choice in demonstration – here we can see a full page and a sidebar being demonstrated (NB: you can’t do these at the same time, this is for demonstration only)
5. On TN.org: copy the code that the TN.org site creates for you into a text file
If you like the demonstration, copy and paste the ’embed’ code presented to you. Save the code in a separate document (Word or Text file) so you don’t lose it.
6. On Your Website: open up the ‘widgets’ page and create a new text widget
This how to is written using WordPress as most TI webmasters use WordPress. If you are not using WordPress, we hope that you have a similar system to add new widgets or buttons to your website. We are sorry but we can’t provide support for your website!
In WordPress, go to the ‘widgets’ section (in ‘appearances’). See the list of widgets you have on the right column. You add a new one by choosing it from the main ‘available widgets’ list: choose a ‘text’ widget – ie one you can copy your own text into.
7. On Your Website: add the widget code from TN.org into the widget, save
Take the code you copied from the TN.org site and put it into your new text widget. Save. Put it into the widget ‘order’ as you like by dragging it into the list of widgets.
8. On Your Website: See the widget on your site
It will now appear on your site. Bingo! Mine looks like this.
9. On Your website: add a new page for the full page widget, add the full page widget code in HTML view, and save
If you want the full page widget, you need to create a new page for your website using the ‘add new page’ in WordPress. When you have a new page up, SELECT TO EDIT IT IN HTML – you do this by choosing HTML on the right hand side at the top of the ‘editing’ pane.
10. On Your website: See the new page in your site (and in my navigation if you look)
Here it is! You will also see it in the navigation.