A Setup Guide for NGFB

NGFB works great "right out of the box" — and you can keep the default plugin settings as-is — but taking a few minutes to review some basic options can help maximize your social presence and click-through rate. ;-)

Business Social Accounts (Optional)

If you haven't already done so, create a Facebook Page, Twitter account, and Google+ account (or Page) for your website / business. You can enter your website / business social account information on the WordPress Settings > Website Social Pages and Accounts settings page. The social account URLs are used by NGFB for Open Graph, Schema, and other meta tag values — including the Organization social profiles in Schema JSON-LD markup (which may appear in Google Search results to highlight your website / business social pages).

Related information:

Author Social Accounts (Optional)

Ask your authors to enter their Facebook, Google+, and Twitter contact information on their WordPress user profile page. Each author's contact information can appear in various meta tag values and Schema 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.

Related information:

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. When an author allows followers, Facebook will also link an author's name in shares to their profile page.

Essential Plugin Settings

Review the site description on the NGFB > Essential Settings page and select a default / fallback image ID or URL. The default image is used for index / archive pages, and as a fallback for Posts and Pages that do not have a suitable image featured, attached, or in their content.

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 "NGFB Img" and "NGFB Desc" columns. You can also enable / disable these columns globally under the NGFB > Advanced > Social / Custom Meta tab.

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 "Preview" tab shows how this webpage might look like when shared 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.

Social Image Dimensions

Review the WordPress Settings > Social and SEO 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 or better is required to avoid upscaling (stretching) images for retina / high-PPI displays — so it's worth taking the time to make sure all your original images are at least 1200px wide, along with setting an Open Graph image dimension of 1200x630px cropped.

Cropped or Uncropped?

The difference between cropped and uncropped image dimensions is important to understand — when resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions required and the excess width or height is trimmed. The resulting image will match the required dimensions exactly (having sacrificed parts of the image). When resizing without cropping, the original aspect ratio is preserved, and no parts of the image are sacrificed. The image will be resized so both the width and height fit within the designed size &mash; so only one side of the image has to match the required size.

Verify Dimensions?

NGFB Pro can double-check that all images returned by WordPress match the dimensions it requested (as WordPress can return smaller and/or inaccurate images). This also insures that images which are too small and/or tall / wide for social sites are rejected in favour of other larger (and more suitable) images. You can enforce the image dimensions check by enabling the "Enforce Image Dimensions Check" option under the NGFB > Advanced > WP / Theme Integration tab.

Upscale / Enlarge Images?

WordPress does not upscale (enlarge) images — it 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 look fuzzy and unappealing — not something you want to publish on social sites. NGFB Pro includes an optional module that allows you to upscale social images in the WordPress Media Library (up to a maximum upscale percentage). For example, a full-size image of 100x200px could be upscaled up to 150x300px using a maximum of 50%, but resizing any larger would fail. If you feel strongly that upscaling small images is something you require (instead of uploading larger full-size originals), you can enable this feature under the NGFB > Advanced > WP / Theme Integration tab.

Validation Tools

Submit a few sample Posts, Pages, etc. 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 (on post, term, and user editing pages). 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 even after fetching the new scrape information.

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 (and Schema) 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.

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.

Related information:

Caching Plugins and Services

NGFB allows you to customize Open Graph meta tag and Schema markup values specifically for the Pinterest crawler. If you use a caching plugin (or front-end caching service), it should detect the Pinterest user-agent and bypass its cache — for example, look for a "User-Agent Exclusion Pattern" setting and add "Pinterest" to that list. In order to provide the most up-to-date information for social and search crawlers, you may also consider adding the following user-agents to your caching plugin / service exclusion list:

facebookexternalhit
Google-Structured-Data-Testing-Tool
validator.ampproject.org
Pinterest
Twitterbot
W3C_Validator
Validator.nu

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

Comments and suggestions to improve the plugin features are always welcome — please open a ticket if you have any ideas you would like to share with us. ;-)

Developers and Website Designers

Website developers / designers will probably want to consider a few additional settings...

  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. NGFB may display warning notices if images are too small for the dimensions required. If you are using WordPress v4.2 or better, these notices can be dismissed individually. You can also define the NGFB_HIDE_ALL_WARNINGS constant as true to auto-hide all dismissable warnings.
  3. Users can hide / unhide the "NGFB Img" and "NGFB Desc" columns using the Screen Options drop-down tab, but you can also enable / disable these columns globally under the NGFB > Advanced > Social / Custom Meta tab.
  4. 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 NGFB > Advanced > Social Settings tab.
  5. 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.
  6. NGFB modifies the <head> element attributes to add a Schema item type for the <head> section only. To apply the Schema item type for the whole page instead, change the "<head> Attributes Filter Hook" value from 'head_attributes' to 'language_attributes'.
  7. You can simulate / test the NGFB image upscaling feature, to generate all the necessary success / failure notice messages, without having WordPress actually 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.