Where do I start?

Have a look at the selection of videos available on Surnia Ulula’s Youtube Channel. Familiarize yourself with the difference between meta tags and social buttons — the first provides information about the webpage to social websites, the other just shares the URL of the current webpage. ;-)

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 reading some of the most common questions to get an idea of what it can do. Some of the most relevant / popular ones might be:

Have your authors enter their Facebook, Google+, and Twitter contact information on their WordPress user profile page. The NGFB General settings allow you to enter contact information for the website (Facebook Page, website 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. Additional WordPress profile contact fields can be enabled from the NGFB Advanced settings page, but NGFB currently only uses the Facebook, Google+, and Twitter contact fields in the meta tags.

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 1200×1200 cropped or larger (see the help popup for more information). 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 all your original / full-size featured images are at least 1200px in width and height, along with setting an Open Graph Image Dimension of 1200×1200 cropped.

Make sure Twitter Cards are enabled and review their associated Image Dimension options. The default Image Dimensions should be fine — you may want to adjust them to match other custom image sizes you may have (to cut down on the number of resized images created on disk).

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 Custom Settings metabox on Post / Page admin editing pages. Submitting a URL to the Facebook Debugger also clears the Facebook cache, so the link under the Validation Tools tab can be a useful resource.

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.

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 or Page NGFB Custom Settings, a Featured, Attached, or NextGEN Gallery singlepic shortcode image.
  • Summary : All other webpages.

Links to additional validation tools and services are available in the Custom Settings box on any Post / Page editing page. Facebook caches information about a URL once, 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).

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>