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.

CitySourced Facebook App


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

CitySourced Console

Click on ‘Widgets’ Tab

CitySourced Console Home Page
On ‘Widgets’ Tab, make sure the following options are selected:

  • Create Report radio button
  • Width & Height: 600px by 600px
  • Map Type: Road

CitySourced Widget
Next, click ‘Generate’ button in order to generate the necessary code. Select all of this code and Copy it.

CitySourced Widget Generate Code

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.

Facebook Static HTML
On the app page, Click the ‘Add to My Page’ link.

Facebook 'Add to My Page'
In the pop-up box, click ‘Add to My Page’ button for your page.

Step 3: Customize Appearance

Go to your Facebook Page and click on the ‘Welcome’ Tab.

Facebook Welcome Tab
In the top box. paste all the code for your widget, copied in Step 1.

Facebook Insert Code
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.

Facebook Adjust Size

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.

Facebook View Tab
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.

Additional Info

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. 

Share: