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.
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.
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.
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.
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 up-scaling (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 DPI displays.
Cropped vs Uncropped
The difference between cropped and uncropped image dimensions is important -- when resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions, and any excess width or height will be lost. 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 display Open Graph images in aspect ratio anyway.
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 Container(s)" option under the NGFB General Settings > Google / Schema tab.
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 include/exclude 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.
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:
Website developers and designers will probably want to look at a few options on the Advanced Settings page...
<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'.