This tutorial will demonstrate how to create a tab on a Facebook page for creating issues directly within Facebook. Follow the easy three step process below.
Note: In order complete this task, 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.
Part 1
Go to
http://www.getlatlon.com/. Center the cross hairs on your desired location. Keep the Latitude and Longitude values handy you'll need to copy these values in a future step.
Login to CitySourced Console, by going to
http://console.citysourced.com
Click on 'Widgets' Tab
On 'Widgets' Tab, make sure the following options are selected:
- Create Report radio button
- Width & Height: 600px by 600px
- Map Type: Road
- Map Center Latitude: Copy the values you generated in the 1st step
- Map Center Longitude: Copy the values you generated in the 1st step
Next, click 'Generate' button in order to generate the necessary code. Select all this code and Copy it.
Part 2
Login in to facebook.com and type "static html" into the top search bar.
Select the "Static HTML: iframe tabs" Facebook app.
On the app page, Click the 'Add to My Page' link.
In the pop-up box, click 'Add to My Page' button for your page.
Part 3
Go to your Facebook Page and click on the 'Welcome' Tab.
In the top box. paste in your widget code from Part 1.
For the widget the fit in the Facebook Tab, you need to change the width and height. The width should equal 510px and height should equal 700px. Do not make any other changes to the code or you will break it. Leave the bottom box empty.
Click 'Save and view tab....' button.
Click 'View your tab as a non-fan' link.
Your Facebook Tab is done!
More Info
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.
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 Save.
Article ID: 38, Created On: 11/14/2011, Modified: 1/24/2012