Improving posts on facebook pages using the power editor

I recently discovered the facebook power editor. A really useful tool for creating and managing your facebook pages posts and ads. In this tutorial I will describe how to use it in order to make better posts for your pages.

Apart from the usual components that you can post on your page (text, links, images), using the power editor you can also add call for action buttons to your link posts. Let’s see how.

First, open power editor and select the manage pages option from the dropdown at the top of the page.

To be able to view the posts of your page and create new posts, the first thing you need to do is to load the page in the editor. You the download to power editor button to do this. A popup similar to this one will show up:

In it, select the pages option and fill in the url of your page.

Your pages posts will load and you will be able to view them and their related stats (reach, number of people engaged, number of people talking about it).

Now use the create post button to load the following popup and input the data for your new post. Only the link type posts have more options that can be added from here. The others have the same options as when posting directly on the page. For links you can fill in the following info:

url – the actualy link
post text – the text that will show up above the link preview part
call to action – here you can select the text that will show up on the button from the link preview
link headline – this will show up as the title in the link preview
display link – here you can add a more detailed description of you link
description – this is to inform users why they should click on the link and what they should expect to find there
picture – here you can either write the url of a picture you wish to use or upload it from your computer

Then for posts you need to check the ‘This post will be published on the Page‘ option. After you click it you will be able to also enter targeting data like languages and location.

After you click the create post button, the new post will show up in your editor, but it is not yet published on your page.

You can check the preview by clicking on the post.

When you are ready to publish the post, use the publish post button, you can either choose to post it immediately or schedule it for later.

Notice the upload changes button turns green.

Click it and that’s it! 🙂 Your post will be successfully posted on the page or scheduled.

I hope this will help you improve your facebook posts. Let me know if you have questions or comments.

As I previously mentioned, the power editor can also be used for making better facebook ads. I haven’t tried that yet, but I did find a good article on how to do that! 😉

How to add confirmation emails to google forms

Have you ever used google forms to get some input from your users? It is really easy to set up a google form, add the required input fields and share the form with your users. Here’s an example of a google form.

After the users fill in the form, they will see a short confirmation message on the screen and their responses will be stored. You might also want your users to get a confirmation email after filling out the form. This is not the default behavior of google forms though so you will have to add a small script to do so.

If you fill in and submit the example form you will receive such a confirmation email and see what we are going to set up.

Here’s what you have to do:

from the form edit screen choose the tools menu option
pick script manager and click the new button
you will be redirected to a new page for adding the script
pick form in the popup
add a name for your script file
clear the code if there is any example code in there
add the following code:

The code is pretty straightforward: it received the user response as a parameter, it gets an array with the individual answers for each question (itemResponses), it gets the response for each question, sets the subject and the body of the email to be sent and sends the email to the user.

There’s is only one more step to go, we need to set a trigger for this function:

go to resources from the menu
pick current projects triggers
you will notice there are no triggers set up. click on click here to add one now
you need to select the method to run (onFormSubmit) and the trigger event from form and on form submit
you can also set the notification options – the default is to receive a daily email with the errors that come up, but for testing purposes you could set it to send error messages immediately
click save and authorize the app as requested

And that’s it! you now have the needed script. You need to go back to the forms edit page, from the scripts manager popup you need to refresh the scripts list and pick the newly added onFormSubmit script.

And you’re done! You’re ready to test out your form and send it out to your users!

Let me know if you have any questions! 🙂

Organizing Hierarchical Databases

I was researching a better way of organizing the database of one of my projects and came across an interesting article. The article is about organizing hierarchical data in mysql databases. Here it is. The two methods proposed are very well explained and also the advantages and disadvantages of using each method are presented. It helped me get a clear picture of the available methods and pick the best one for my project 🙂

How to make website registration easier using facebook accounts part 2

This is the second part the tutorial. If you haven’t read the first part yet, you can do so here.

Extra features

Once logged into their accounts, the users can see some info about their friends – the total number of facebook friends they have and how many of their friends are using our app.

Also they have the option to post on their facebook wall.

Get the friends list

For getting the users friends list, we will have to make another call to the Graph API. The code looks like this:

The url we make a request to is: https://graph.facebook.com/me/friends. And all we have to send as parameter is the access token we have stored in session. The API will return a JSON encoded list of friends usernames and facebook ids. We have printed the total number of friends. For checking how many friends have accounts at our app, we make a query to the db to get all the facebook ids and for each of these we checked if they are in the users friends list. As you can see, we have printed out the result of the count.

Posting on wall

To post on a users wall we have to make a post request to the url to call the graph api https://graph.facebook.com/THE_FACEBOOK_ID_OF_THE_USER/feed. We will need the following parameters for the call:

our app id
the access token
the message to post on the wall

We have created a simple form on the page with a textarea for the status and a button for posting it:

As you can see we have set the values we need for the call, app_id and access_token and called the updateStatus javascript function with these parameters.

To get the info about the user (their facebook id we need for the url) we have queried the db. The id of the user was already stored in session (remember we did that when logging the user in) together with the access token. Using the id of the users we have sent a query to the database to get the rest of the user info.

The updateStatus function looks like this:

We have used the jquery library to make a post request. The parameters we sent are the appid, accesstoken and the message that the user wrote. We get the text of the message by getting the value of the textarea.

Using these values, we make a post request to the server and when the server returns successfully, we show a message to the user to let them know the status was posted.

We also added some code that disabled the post button while the request is made to prevent the user from clicking more than once on it and posting the same message twice. Once the request returns, the button is enabled.

