Embed a Facebook Feed Into your Full or Mobile Site

A great resource for a recent news page on a mobile site or full site is using a Facebook feed if available. A lot of plugins are available but Facebook offers a great developer resource that is simple and easy to use. Watch the video below. I added links below the video for the Facebook developer page and the plugin I like to use.

Facebook Developer Page Plugin Code

https://developers.facebook.com/docs/plugins/page-plugin

Addfunc Head and Footer Plugin

AddFunc Head & Footer Code

Divi Post Blank Tempate

post

When linking to a responsive Blog page you end up with a great mobile solution. However when opening a single post to read; you get a header area that may not look great on a mobile device or a menu that you don’t want accessible from a mobile user. One solution is to remove the the header and footer area on single blog post page. You can do this with Global CSS. Now you have full control of the single blog post look on a mobile device. (CSS is in a toggle below)

Now here lies a problem. When you look at your site from a desktop, laptop or tablet you will have no header area at all on single blog posts. There is a simple solution however.

When doing a blog post with builder you can add a full width navigation and disable it on mobile devices only. If you have two menu’s available. (a main menu and a mobile menu) You can add two full width navigation sections. Select which devices each one can be viewed/hidden from and you are set.

An easy thing to do on a blog post once you have the navigation menu’s setup the way you want, simply start adding modules.

Full width navigation section 1 or 2 of them.
Image Module for Site Logo
Post Title Module
Text Module for Post Content
Post Navigation Module
Text Module for footer

Save this layout to your library and you are all setup.

When doing a new post.
Use Divi Builder
Select hide post title on the right.
Load from library your saved blog post layout.
Add your post content.
Divi takes care of the rest and you now have a great looking full website blog post and one that works great on mobile.

In our shop I will add our custom Blog Post template.

Global CSS Hide Header Full site

.single-post #main-header,
.single-post #main-footer,
.single-post #top-header{
display:none;
}