A Setup Guide for NGFB

The following Setup Guide is a collection of suggestions and hints to help you get started with the NGFB plugin. NGFB works great "right out of the box" and you may decide to keep the default settings as-is, but taking a few minutes to review the settings will help maximize your social presence and click-through rate.

  1. WebSite Social Accounts

    Create a Facebook Page, Twitter account, and Google+ account (or Page) for your website / business (if you haven't already). You can enter your website's social accounts information on the WordPress Settings > Website / Business Social Accounts page. The social account values are used by NGFB for Google / SEO, Schema, Open Graph, and other meta tags -- including the publisher (Organization) social profiles markup in schema.org JSON-LD format. These social accounts may appear in Google Search results to highlight your website / business social pages.

  2. Author Social Accounts

    Ask your authors to enter their Facebook, Google+, and Twitter contact information on their profile page. Each author's contact information can appear in various meta tags and schema.org JSON-LD markup -- but only if they complete their user profile. All URLs found in the author's contact methods will be listed in the author (Person) social profile markup for Google. Authors should take a moment to update their Facebook Follower Settings to enable a Follow button on Facebook. In this way, authors can publish both private (for friends) and public (for friends and followers) content on their Facebook wall.

  3. Essential Settings

    Review the Site Description on the NGFB Essential Settings page and select a Default / Fallback Image ID. NGFB uses information from the first post on index / archive and search webpages. If you define a Default Image ID (or Default Image URL), NGFB can use this image as a fallback in case a Post / Page does not contain a suitable image, and/or force the default image on index / archive and search webpages. See the NGFB General Settings > Images tab for these and other image related options.

  4. Image Dimensions

    Review the WordPress Settings > Social Image Dimensions values. If your original images are large enough, you should set the Open Graph image dimensions to 1200x630px cropped or larger. Images that are 600px and wider are displayed more prominently on Facebook, and 1200px and wider is required to avoid web browsers upscaling (stretching) images for retina / high-PPI displays — so it's worth taking the time to make sure all your original / full-size featured images are at least 1200px in width and 630px in height, along with setting an Open Graph image dimension of 1200x630px cropped.

    The default Open Graph image dimensions are 600x315px cropped. You can reduce these values down to 200x200px cropped, but Facebook will display small images as thumbnails in user timelines. The minimum recommended image dimensions are 600x315px cropped — and for best results, use 1200px or wider.

    If your original images are large enough, you can also double the default Twitter Card image dimensions from 600x600px to 1200x1200px, and from 300x300px to 600x600px. By offering larger images, you allow Twitter to provide higher resolution images for retina / high-PPI displays.

    Cropped or Uncropped?

    The difference between cropped and uncropped image dimensions is important to know -- when resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions, and then the excess width or height is trimmed. As an example, an image of 3264x2448px resized to 1200x630px cropped with have dimensions of 1200x630px, loosing 135px on both top and bottom (270px total). The same image resized to 1200x630px uncropped will have dimensions of 840x630px -- the original aspect ratio was preserved, and no parts of the image were sacrificed, but its width is not optimal for Facebook. The suggested Open Graph image dimensions are 600x315px or 1200x630px cropped since Facebook will crop Open Graph images to this aspect ratio for display anyway.

    Upscale / Enlarge Images?

    WordPress does not upscale (enlarge) images — WordPress only creates smaller images from larger full-size originals. Upscaled images do not look as sharp or clean when upscaled, and if enlarged too much, images will look fuzzy and unappealing — not something you want to promote on social sites. NGFB Pro includes an optional module that allows upscaling of WordPress Media Library images for NGFB image sizes (up to a maximum upscale percentage). For example, a full-size image of 100x200px could be upscaled up to 150x300px using the default maximum of 50%, but resizing the images any larger would fail (unless you increased the maximum).

    If you feel strongly that upscaling small images in your WordPress Media Library is something you want (instead of uploading larger full-size originals), you can enable this feature under the Advanced > WP / Theme Integration tab. Do not enable this feature unless you want to publish lower quality images on social sites.

    Accept Smaller / Thumbnail Images?

    By default, NGFB double-checks all images returned by WordPress to make sure they match the dimensions it requested, as WordPress can return inaccurate images. This check also insures that images that are too small (smaller than the image dimensions requested) are rejected in favour of other potentially larger / more suitable images. You can use smaller / innaccurate images by unchecking the "Enforce Image Dimensions Check" option under the Advanced > WP / Theme Integration tab.

  5. Validation Tools

    Submit a few sample Posts and Pages to the Facebook Debugger to verify your Open Graph meta tags. A link to the Facebook Debugger is available under the Validate tab in the Social Settings metabox. Submitting a URL to the Facebook Debugger can also be used to clear Facebook's cache (after clicking the "Fetch new scrape information" button a few times). If you're validating older posts / pages, pre-dating the activation of NGFB, Facebook may continue to use the old meta tag values from its cache.

    Submit a Post / Page to the Pinterest Rich Pin Validator and request approval for Rich Pins. Pinterest Rich Pins are an extension of Open Graph meta tags, but the Rich Pin Validator can be a little buggy, so double check any errors with the Facebook Debugger to make sure they are actual / real errors. Once approved, you can zoom a Pin to view its Rich Pin information.

    Submit index / archive and Post / Page URLs to the W3C Markup Validation Service to verify the HTML of your theme templates. Social crawlers expect properly coded HTML markup that conforms to current HTML / XHTML standards. If your webpages contain serious markup errors, social and/or search engine crawlers may be unable to parse your webpage content. Fix and/or report any template markup issues with your theme author. NGFB uses <noscript> containers to include additional schema markup in webpage headers. The W3C validation tool may report errors for these meta tags. These errors can be safely ignored, or uncheck the "Use Meta Property Containers" option under the NGFB General Settings > Google / Schema tab.

  6. Interface and General Usage

    On most WordPress admin pages you'll find a Screen Options drop-down tab on the upper right-hand side of the page. You can use these options to include/exclude certain NGFB metaboxes and columns from the current page. For example, when viewing the Posts or Pages list you can use the Screen Options drop-down tab to hide / view the "Social Img" and "Social Desc" columns.

    When editing a Post, Page, category, tag, etc., you'll find a Social Settings metabox at the bottom of the page, where you can edit various social texts and image values. The "Social Preview" tab gives you an idea of what sharing a link to this webpage might look like on Facebook, the "Head Tags" tab shows a complete listing of meta tags created by NGFB, including additional Schema markup and LD+JSON for Google, and the "Validate" tab allows you to submit the current webpage URL to a number of test and validation tools.

  7. Documentation and Resources

    NGFB is a powerful tool and social framework that detects images and videos from a variety of sources (attached, featured, content, etc.), along with 3rd party plugins and e-commerce product information. It's worth noting some of the most common questions, to get an idea of what NGFB can do, and some of the issues that may come up. Some of the most relevant / popular frequently asked questions are:

    Frequently Asked Questions

    Additional Documentation

  8. Developers and Designers

    Website developers / designers will probably want to look at a few options on the Advanced Settings page...

    1. If your site uses shortcodes, you'll want to enable the "Apply WordPress Content Filters" option to expand shortcodes in the content for description text and/or image meta tags (the content can be searched for images).
    2. Users can hide / view the "Social Img" and "Social Desc" columns using the Screen Options drop-down tab, but you can also enable / disable both these columns globally by post type under the Social Settings tab.
    3. If your theme uses custom fields to manage additional image and video URLs (and embed video HTML), you can enter those custom field names (aka post meta names) under the Social Settings tab.
    4. If you know that your theme header templates do not include any social meta tags, and no other plugin is adding social meta tags to your webpages, then you could disable the "Check for Duplicate Meta Tags" option.
    5. By default, NGFB modifies the <head> element attributes to add a Schema itemtype for the <head> section only. To have NGFB add the Schema itemtype for the whole page instead, change the "<head> Attributes Filter Hook" value from 'head_attributes' to 'language_attributes'.
    6. You can simulate the image upscaling feature to generate success / failure notice messages without having WordPress save the resulting images — define the NGFB_IMAGE_UPSCALE_TEST constant as true, or hook the 'ngfb_image_upscale_test' filter and return true. Other constants and filters are also available to upscale all images (not just the NGFB image sizes) and adjust the maximum percentage.

3 thoughts on “A Setup Guide for NGFB

Leave a Reply

Your email address will not be published. Required fields are marked *