A Setup Guide for NGFB

The following is a collection of hints and suggestions to get the maximum out of the NGFB plugin. NGFB works great right-out-of-the-box, and you may decide to keep the default settings as-is, but modifying just a few options for your website will really help your click-through rate.

  1. Create a Facebook Page, Twitter account, and Google+ account (or page) for your website if you haven't done so already. You can enter your website's social information on the NGFB General settings page:

    • Enter your Facebook Page URL on the Authorship tab, in the Open Graph Settings.
    • Enter your website's Twitter username on the Twitter tab, in the Publisher Settings.
    • Enter the URL to your website's Google+ account (or page) on the Google / SEO tab, in the Publisher Settings.
  2. Ask your authors to enter their Facebook, Google+, and Twitter contact information on their WordPress user profile page. As mentioned above, the NGFB settings allow you to enter contact information for this website (Facebook Page, website's Twitter account, etc.), but each author's contact information can also appear in the meta tags -- if they complete their user profile. Authors should also update their Facebook Follower Settings to enable the Facebook Follow button on their shared content. If the 'Plugin Settings to Display' option is set to 'All Plugin Options', additional WordPress profile contact fields may be enabled from the NGFB Advanced settings page, but NGFB currently uses only the Facebook, Google+, and Twitter contact values in the meta tags.

  3. Review the Image Dimensions option on the NGFB General settings page.

    If your original images are large enough, you should set the Open Graph Image Dimensions to 1200x1200px cropped or larger (see the option's help popup for more information on Image Dimensions). Images that are at least 1200px wide will be displayed more prominently by Facebook (which uses the image provided by the Open Graph meta tags), so it's worth taking the time to make sure that all your original / full-size featured images are at least 1200px in width and height, along with setting an Open Graph Image Dimension of 1200x1200px cropped.

    The default Open Graph Image Dimensions settings are 800x800px cropped. You can reduce these values down to 200x200px, but Facebook will display these images as thumbnails on user timelines. The minimum recommended Image Dimensions value is 600x600px cropped.

  4. Review all highlighted options.

    The plugin will use information from the first post on index / archive and search webpages. If you define a Default Image ID (or URL), the plugin can use this image as a fallback in case a Post / Page does not contain a suitable image, or force the default image on index / archive and/or search webpages. See the General -> Images settings tab for these options and others.

    Other highlighted options include the Default Article Topic, Site Description, Article Publisher Page URL, Facebook Admin(s), etc.

  5. Make sure Twitter Cards are enabled and, if the 'Plugin Settings to Display' option is set to 'All Plugin Options', review the Twitter Cards Image Dimensions options. The default Image Dimensions for Twitter Cards should be fine, but you may want to adjust them to match other custom image sizes you might have (to cut down on the number of resized images created on disk).

  6. Submit a few sample Posts and Pages to the Facebook Debugger to verify the accuracy of your Open Graph meta tags. A link to the Facebook Debugger also available under the Validation Tools tab, in the Social Settings metabox on Post / Page admin editing pages. Submitting a URL to the Facebook Debugger also clears Facebook's cache (after clicking the "debug" button a few times), so the link under the Validation Tools tab can be a useful resource.

  7. 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 the Rich Pin information.

  8. Submit a few different Post Types and Pages to the Twitter Card Validator -- each card type must be approved individually, so choose Posts and Pages with featured images, galleries, products, etc. and submit an example of each. Here's a list of supported Twitter Cards, and how NGFB selects a Twitter Card based on the content.

    • Product : Product information from a supported e-commerce plugin.
    • Player : An embedded video in the content from YouTube, Vimeo, or Wistia.
    • Gallery Card : A WordPress Media Library gallery or NextGEN Gallery nggalbum, nggallery, nggtags shortcodes.
    • Photo Card : A WordPress Attachment Page or NextGEN Gallery ImageBrowser webpage.
    • Large Image Summary Card : An image defined in the Post / Page Social Settings metabox, a Featured, Attached, or NextGEN Gallery singlepic shortcode image.
    • Summary : All other webpages.

    Links to additional validation tools and services are available in the Social Settings metabox on any Post / Page editing page. Facebook caches information once from any given URL, so the Facebook Debugger can be a useful tool to refresh its cache (unless the URL has already been shared, in which case the Facebook cache cannot be refreshed).

  9. Review the plugin codex on the support website. NGFB is a powerful tool, that can detect images and videos from a variety of sources (attached, featured, content, etc.), along with e-commerce product information. It's worth noting some of the most common questions, to get an idea of what it can do, and some of the issues that may come up. Some of the most relevant / popular ones might be:



3 thoughts on “A Setup Guide for NGFB

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>