Deleting the account

We have also added a button for users to be able to delete their accounts:

When they press the button we will show a popup box to check that they are sure they want to delete their account. We do this by calling the testDelete() js function that looks like this:

After they confirm, they are redirected to the deleteAccount.php script that does the deletion. The scripts gets the user id and runs the sql query for deleting the user from our db. After deletion, the scripts redirects to the index page.

And that’s it! We have learnt how to add facebook registration/login to our site! Of course, this tutorial only shows basic features, but starting from this you can add whatever features you need.

Conclusion

I hope you enjoyed the tutorial and that you now have a better picture on how to use facebook for user registration. In case you have any questions or comments, please don’t hesitate to ask. I’d be happy to help!

Source Code

You can check out the code on github. I have included the complete code for both parts of the tutorial. Don’t forget to download the twitter bootstrap folder and place it in the same folder with my source code to view the nice layout. And if you want to test the code, you will have to replace the app_id, app_secret and db related values.

How to make website registration easier using facebook accounts

What are we going to build?

In this tutorial we will learn how we can facilitate user registration but letting users register to our site using their facebook accounts. This way, they won’t have to fill in any data, just grant the app access to their facebook account and that’s it! Their new account is created and they can easily login to our website.

We will be making calls to facebooks Graph API in order to retrieve the necessary information. In case you are not familiar with it, you might want to take a look at the documentation to get an idea of what it does.

You can view the working demo of what we are going to build here.

The tutorial will have two parts: the first will cover the basic signup/login issues, the second will cover the extra features we will add to our app (viewing friends info and posting on the wall).

Let’s get started!

Getting started

You would be using this is you have a website that users can register to and you want to make the registration easier for them by allowing them to register with their facebook accounts. In the tutorial, I will only show you how to use facebook accounts for registration, not how to add this to your existing registration. But it shouldn’t be difficult to integrate if you understand the tutorial. If you have questions on that, just ask.

For this tutorial you will need some basic PHP and Javascript knowledge.

Creating a new facebook app

The first thing we have to do is create a new facebook app. To do this, go here and chose to create a new app. You will get to the screen when you have to fill in the app info. The screen will look something like this:

As you can see in the screenshot, you will have to fill in the following:

A display name for your app
Your email address
The domain where the app will be hosted
The site url – this is the most important value, it is the url of the page where the app will be redirected after facebook authorization. This page will hold the logic for registering new users and loggin in returning users.

So, make sure you fill in the site url correctly and keep in mind the values at the top of the page (app is and app secret) as we will need them later.

And that’s it! You now have a facebook app. Let’s see how we can use it!

Creating the db

Next we have to create the db table to hold the data about our users. Let’s suppose we want to store the following data about our users:

Username
Email
Name

You will probably want to store more data in a real application, but these will do for the tutorial.

Apart from these, we will also want to store the facebook id of the users. So our database will look something like this:

The php code for connecting to the database looks like this:

Designing the site

Our demo website will have a few pages:

index.php – the starting point -the users can choose to signup/login with facebook from here
welcome.php – the users will be redirected here after creating a new account
home.php – the main user page, the user will view some info about their facebook friends, have the options to post a new status on facebook and delete their account

I will leave out any design issues. I have chosen to use the twitter bootstrap library to make a nice demo, but you can choose whatever you like for yours. The design on the website is not in the scope of this tutorial.

Signup with facebook

The main page, index.php will hold one button to allow users to signup/login. The code looks like this:

All we have to do in order to do this, is redirect the user to the facebook oauth dialog where they have to allow the usage of our app.

All we have to do is make a call to the url https://www.facebook.com/dialog/oauth and mention a few parameters:

client_id – your app id – remember the value from when we created the facebook app? Here’s one of the places we need it 🙂
redirect_uri – the url where you want the app the redirect after authenticating with facebook

these two are the only mandatory values

You can see that I added a new one: scope. A simple app allows you only to access the basic info that users made public from their facebook accounts. If you want to access more info or be able to use their account in other ways, like posting on their wall from you app and such, you will need to be granted special permissions by the user. This is why we use the scope parameter, to specify the permissions we need for our app. I added the publish_stream permission, which will allow us to post on user wall. You can view the complete list of permission here.

When clicking on the button, the user will get redirected to the authentication screen from facebook and after they grant the permissions, they will be redirected to our app. They will receive a code which we will have to use in order to get an access token for the user. Why do we need an access token? Well, every request for user data that we want to make to facebook will need this access token. So here’s how we get it:

We again need to app id and secret. With these and the redirect url (the one we set when creating the app) and the code we received we will make a new request to facebook to get the access token. After executing the code above, the access token will be stored in $params[‘access_token’].

With this, we can make a request to the facebook graph api and get the user data, like so:

We will get the data we decided to use for the app: username, facebook_id and email address.

What we have to do next is check whether the user has already registered for our app. We will check if the facebook_id is already in our db. If it is, then the user already has an account and they will be redirected to their home page (they will be logged into their account). If the user is not in db, then we will add them and redirect them to the welcome page. Like this:

As you can see, we have also set some variables in session. We will need these to check the id/username of the logged in user and the access token. Remember I said we need this for every request we will make to the Facebook Graph API! And that’s it!

For more info, you can see the facebook documentation on authentication here.

And that’s it for today, the part 2 of the tutorial is available here!

Irina's Geeky Blog

the adventures of a curious geek

Category Archives: Tutorials

How to add confirmation emails to google forms

Organizing Hierarchical Databases