How to create a Google Maps API Key

Step 1

Creating a Google API key is very easy, and can be done following this URL.

If you follow this given URL, some services like the “Static Maps” and “Geocoding API” should be activated during the app creating. Keep reading to see how to make sure the correct API service have been enabled.

Step 2

Create a new project and choose a name for your new Google API key. Don’t define any key restrictions until you make sure your key is working just fine. Once confirmed, you can add a HTTP referrers (web sites) restriction for example to limit the API key usage by only your domain pages.

At the end of this step you should have an API key that you can copy paste in your projects. You can also check the Google API key validity when used in our apps, using this Google API key checker

Step 3

From the Google API interface, click on “Library” and search for both “Static Maps” and “Geocoding services” and make sure they are both enabled.

That should be it ! You should have a working Google Maps API key! If you have any questions feel free to contact us or post in the comments here.

Find your MailChimp API Key and list id

MailChimp provides a way through its API to be able to add new subscribers programmatically. We are using the MailChimp API in our Facebook Viral & Marketing Social App and this post will explain how you can get your MailChimp API Key and also where you can find a specific list id.

mailchimp-long-logo


How to get a MailChimp API key

1. Navigate to mailchimp.com and connect with your account
2. Navigate to your “Account” page, then from the “Extra” dropdown list select “API Keys”
3. From the “API Keys” section create a new key and copy paste the API key where you want to use it

How to find a list id

1. Navigate to mailchimp.com and connect with your account
2. Navigate to your “Lists” page, then click on one of your lists
3. From the “Settings” dropdown menu, click on “List name and defaults”
4. The list id should be displayed somewhere on that page

If you have any questions feel free to post them in the comments

How to get a mashape API key

This tutorial will explain the steps to get a mashape API key, used by most API services available on that website.

1. Connect to this page: https://www.mashape.com/dashboard (you need to have a free mashape account)
2. Click on “Application” on the top right, then on “Create Application“.
3. Define your application name and click on save
4. Once redirected to your new application page, click on the “Get the Keys” button situated on the top right section of the screen.
5. Choose production mode and click on “Copy” to copy the API key to your clipboard. You just need to paste it where you need it to be !

If you have any questions please feel free to post them in the comments !

Create a New YouTube API Key

To create a new YouTube API key you need to go on this URL:
https://console.developers.google.com/project

1. Click on “Create Project”
2. Define a project name and click on “Create”
3. From the project dashboard page, click on “Enable an API”, then click on “YouTube Data API”, then click on “Enable API” to activate the YouTube API in your project.
4. From the left menu, click on “Credentials”, then “Create New Key”, then “Browser Key”. Don’t define any referrers in the textarea and leave it empty. Just click on “Create”.

Your API key should be loaded and displayed on the page!
Let us know if you have any issues or questions with the YouTube API key creation process

How to create and configure a Facebook app

In order to create a new Facebook app, you need to navigate to this URL: https://developers.facebook.com/apps

Creating a new app
At the top right section of the page, locate the link “Create New App“. Once clicked you should get a dialog to complete some basic app information.

create-new-facebook-app

You need to specify your app name.

The App Namespace

The “App Namespace” is optional but we suggest you to specify one if you want to get your app accessible on Facebook through a URL of this type: https://apps.facebook.com/YOUR_NAMESPACE/

So let’s say that your app name is “Mind Reader Game”, and that you want your game to be accessible through this URL: https://apps.facebook.com/mind_reader_game/. You would need to define “mind_reader_game” as your App Namespace.

You can hit Continue to create your app. Facebook may require you to type-in a captcha code as a security check and to make sure you are human !

Your app general settings

Once your app created, you should get redirected to a page similar to this screenshot.

facebook-app-settings

First of all, you need to set the sandbox mode to disabled. Otherwise other users than you will not be able to connect or use your app.

Second, you need to define your “App Domain”. That should be the domain where you are running your app. Example: “yougapi.com”. Note that the App Domain cannot contain any “http://” in it.

If you are using a URL starting with www, then you need to define your domain name starting with a www. Example: “www.yougapi.com”. You can also define a list of several domains. Example: “yougapi.com” and “www.yougapi.com”.

We advise you to choose only one way to access your pages (using a www, or not using any www) and have only one App Domain defined.

Website with Facebook login

If you are running an app (PHP application for ex), that implements the Facebook connect feature, you would need to click on the “Website with Facebook login” section and define your “Site URL”.

Make sure to pay attention to the way your app will be accessed (using a www or without a www). Both ways are fine, but you need to be consistant. So if you access your PHP app without any www in the URL, then the “Site URL” defined shouldn’t contain any www in it.

The Site URL should start with an “http://” and be the full URL of your app. Here is an app example we are running: “http://yougapi.com/products/mind_reader/”, so the “Site URL” that we would need to define would be the exact previous URL. Easy isn’t it?

App on Facebook

This section is only needed if you want your app to be accessible on “https://apps.facebook.com/YOUR_NAMESPACE/”. If you have already previously defined your app namespace, you should see the URL of your canvas page where you app can be accessed on Facebook.

facebook-canvas-page

But if you navigate to that canvas page, you will notice that there is no content. The page is empty, and that’s normal since you didn’t define any canvas URL yet.

What is a Canvas URL

That’s simply the URL where you have the application or page, hosted on your server. In our case it’s hosted on “http://yougapi.com/products/mind_reader/”.

Two Canvas URLs need to be defined, one starting with “http://” and the other starting with “https://” for a secure access to that page. That’s one one the new Facebook requirement to enable all the Facebook users to be able to access your app on Facebook.com

We recommend to keep the height setting as Fluid, but for the width it’s up to you! We like using the fluid width to maximize the space and having less vertical scrollbars.

Once you have defined both Canvas Urls, you can access the canevas page, and be able to view you app there.

Here is how our final Facebook app settings looks like:

facebook-app-settings-final

You can access our Mind Reader Game in 2 different ways:
1. Directly on its URL: http://yougapi.com/products/mind_reader/
2. On Facebook.com: https://apps.facebook.com/mind_reader_game/

If you have any questions feel free to ask in the comments section !