# BlueBook Feed Sync A professional WordPress plugin that displays your Facebook Page feed with multiple layouts, full customisation, multi-feed management, and interactive lightbox — Easy setup, fully customizable, and lightweight. Multiple layouts, interactive lightbox, video support, and multi-feed management. **Version:** 3.9.30 **Authors:** SDAweb - Rune Stake Stavdal, Vinjar Romsvik, Christer Andvik **Website:** [sdaweb.no](https://sdaweb.no) --- ## Features ### Multi-Feed Manager (v3.0) Create unlimited feeds, each with their own settings. Perfect for sites that need different feeds on different pages. - **Feed Selector** — Dropdown at the top of the admin page to switch between feeds - **Create / Duplicate / Rename / Delete** — Full feed lifecycle management - **Inherit API keys** — New feeds automatically copy connection settings from the primary feed - **Per-feed shortcodes** — Each feed gets its own shortcode with a unique ID - **Shortcode overrides** — Override any setting directly in the shortcode ### Layouts - **List** — Single-column vertical feed (max-width 960px) - **Masonry** — Pinterest-style multi-column grid - **Carousel** — Multi-card horizontal slider (3 desktop / 2 tablet / 1 mobile) with snap-based swipe navigation, dot indicators, and arrow buttons - **Boxed** — Clean CSS Grid layout with subtle borders ### Header Styles **Visual Header** with 4 layout presets: | Style | Description | |-------|-------------| | Classic | Cover photo on top, avatar overlapping, info below | | Compact | Avatar and name side by side in a single row | | Banner | Full-width cover with gradient overlay text | | Clean | Centred avatar, name, bio — no cover photo | **Text Header** — Facebook icon + custom text, with optional page name and bio display. **Shared options** for both header types: - Page Name override (or auto from Facebook) - Show Bio toggle (default on) - Bio / Description override (or auto from Facebook) - Custom background: Theme / Solid colour / Gradient (2 colours + direction) / Transparent ### Lightbox All posts open in a split-layout lightbox: - **Left** — Full-size image or inline video player - **Right** — Post text, author, engagement stats - **Thumbnail strip** — Navigate multi-photo galleries - **Arrow navigation** — Between posts (keyboard arrows supported) - **Touch swipe** — Mobile/tablet navigation between posts and images - **Infinite scroll** — When you reach the last loaded post, the next batch loads automatically - **Text-only posts** — Clean full-width layout instead of an empty media panel - **Close** — X button, click overlay, or Escape key **Video touch zones** — On mobile, the centre of the screen is reserved for video controls. Edge zones handle navigation. ### Video Support **YouTube** — Auto-detected from shared links. All URL formats supported (watch, embed, youtu.be, shorts, live). Click-to-play with thumbnail. Uses `youtube-nocookie.com` for privacy. **Facebook Videos** — Thumbnail with blue play button. Embeds via `facebook.com/plugins/video.php` for stability. ### Colour System 3 built-in schemes + full custom palette: | Scheme | Description | |--------|-------------| | Inherit | Uses your WordPress theme colours | | Light | White cards, white elements, clean look | | Dark | OLED-friendly pure greys (#121212 / #0a0a0a) with subtle shadows | | Custom | 9 individually configurable colours | **Custom palette colours:** Post background, Element background, Primary text, Secondary text, Link colour, Date colour, Border colour, Author name colour, "Vis flere" link colour. **Reset to Default** button restores all custom colours to the Light scheme defaults. ### Post Content - Author name as clickable link to the Facebook post - Story context text (e.g. "sendte direkte", "har oppdatert forsidebildet") - Relative or absolute date formatting - Full post text with URL auto-linking and `white-space: pre-line` - "Vis flere" text truncation with expand-on-click - Image galleries with thumbnail row and "+N" badge - Engagement bar: likes, shares, comments + "Se på Facebook · Del" ### Sections - **Like Box** — Facebook Page Like widget, configurable size and position - **Load More** — Cursor-based pagination with custom button styling - **Sticky Footer Bar** — Like Box and Load More always visible while scrolling (non-carousel layouts) --- ## How to Configure Meta / Facebook This is a step-by-step guide to get your Facebook feed working. You need four things: **App ID**, **App Secret**, **Page ID**, and a **Page Access Token**. ### Step 1: Create a Facebook (Meta) App 1. Go to [developers.facebook.com](https://developers.facebook.com/) and log in with your Facebook account. 2. Click **"My Apps"** in the top right corner, then **"Create App"**. 3. Choose app type **"Business"** (or "Other" → "Business" if prompted). 4. Give your app a name (e.g. "My Website Feed") and click **"Create App"**. 5. Once created, go to **Settings → Basic** in the left sidebar. 6. Copy your **App ID** and **App Secret** (click "Show" to reveal the secret). ### Step 2: Find your Page ID 1. Go to your Facebook Page. 2. Click **"About"** (or "Page transparency" on newer layouts). 3. Your **Page ID** is a numeric ID shown at the bottom of the About section. 4. Alternatively, you can use the page username from the URL, e.g. `facebook.com/MyChurchPage` → Page ID is `MyChurchPage`. ### Step 3: Generate a Page Access Token 1. Go to the [Graph API Explorer](https://developers.facebook.com/tools/explorer/). 2. In the top right dropdown, select your app (the one you created in Step 1). 3. Click **"Generate Access Token"**. 4. When asked for permissions, grant: **pages_show_list** and **pages_read_engagement**. 5. After granting permissions, use the "User or Page" dropdown to select **your Page** (not your personal account). 6. Copy the token shown — this is a **short-lived token** (expires in ~1 hour). ### Step 4: Extend to a Long-Lived Token (important!) The short-lived token expires quickly. Exchange it for a long-lived token by pasting this URL into your browser, replacing the placeholders: ``` https://graph.facebook.com/v22.0/oauth/access_token? grant_type=fb_exchange_token& client_id=YOUR_APP_ID& client_secret=YOUR_APP_SECRET& fb_exchange_token=YOUR_SHORT_LIVED_TOKEN ``` - Replace `YOUR_APP_ID` with the App ID from Step 1. - Replace `YOUR_APP_SECRET` with the App Secret from Step 1. - Replace `YOUR_SHORT_LIVED_TOKEN` with the token from Step 3. - Press Enter. You will get a JSON response containing `access_token` — this is your **long-lived Page Access Token**. > 💡 **Tip:** Page Access Tokens generated this way are typically permanent and do not expire, as long as the Facebook App remains active and the page admin's account is not deactivated. ### Step 5: Configure the Plugin 1. Go to **BlueBook Feed** in the WordPress admin menu. 2. Enter your **App ID**, **Page ID**, and **Access Token** in the Connect tab. 3. Click **"Verify Connection"** — you should see a green confirmation with your Page name. 4. Customise appearance across the Layout & Style, Header, and Features tabs. 5. Add the shortcode to any page or post. --- ## Installation 1. Download `bluebook-feed-sync.zip` 2. In WordPress admin: **Plugins → Add New → Upload Plugin** 3. Upload the zip and click **Install Now** 4. Activate the plugin --- ## Shortcodes ### Basic usage ``` [bbfsync_feed] ``` Displays the primary feed (#1 Standard) with all its saved settings. ### Multiple feeds ``` [bbfsync_feed id="2"] ``` Displays feed #2 with its own settings. ### Override settings inline ``` [bbfsync_feed id="2" layout="carousel" posts_desktop="6" color_scheme="dark"] ``` Any setting key can be overridden directly in the shortcode. ### Common override examples ``` [bbfsync_feed layout="list"] [bbfsync_feed layout="carousel" posts_desktop="6"] [bbfsync_feed layout="boxed" columns_desktop="2"] [bbfsync_feed color_scheme="dark"] [bbfsync_feed header_enabled="0"] ``` --- ## Cache The plugin caches API responses to minimise Facebook API calls. To refresh: 1. Go to **BlueBook Feed** in the admin menu 2. Click **Clear Cache** in the Connect tab (under "Advanced") After updating the plugin, always clear the cache and do a hard browser refresh (Ctrl+Shift+R) to ensure new CSS/JS is loaded. --- ## Changelog ### 3.9.21 - **Infinite lightbox browsing** — next batch of posts loads automatically when you reach the last post - **Text-only lightbox** — clean full-width layout instead of empty black media panel - **Customisable video button labels** — Mute, Unmute, and Fullscreen labels in Features → Labels & Text - Per-feed CSS scoping — multiple feeds with different custom colours on the same page no longer conflict - Reset palette defaults now match settings defaults exactly - Version consistency across all plugin surfaces - Page name displays correctly in text header mode - Bio display logic consistent across all header styles - Lightbox renders above sticky headers and page builder containers - Facebook Graph API version centralised as a single constant - API retry logic logs failures/successes when WP_DEBUG_LOG is enabled - Dark colour scheme error message styling improved - Legacy migration runs only on activation instead of every page load ### 3.4.0 - **Admin panel UX redesign** — 6 tabs reorganised to 4 (Connect, Layout & Style, Header, Features) - Client-side tab switching — no page reloads when navigating between settings tabs - Header tab uses collapsible accordion sections (Content, Background, Typography, Mobile) - Features tab merges Sections and Lightbox into card-based toggles with enable/disable switches - Layout & Style tab merges Layout and Colours into one tab with clear visual sections - Connect tab: collapsible Advanced section, auto-expanding setup guide, connection status banner - Two-row feed management bar with shortcode badge and copy button - Sticky save button with unsaved changes indicator and navigation warning - Backwards-compatible URL mapping for old tab names ### 3.3.0 - Fixed Facebook video playback (black screen on play) with direct iframe embed - Added feed Export/Import functionality in admin panel - Added header text color option for text-style headers - Fixed inline SVG icons being stripped by output escaping ### 3.2.0 - Added lightbox image counter for multi-photo posts - Security hardening: feed management actions use POST requests - Mobile carousel improvements (auto-height images, swipe navigation) - Added mobile-specific toggles for header page name and bio visibility - Two-level lightbox navigation: images within posts, then between posts - WordPress.org audit compliance improvements ### 3.0.0 - **Multi-Feed Manager** — Create unlimited feeds with individual settings - Feed selector dropdown with create, duplicate, rename, delete - Per-feed shortcodes with ID parameter - Shortcode attribute overrides for any setting - New feeds inherit API connection from primary feed - Feed ID passed through AJAX for correct Load More pagination ### 2.9.x - **Header redesign** — 4 visual styles (Classic, Compact, Banner, Clean) - **Header backgrounds** — Theme, Solid colour, Gradient, Transparent - Visual style picker with mini preview cards in admin - Show Bio toggle (shared across header types) - Page Name & Bio as shared fields (no more duplicates) - Light scheme uses white for all content boxes ### 2.8.0 - Header style picker with visual preview cards (Visual vs Text) - Text header: transparent background option, custom text size - Visual header: reorganised settings with size/colour controls ### 2.7.x - **Dark scheme** — OLED-friendly pure grey palette with depth shadows - **Reset to Default** button for custom colour palette ### 2.6.0 - Sticky footer bar combining Like Box and Load More (always visible) ### 2.5.x - **Carousel swipe** — Snap-based passive touch navigation, works everywhere on cards - List layout width increased to 960px ### 2.4.0 - Multi-card carousel (3/2/1 responsive), uniform card heights - Dot pagination and arrow navigation ### 2.0.x - Touch swipe in lightbox - Facebook video iframe embed (stable) - Video touch zones for mobile ### 1.9.x - YouTube auto-detection and click-to-play - Supports all YouTube URL formats ### 1.8.0 - Universal post lightbox with split layout - Gallery navigation, keyboard arrows ### 1.7.0 - 9-colour customisation system - Lightbox redesign ### 1.6.0 - Boxed layout, author links, story text, image galleries, engagement bar ### 1.5.0 - Carousel slider, video lightbox, cursor-based pagination ### 1.0.0 - Initial release with List and Masonry layouts --- ## Requirements - WordPress 5.8+ - PHP 7.4+ - A Facebook Page with a valid Page Access Token ## License GPL v2 or later. See [LICENSE](https://www.gnu.org/licenses/gpl-2.0.html).