Using the Facebook API with your WordPress Website

November 28, 2017

The social media giants in today’s world (think Facebook, Twitter, and Instagram) have done everything they can to make it as easy as possible to incorporate their brands into any website. Most professional websites will convey some sort of social media presence to their users through the use of familiar social media logos. Clicking on these logos will take you to their affiliated social media account- where it’s likely they’ll be advertising their products and services. Some social media companies like Facebook even allow you to track events on your website, like page visits or button clicks.

Our Task

We were tasked with building a feature with actually allowed a user to log into our website through their Facebook account! To do this, we had to do two things:

1. Create a Facebook application and connected it to our clients website.

2. Give our users the ability to have an overlay picture added on top of their Facebook profile picture to promote a contest.

The end result would be a picture that looked like this:

In order to do this, they would need to log-in to Facebook. The process worked like this.

1. A user landed on the web-page and clicked the picture they wanted to overlay on their Facebook profile picture.

2. If they were not logged in, they were automatically re-directed to a Facebook login-dialog.

3. Users gave permission for our website to have access to their email and name.

4.Users gave permission for our app to publish content on their behalf.

5. Users were re-directed back to our site.

6. If permissions were given, a user saw a preview of their profile picture with the overlay they clicked on over top of it.

7. A user clicked “Upload Photo” and they were once again re-directed to Facebook, where they could see their new image on their timeline.

Special Permission

Understandably, Facebook does place limitations on what information you can access from users. When users log-in, Facebook will communicate to them what information this application will receive from them (like their email, or their name). What was somewhat unique about our application, was that it published content (a new picture) on a user’s behalf to their timeline. This required extended permission from Facebook as they don’t want just any website or application to be able to publish content to a user’s account.

In order to receive this sort of permission, we had to submit our website/application for review. This entailed a written explanation of why we needed to publish content on a users behalf, and a video demonstrating how this process works. Once an app is submitted for approval, it can take up to 14 business days for the Facebook team to test an app and get back to the developers and approve it. Once it’s approved, all the visitor’s to the website will be able to use the app!

What Can you do?

In summary, Facebook (along with a ton of other social media brands) offer up some really cool capabilities to add extended functionality to a website or application. Even the login- dialog alone is awesome! Often-times users won’t want to create new accounts for every website they visit, but if you offer them the option to log-in using their Facebook account, they may be more willing.

If you’ve got a cool idea for your website involving social media, reach out to us and we can make it happen!