WordPress plugin to integrate your Facebook page feed

Hello!

We have created yet another WordPress plugin! We are highly motivated to roll out any and all WordPress custom development as a neatly packaged plugin for the general public to use. We have many more ideas and many more plugins in the works.

Check out the plugin hereThis latest plugin, recently approved by the WordPress plugin auditing community, pulls your Facebook page’s feed and injects it into your site anywhere (by use of a simple shortcode). As with other similar Facebook plugins, this plugin requires you to generate a simple Facebook app with API key/secrets in order to connect and pull the data.

The plugin utilizes the PHP Facebook SDK in order to connect and pull the data. I’ll walk you through the different parts of the plugin’s code, however if you’re interested click the SDK link to read more about how the Facebook SDK works.

Load Facebook’s SDK

// Require facebook php library
require_once plugin_dir_path( __FILE__ ) . 'facebook/facebook.php';

Pretty simple, right? We simply packaged the SDK with our plugin and are requiring it at the top of our file. SDK updates can simply be integrated and updated this way, provided functions and variables that are dependent on the SDK do not fundamentally change.

Create admin menu options

One thing we’re doing here that we did not do with our previous plugin is have admin area options to define variables that the shortcode will use to connect to facebook. All we really need is the Facebook App ID, App Secret and Page name. These requirements are pretty self explanatory, so in the plugin’s code we define the admin options that will hold this information.

function shift8_fbfeed_create_menu() {
        //create new top-level menu
        add_menu_page('Shift8 FB Feed Settings', 'Shift8', 'administrator', __FILE__, 'shift8_main_page' , 'dashicons-building' );
        add_submenu_page(__FILE__, 'Facebook Feed Settings', 'Facebook Feed Settings', 'manage_options', __FILE__.'/custom', 'shift8_fbfeed_settings_page');
        //call register settings function
        add_action( 'admin_init', 'register_shift8_fbfeed_settings' );
}


function register_shift8_fbfeed_settings() {
        //register our settings
        register_setting( 'shift8-fbfeed-settings-group', 'fb_app_id' );
        register_setting( 'shift8-fbfeed-settings-group', 'fb_app_secret' );
        register_setting( 'shift8-fbfeed-settings-group', 'fb_page_name' );
}

// Admin settings page
function shift8_fbfeed_settings_page() {
?>

 

To give you an idea of what you could do, see the example CSS styling below which would produce something styled similar to the screenshot here.

.frontfb-list {
	list-style:none;
	display: inline-block;
	padding: 10px;
}
.frontfb-item {
	border-top: 2px solid #DDD;
	padding-bottom: 25px;
	padding-top: 15px;
	color: #000;
	font-size: 12px;
	height:100%;
	overflow: auto;	
}
.frontfb-bottom {
	width:100%;
}
.frontfb-itemtext {
	width:100%;
}

.frontfb-image {
	float:right;
	padding-right:15px;
}