Note: This Article will not be maintained or updated. For the most up to date instructions see our Knowledge Base Article.
In addition to our mobile apps and web forms, CitySourced customers can create a custom Facebook App to allow citizens to report new issues directly from Facebook. This how-to tutorial provides a step-by-step guide to create a tab on a Facebook page for reporting new issues directly within Facebook. Follow this easy three step process to create your own version.
Note: In order complete this guide you will need to have access to the CitySourced Customer Console and be an administrator for the Facebook Page in which you plan to add this tab. Click on any photo to enlarge it.
Step 1: Create Widget Code
Login to CitySourced Console, by going to www.console.citysourced.com
Click on ‘Widgets’ Tab
- Create Report radio button
- Width & Height: 600px by 600px
- Map Type: Road
Step 2: Add Facebook App
Login in to Facebook.com and type “static html” into the top search bar.
Select the “Static HTML: iframe tabs” Facebook app.
Step 3: Customize Appearance
Go to your Facebook Page and click on the ‘Welcome’ Tab.
For the widget the to fit properly in Facebook, you need to adjust the width and height. The width should equal 510px and height should equal 700px. Do not make any other changes to the code or the widget will break. Leave the bottom box empty.
After editing the code, click ‘Save and view tab….’ button. Then, click ‘View your tab as a non-fan’ link. Note, as the page administrator you will always see this editing information. However, your fans will always see the tab correctly.
Your Facebook Tab is done! To create a new issue, enter the address directly into the address box or drop a pin on the map, select the report type, and then add either a written description or upload an image file.
Want CitySourced in your community? Contact Us for more information and to schedule a demo.
To change to the title of your Facebook Tab,click ‘Edit Info’ link from your Facebook Page.
Select the ‘Apps’ from the left hand menu column.
Under ‘Static HTML: iframe tabs’, click ‘Edit Settings’ link.
Enter your tab name, such as Report Issue, in the ‘Custom Tab Name:’ text box and click ‘Save’.
Leave Questions in Comments Section.