In the tutorial, we guide how to create a SpringBoot Facebook Social Application that consumes data from Facebook feeds.
Contents
Technologies
– SpringBoot 1.5.10
– Facebook Social Network
Demo
Practice
Project structure ->
Create SpringBoot App
We create a SpringBoot project with below dependencies:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.social</groupId> <artifactId>spring-social-facebook</artifactId> </dependency> |
Create Facebook Connect Page
– /templates/connect/facebookConnect.html ->
<html> <head> <title>SpringBoot Facebook</title> </head> <body> <h3>Connect to Facebook</h3> <form action="/connect/facebook" method="POST"> <input type="hidden" name="scope" value="user_posts" /> <div class="formInfo"> <p>You aren't connected to Facebook yet. Click the button to connect this application with your Facebook account.</p> </div> <p><button type="submit">Connect to Facebook</button></p> </form> </body> </html> |
Create Facebook Connected Page
– /templates/connect/facebookConnected.html ->
<html> <head> <title>Hello Facebook</title> </head> <body> <h3>Connected to Facebook</h3> <p> Connected to Facebook account. Click <a href="/">here</a> to see some Facebook feeds. </p> </body> </html> |
Create Display Facebook Feed Page
– /templates/hello.html ->
<html> <head> <title>Hello Facebook</title> </head> <body> <h4>Some your feeds:</h4> <div th:each="post:${feed}"> <b th:text="${post.from.name}">from</b> wrote: <p th:text="${post.message}">post message</p> <img th:if="${post.picture}" th:src="${post.picture}"/> <hr/> </div> </body> </html> |
Facebook Fetch Feeds Controller
– FacebookFetchFeeds.java ->
package com.grokonez.facebookdata.controller; import org.springframework.social.connect.ConnectionRepository; import org.springframework.social.facebook.api.Facebook; import org.springframework.social.facebook.api.PagedList; import org.springframework.social.facebook.api.Post; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class FacebookFetchFeeds { private Facebook facebook; private ConnectionRepository connectionRepository; public FacebookFetchFeeds(Facebook facebook, ConnectionRepository connectionRepository) { this.facebook = facebook; this.connectionRepository = connectionRepository; } @GetMapping("/") public String getFacebookFeed(Model model) { if (connectionRepository.findPrimaryConnection(Facebook.class) == null) { return "redirect:/connect/facebook"; } PagedList<Post> feed = facebook.feedOperations().getFeed(); model.addAttribute("feed", feed); return "hello"; } } |
-> The Facebook object is a reference to Spring Social’s Facebook API binding.
Get Facebook App ID & Secret Key
Go to https://developers.facebook.com/apps ->
Select an Facebook App ->
Select Setting -> Basic, we get App ID & Secret Key ->
– Add App ID & Secret ID to application.properties file ->
spring.social.facebook.appId=2191690341086172 spring.social.facebook.appSecret=ff67f3453df75f658ec7d17ffb3ef3ba |
Run & Check Results
Firstly, login to Facebook account, then makes a request http://localhost:8080 ->
Click Connect to Facebook button -> Do a Facebook’s authentication -> See connected page:
Click here button, see Facebook’s feeds ->
