How-to: Create your Facebook Application

Basti

Administrator
Staff member
Updated 10.02.2019

Before you start!
- With recent facebook privacy policy changes, the app requires your list to have https support
If your host do not provide free ssl certificates, you can as well skip all of this.
This is needed for step 6.3

- As i do not have a app as old as plugin version below 1.5, i cant say anything about how this new version works with old apps.
To be safe, please setup a new app following the instructions


In Order to use some Facebook features on your toplist, it is required you setup an Application via Facebook. That is to let your list communicate with Facebook.

So, follow this step by step tutorial and you can in no time use these features.
Tip: Clicking small images will enlarge them for better visiblity.


1) Create your application https://developers.facebook.com/apps
- It is important that you are logged in as the Admin of your Fan Page.
1.png

2) Give your App a name
- Email should be prefilled, if not enter it
2.png

3) After creation, go over to the settings tab
3.png

4) Enter your App domain
4.png

5) Choose App plattform as website and enter your website url as found in your Visiolist Admin Settings. Once done save settings.
5.png 6.png 7.png

6) Next we need to add the product "login" to our new app. Return to the menu item "Dashboard" and setup the product
- This is needed later for our admin area, so the page owner can grant the app permissions
- This is not a global social login, only used by one person, the owner.

8.png

6.1) Choose www
9.png

6.2) Enter your website url as found in VisioList admin setting and click save
- This should be auto filled if you followed this guide correctly.
10.png

6.3) Head over to the product settings and enter the "Valid OAuth Redirect URIs" and hit save settings
- This step is needed due facebooks' privacy policy
- The url to enter is https://your-site.com/index.php?a=admin&b=settings&facebook_get_tokens=1
- Replace your-site.com with your actual domain, as found in VisioList admin settings
- https has to be kept due privacy policy. Login is not allowed through a insecure channel

11.png

7) It is VERY important that you keep your app in developement mode
- Without this, you need to submit your app for review, which is a very nasty and long lived procedure
- We do not need a public app, as only the app owner uses this
18.png


8) Copy your App ID and App Secret.
- For App Secret, please click "show" to see it. This is facebook security.
12.png

9) Now go to your VisioList admin page under facebook settings
- Enter your Fan Page ID or Alias
- Enter your App ID and App Secret.
- Enable the features you want to actually use
- Save settings.
13.png

10) After returning to this page, click "Allow Permissions".
14.png

10.1) The "Allow Permissions" will open the facebook OAuth page where the needed permissions are granted.
- If you are not logged into your facebook account, you will be prompted to do so. Make sure you login as the Admin of your Fan Page.
- You will notice the warning at the top. This is because we didn't submit app for approval.
This we do not want! As only you as the admin uses this app, therefore not requiring the long approval process

15.png

10.2) Grant the actual permissions
16.png

10.3) After returning to the VisioList admin settings page. Let us validate that the access token is actually valid.
Copy your token
17.png

10.3.1) Visit https://developers.facebook.com/tools/debug/accesstoken/ and paste your token
The importants part on that page are
- Type should mention "Page"
- Expires should mention "Never"
- Valid should mention "True"
- Scopes should mention "manage_pages, pages_show_list, publish_pages, public_profile"




With this you have successfully setup all needed steps!
 
Last edited:

Basti

Administrator
Staff member
Haha yea, when i built this we had it in the core files like premium, but it has been removed. Though, the code is still flying around and just need to be built as a plugin, for which i hopefully find the time soon
 

CraigKoz

Member
Yeah thats great i would love this as an plugin since pretty much everything uses FB today... Its just a major plus to have

Thanks hope to see it soon :)
 

Anna

Member
Trying to get FB plugin to work finally and I have done as it says above but when I press Allow Permissions it says "An error has occured. Please try again." Whats up? What have I done wrong this time^^
 

Basti

Administrator
Staff member
Hard to say, but i guess you still have your profile id in use. This does not work anymore as before. A fanppage has to be used now
 

Anna

Member
Nope - used the fan page id. But the strange thing is - I DO have (didnt bother to check before since there were an error) facebook button just below the twitter one on stats page and a facebook box to write in as well (dont like though that when commenting on fb the plugin uses any random screenshot it seems). But I do not have the buttons on the ranking page.
 

Basti

Administrator
Staff member
This might ( pretty sure actually )be related to your screenshot issue. Facebook also uses Curl to grab the tokens from facebook application etc.
 

Anna

Member
OK, still cant get passed the Allow Permissions part. Just to be on the safe side: Is there something wrong with how I have written it in my application creation?
 

Attachments

cajkan

Active Member
You must login into admin pannel and press Allow permission

Everything is ok on screenshot
 

Anna

Member
But thing is - I do this and I get a: "There is something wrong. Try again later".... Thats what I meant with not getting any further....
 

Basti

Administrator
Staff member
App Domain: dont think the http://www. part is needed there. Try to remove it.

Beside that all looks ok.
And you first inserted your app secret etc into admin and saved settings yes? and pressed allow after that?
 

Kelly Ling

Member
Does this plugin work? I'm getting the error message someone mentioned above - "There is something wrong. Try again later". Would appreciate any assistance.
 

Kelly Ling

Member
OK - So here's another question. Why is the Visiolist logo showing up and not your topsites logo? I would want my logo to post since it is from my site, using the Visiolist program. The users and visitors of my top site have no idea what Visiolist is.
 

Basti

Administrator
Staff member
Then update your settings :)
You will see in the facebook settings part there is an avatar setting. It tells you exactly what it does.
"Image to show next to the other info on Facebook"
Just update the path to some other image
 
I've done everything above and it won't post to my facebook fan page. Had no trouble setting it up.
For facebook settings the app domain is topwebs100.com my domain right? &
Website with Facebook Login is http://topwebs100.com ? right?
Sandbox mode is off also. I even got it to allow permissions in the back of my list.
 
Top