Facebook Gallery Images In Gravity Forms

Facebook Gallery Images In Gravity Forms is an extension of Gravity Forms which allows the user to access their Facebook images on Gravity forms, so it helps the user to attach their Facebook images in Gravity Form Submission.

Admin can also view these attached images in the form of URLs under entries of Gravity Form.

• Import Facebook images in a single click and create an entire gallery that you can select from.
• Allow your website visitors to click on a photo and view it, without leaving your website.
• Automatically import all albums from a Facebook Page and create an entire web gallery via the view all user selected images in Gravity form entry details page.
• Admin has the option to define number of Facebook images selected from my gallery and also limit the number which will be fetched.

1) Go to developers.facebook.com and click on Log In in the top right.  Log in using your personal Facebook credentials.
Note: The personal Facebook account that you use to register as a developer does not need to be associated in any way with the page or group whose posts you want to display. You can use the Access Token you receive to display the posts from any public Facebook page or open group.
Note: You cannot log in to the Developer site using a Facebook Page or Business account. You must use the username and password from your personal Facebook profile. Facebook doesn’t allow businesses to register as developers, only individuals.

2) If this is your first time signing in to the Facebook Developer portal then click on Register. Registering is a quick and easy process that will take less than a couple of minutes.  If you’re already registered then you can skip ahead to step 7.

3) Accept the Facebook terms and click Next.

4) Enter your phone number to confirm your account.

5) Facebook will send you an automated text message containing a confirmation code. Enter it in the box and click Register.

6) You’re now registered as a Facebook Developer. Click Done.

7) Hover over My Apps and then click on Add a New App.

8) If prompted, click on basic setup. Note, this isn’t always displayed so, if not, then you can skip to the next step.

9) Enter your app Display Name – this can be anything you like. Enter an email address and click Create App ID

10) Complete the Security Check and click Submit.

11) Your App is now set up in Development mode, but needs to be made Live in order to work. Go to your app settings and click “Basic“:

12) Enter your email address, a link to your website terms or privacy policy, and select a category (such as Business and Pages). Then click “Save Changes” at the bottom.

13) Once you’ve saved the changes, go back to the app Dashboard

14) Click the “Off” button in the top right to make your app Live. Click “Confirm” when prompted.

15) Now your app is live. Go back to the settings page again to get your app information.

16) Important: Copy and paste your App ID and App Secret (shown below) into the fields in the next step to retrieve your Access Token.
Note: Make sure to click “Show” next to your App Secret before copying.

17) Copy above App ID and App Secret and past in the field below in order to get your access token

18) HOW TO GET ACCESS TOKEN 

• • Follow the below given steps to get user access token .
  • On facebook developer account page Admin has to go to tools tab and select Graph Api Explorer.

• • Admin will be redirected to Graph Api Explorer page ,
  • Admin has to click get token tab
  • From the tab drop down list admin has to select get user access token.

• • A permissions dialogue box will pop up
  • Admin has to select permissions for the app.
  • After selecting permissions admin has to click the get access token button.

• • Admin will be redirected to confirmation page .
  • Login again if prompted.
  • Click continue.

• • Admin will again be redirected to another confirmation page
  • Click ok

• • Admin will be redirected to Graph Api Explorer
  • Refresh the page
  • Admin has to click access token info to reveal the token information.
  • In the information tab , click on open in access token tool.

• • Admin will be redirected to the page where all token information will be available
  • Scroll down the page and there will be a extend access button
  • Click the button.

• • An extended access token field will be visible that is the access token for the user (copy that code).

• • Copy the Access Token and keep it safe on your side
  • Access token is just for facebook verification. Main thing we have to Add App ID in Plugin Setting. Follow below mention steps:

Step 1: Copy App ID from Dashboard as mention in screenshot

 

• Step 2: Paste App ID in plugin settings field

 

 

• Step 3: Now goto preview screen and click on facebook button

 

 

• Step 4: Next you will see the permission popup. Before continue with your facebook account first you have to submit your application for approval process by facebook team as you see in popup header

 

 

• *NOTE Make sure your app must be approved by Facebook team. Otherwise you can’t access in your gallery. If you have trouble contact Facebook Support for assistance.

 

How To Use The Plugin

Forms: select setting to add Facebook and, to add Facebook API key
 

 
Forms: select the form which will display the Facebook button to fetch images.
 

 

Remote images view in Frontend

Form display in Frontend with a button for remote image (Facebook)
 

 

Select Facebook buttons following popup will be shown, after login to your account and verify your Facebook account.