Articles

How to create and configure a new Facebook app

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.

Speed up the WordPress wp_update_post function on big imports

We came across a situation where we had to use the wp_update_post() WordPress function to insert custom posts from another database. This function is the best to use since it create not only the posts, but also generate the "post_name". The basic code for calling this function is the following:

$post_id = wp_insert_post(array('post_author'=>1, 'post_title'=>$post_title, 'post_type'=>$post_type, 'post_status'=>'publish'));

Basically when the post_status is set to "publish", this function do a lot of other things that make it super slow when you have a lot of posts in your "wp_posts" tables. The more posts you get, the slower this function seems to be.

We had about 20 000 rows which is not really a lot for the mysql database, but with this function trying to import 10 000 other rows it gets really slow and can take more than 30 min just to import 10 000 new entries ! There is 2 solutions. Solution one is to set the post_status to "draft". Your execution time will be much much faster. It will tale you some minutes at most. But your new posts will not have a post_name generated (used for the permalinks) and you would need to have another process to set the posts statuses to "publish". Not ideal. Solution two is basically to declare these 2 function before your loop that is calling the wp_update_post() function:

wp_defer_term_counting(false); wp_defer_comment_counting(true);

And to call the same functions with the opposite boolean value at the end of the loop, like this:

wp_defer_term_counting(true); wp_defer_comment_counting(false);

And no there is no mistake the "wp_defer_term_counting" is set to false to keep the term counting to false. The function name is actually misleading. Using these functions has speed up our import by at least 10 times ! If you have a better solution please let us know!

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.

This link outreach can improve the marketing app boost its rating.

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

Where can I find my Envato item purchase code

After you have purchased your item, you can access your purchase code from your download page. You will be able to see from that page the list of your purchased items, with a "Download" button.

When clicking on that button you should see a list that includes a file to your item purchase code.

To access your Purchase Code for an item:

- Log into your Marketplace account
- From your account drop-down links, select ‘Downloads’ 
- Click the 'Download' button that corresponds to your item 
- Click on 'Licence certificate & purchase code' to download the text file 
- Open the downloaded file, and locate the "Item Purchase Code"

Facebook Access Tokens Tool

Facebook provides a tool enabling you to access all your Facebook apps User Tokens and App Tokens. You can use them for testing purposes. The App Tokens never expire, and should never be shared with anybody or used in a client side app (since they may be accessed easily through the HTML source code).

You can access this tool on this URL:
https://developers.facebook.com/tools/access_token

Check if a Javascript Function Exists Before Calling it

Sometimes for a reason or another, you may need to make sure a Javascript function exists or is accessible from your code, before calling it. That can be done through the following code:

if (typeof yourFunctionName == 'function') { yourFunctionName(); }

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. 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.

First of all, you need to set the sandbox mode to disabled. Otherwise other users may 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 like does, 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. 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. 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 !

We keep proving support to all our apps buyers

This is a quick post to remind to all our buyers, or future buyers, that we DO provide a free support on all our products available on the codecanyon marketplace. We do it for a simple reason: we want all our buyers to be happy and fully satisfied with their purchase.

All our apps have a demo page, as a proof they are working just fine in normal conditions and we’ll be happy to help you out getting the app ou plugin running on your website if needed. To get support you would need to send us your request through the form situated on our profile page (in order to verify your purchase(s)).

Please also remember that support doesn’t include free customization. The free support we provide is to get the original app or plugin running. For anything else requesting some time, like customization (small or bigger) we’ll be happy to provide you with a fair price estimate on getting the job done corresponding to your needs !