A Setup Guide for NGFB

NGFB works great "right out of the box" — and you could 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. ;-)

Website Social Accounts

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's social account information on the WordPress Settings > Website Social Pages and Accounts page. The social account values are used by NGFB for Google / SEO, Schema, Open Graph, and other meta tag values — including the publisher / Organization social profile URLs in the Schema JSON-LD markup (which may appear in Google Search results to highlight your website / business social pages).

Author Social Accounts

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.

Authors should also 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 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. See the NGFB General Settings > Images tab for these and other image related options.

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 know — 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 will match the required size.

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.

Verify Image 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 check 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 this image check by enabling the "Enforce Image Dimensions Check" option under the Advanced > WP / Theme Integration tab.

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 (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.

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. You can also enable / disable these columns globally under the Advanced > Social Settings 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.

Caching Plugins and Services

NGFB allows you to customize a few 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/
Pinterest/
Twitterbot/
W3C_Validator/

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

Developers and 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 can 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 "Social Img" and "Social Desc" columns using the Screen Options drop-down tab, but you can also enable / disable these columns globally under the Advanced settings > Social Settings 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 Advanced settings > 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. By default, NGFB modifies the <head> element attributes to add a Schema item type for the <head> section only. To have NGFB add 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.

3 thoughts on “A Setup Guide for NGFB

Leave a Reply

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