In this part 2 of the Google Drive Series, We are going to dig the most important and confusing concept of connecting with Google APIs. Yes, I wrote confusing because there many developers who get confused when they need to implement connectivity of their application to Google APIs. I will try to make this concept easier in this post.
I assume you have read the first part of this series and have created a project in Google Developers Console and before than that have downloaded the PHP Client libraries to play with.
Hello developers! I know this is something other than WordPress at WPBrigade but we can’t forget the importance and usage of Google Apps in the WordPress community.
Analytify is one kind of WordPress plugin that uses Google Analytics APIs heavily and simplifying the life of data lovers in WordPress. It displays all the actionable Analytics in one dashboard and shows you Analytics, page by page.
So, I have decided to start a series of blog posts on Google Drive APIs in which I will walk you through some interesting things about the Drive SDK. I will take you from the scratch and reach a point where you will have a good knowledge of Drive SDK and can use it in your future web apps. If this series helps you in any way, shoot it out and Share it with your friends and there is no reason not to take interest in learning Google Drive APIs as it’s usage is totally free.
WordPress is amazing in its nature. You can convert it into anything and integrate it with any PHP website. You can even set the degree of integration. Like, there may be only a few features of WordPress you want to use when integrating it with your website. For example, you want to display the recent blog posts on your website’s homepage. Your website is in PHP and WordPress blog is installed in another folder. In this article, we will show you the steps that how you can achieve this awesomeness, learning how to integrate a WordPress blog in your existing website?
Sometimes we need to add custom data for our posts and pages other than title and content especially when ones become comfortable with WordPress, there is an urge to do something experimenting for exciting features using WordPress custom field. for Suppose you are using Custom Post Types for your book store and want to save the Book price as well. You have added title and description but for price you will add a custom field. Today we are going to gain an understanding of how you can add custom fields via WordPress plugins. In modern WordPress development, these kinds of functional stuff should be done via plugins instead of coding in WordPress themes.
Facebook API integration with a site improves your site’s social rank. We can integrate a like button to our website or a comment box which is quite easy. A bit messy job comes when we get a requirement to create an app for a website and then integrate it. There may be many reasons to create an app. May be you want to give the users to signup to your site using their Facebook account or you want to engage more traffic from your social circle to your site/blog using Facebook login.
So today we are going to sum up the tried and tested steps involved in integration of Facebook login to WordPress manually without using any plugin. So let’s begin!
To integrate graph API to WordPress, we first need to create an app on Facebook using developer page. And then start it straight away.
Step 1:
Login to your Facebook account and go to developer page.
Click on add new app.
Integrate Facebook Login to WordPress – Add a new App
Step 2:
It will open a light box asking you to select the platform. Just select www
Integrate Facebook login to WordPress – select website
Step 3:
Give a name to your app
Integrate Facebook login to WordPress – Add name of App
Step 4:
You can select any type
Integrate Facebook login to WordPress – Select type of App
Step 5:
Stop here, please. Go to your WordPress theme and create a template file, let’s say “fb.php”.
Integrate Facebook login to WordPress – Create WordPress template file
Step 6:
Please get back to your Facebook page and copy this code and paste it into your fb template file. And you can see you have to give your site URL which in my case is localhost/wordpress. After putting your site URL click next.
Integrate Facebook login to WordPress – Facebook SDK code
Step 7:
Then you will see this page, just copy the code and put it into your fb template.
Integrate Facebook login to WordPress – Facebook HTML5 code
Your template file will be looking like this.
Integrate Facebook login to WordPress – Facebook Template for WordPress
Step 8:
Now go to you WordPress admin and create a page, let’s say “facebook” from WordPress admin and assign the fb template to this page. Open your page and your page will be looking like this.
Integrate Facebook login in WordPress – Facebook Page for WordPress
So you have done a good job but as you know our objective is still not achieved.
Step 9:
If you go down of developer page you will see these boxes. Let’s integrate login to our site. Click on login box.
Integrate Facebook login img-10
It will open a new tab and on that page you will find a complete code for login to put into your facebook template file.
Facebook Login code for the Web Using the JavaScript SDK
Step 10:
After putting the code, just find this “{your-app-id}” and put your app id. You can get your app id by navigating to this page “My apps”
Save your fb template and reload the page.
Ah, an error, but it was important to show you. See it is saying the URL is mismatching. But what is it about? Now go to “My apps” page and edit your app settings on edit settings page you will see the “App Domains” is empty and you should mentions your app domain over here. And we are using http://localhost/wordpress/facebook so our “App Domain” will be “localhost”. Put “localhost” in the box and click save. Now go to your WordPress page and reload it.
Awesome, now you can see something like this.
Integrate Facebook login img-12
There are three things to take care of.
1: Which of the things you are taking from user.
2: User can edit and select which of the things he wants this app to access.
3: Facebook is assuring the user that this app will not put anything on your wall (Unless you give it permissions to do so).
After clicking OK, you will get a “response object” from Facebook. This object will have the whole detail. If you open your browser’s console you will see some sub objects of main object. You can console the whole “response object” to see the whole information it is carrying.
Integrate Facebook login in WordPress – Login now
You can put the post request into this block or wherever you need. In our Test example, we are using TestAPI() function which fetches the user information from Facebook and shows you in console.log
"if (response.status === 'connected'){}"
You can make an ajax call at this point and store user information in your WordPress database and create Facebook login user as a WordPress user as well. There should be part 2 of this tutorial which explains that how we make an ajax call and create Facebook login user as WordPress user as well. We will be sharing it soon seeing how much people are interested in it so looking forward to it, and you can ask anything related to integration of Facebook login to WordPress in the comment box, will surely be helpful to all of our great readers!
