Please Wait...
On Being a Webmaster

On Being a

Webmaster

kristi_blog.png (Lg:302x165)
About Me Visit My Blog

On Being a Webmaster

Posting To A Facebook Page From Your Website - The Overview

I was recently asked to let users post their blog entries directly from our Website Manager (blogging section) to their Facebook business pages. A common and reasonable request, I just had not gotten around to programming that piece yet (also not uncommon :)

 

Soon I was deeply entrenched in a jungle of the Facebook Graph API, Javascript SDK and building Facebook Apps.  I was able to understand each of these three individually, but did not know which one to use, if any, to make Facebook Page posts happen from our website.

 

Well, just to save you some time - I eventually learned that you need all 3 pieces to allow your website to post content to Facebook pages.

 

I won't go into much detail here (Facebook already does that), but here is the overview. Keep in mind I'm no expert and am still programming this project, but I hope to save you the time it took me to figure out this much.

 

First you must create a Facebook App

 

This is so you can get the App ID needed in the rest of the process. This is a "real" Facebook App through which your website will communicate with Facebook's Graph API. The user will (later) be asked if this App has permission to post to their Facebook pages.

 

To create your Facebook App, log into Facebook as yourself, then go to http://developers.facebook.com. (Facebook makes you log in first - they obviously want to know who the App-builders are).

 

At the top, click Apps / Create a New App. Work your way through the settings and fill out as much as you can. I honestly don't know what some of it means (it's in Facebook-speak), but I'm sure I'll eventually be forced to figure that out too.

 

Here are a couple of fields worth mentioning:

 

The Display Name is important. It is the name of your App that the user will see when they give it permission to post to their Facebook Page.  

 

I still don't know what "Namespace" is, and it says it's optional, but you will need it. Enter something unique, all letters and dashes, no numbers.

 

Under Status and Review, you must make your App public to take it out of "Development Mode".

 

Next create an HTML page for the Javascript SDK code

 

The Javascript SDK is not a downloadable file, you just find the code in the Facebook docs and copy and paste it into your page. I'll save you the trouble of finding the URL. It's here: https://developers.facebook.com/docs/javascript/quickstart

 

Oh, and by the way the page MUST be on the same domain name as the Website URL you attached to your Facebook App in the Settings. You cannot test it on another domain name or you will get an error - I found that out the hard way too.

 

Notice the SDK code needs for you to replace

appId      :'{your-app-id}' 

...with your Facebook App ID. 

 

You should have this readily available - it is located on the Dashboard of your Facebook App. Also notice that you are supposed to replace the {} braces as well as the "your-app-id" (silly me didn't get that the first time). The result is something like this:

appId      :'123456789'

 

That's the only replacement you have to make. Now your Javascript SDK is attached to your App.

 

Now that you have your Facebook App and an HTML page with the Javascript SDK on it which points to your App, you can use the Javascript SDK to make calls to the Graph API - this is where the magic happens!

 

Use the Javascript SDK to Make Calls to the Graph API

 

The basic function of these calls is:

FB.api(path, "GET|POST|DELETE", params, callbackFunction)  

 

You need to call the Graphi API to:

 

   Be sure the user is logged into Facebook, retrieve their user-id and get permission from the user to allow your App post to their Facebook page (there is a way to do this pretty much all in one swoop) - ask for the "manage_pages" permission upon Log In. It's in the examples.

 

   Then you can call GET /user-id/accounts to get a JSON array of all the Facebook pages this user owns, and their corresponding page-ids.

 

   Finally, you can use the page-id to call POST /page-id/feed to post a "message" field to the Facebook page. (BAM!)

 

   View a page-post example here: https://developers.facebook.com/docs/graph-api/reference/page/feed  - Scroll down to the Publishing section and click on the Javascript SDK code example.

 

 

I should note here that the Javascript SDK is not the only way to call the Graph API, they also have server-side PHP examples. However that seemed more complex to me, with the juggling of short-term and long-term access tokens, etc. so I elected the client-side Javascript solution.

 

The best advice I can give now, since there's a million ways to use the Graph API, is to read further down on the quickstart page https://developers.facebook.com/docs/javascript/quickstart to the section entitled:

Using the SDK to call the Graph API. Here, they offer some basic examples of how to make some Graph API calls. The result of every call is JSON code. They don't tell you what JSON fields are returned if there is an error, so that is my next tackle (at least I have not found it).

  

The rest of the details are there, limited only by your Javascript skills. I offer this post only to help you put the main pieces together so you know where to start, and where it comes together.

 

I could not find an overview like this anywhere (including Facebook), so that explains it!

 

Now I wonder if I can get this article to post to my Facebook page...? 

Post a Comment

Your Name:
Your Email:
Your Comment:
Your comment will be posted after approval.

 

Blog RSS Feed - Subscribe

 

 

 

 

 

 

 

Webmasters - Connect With Me

 Follow W3Now Web Design on Facebook Connect with Kristi on Linked In   Follow Kristi on Twitter Add Kristi to your Google + Circle

 

Back to TopAbout Me | Site Map