The NextGEN Facebook OG plugin adds Open Graph meta tags to all webpage headers, including the "artical" object type for posts and pages. The featured image thumbnails, from a NextGEN Gallery or Media Library, are also correctly listed in the "image" meta tag. This plugin goes well beyond any other plugins I know in handling various archive-type webpages. It will create appropriate title and description meta tags for category, tag, date based archive (day, month, or year), author webpages and search results. You can also, optionally, add Facebook, Google+, Twitter and LinkedIn sharing buttons to post and page content.

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. The Open Graph meta tags are read by almost all social websites, including Facebook, Google (Search and Google+), and LinkedIn.

NextGEN Facebook OG was specifically written to support featured images located in a NextGEN Gallery, but also works just as well with the WordPress Media Library. The NextGEN Gallery plugin is not required to use this plugin - all features work just as well without it. The image used in the Open Graph meta tag is chosen in this sequence; a featured image from a NextGEN Gallery or WordPress Media Library, the first NextGEN [singlepic] or IMG HTML tag in the content, a default image defined in the plugin settings. If none of these conditions can be satisfied, then the Open Graph image tag will be left empty.

Here's an example of Open Graph meta tags for a post on my website titled "Wordpress Caching and Plugins for Performance":

<!-- NextGEN Facebook OG Meta Tags BEGIN -->
<meta property="article:author" content="http://surniaulula.com/author/jsmoriss/" />
<meta property="article:modified_time" content="2012-12-03T12:33:18+00:00" />
<meta property="article:published_time" content="2012-12-01T15:34:56+00:00" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="apache" />
<meta property="article:tag" content="apc" />
<meta property="article:tag" content="bandwidth" />
<meta property="article:tag" content="cache" />
<meta property="article:tag" content="caching" />
<meta property="article:tag" content="cdn" />
<meta property="article:tag" content="content delivery network" />
<meta property="article:tag" content="httpd" />
<meta property="article:tag" content="linux" />
<meta property="article:tag" content="memcached" />
<meta property="article:tag" content="opcode" />
<meta property="article:tag" content="performance" />
<meta property="article:tag" content="php" />
<meta property="article:tag" content="plugins" />
<meta property="article:tag" content="rewrite" />
<meta property="article:tag" content="static content" />
<meta property="article:tag" content="wordpress" />
<meta property="fb:app_id" content="525239184171769" />
<meta property="og:description" content="Over the past few weeks I've been looking at different solutions to improve the speed of my Wordpress websites. The first step was to mirror and redirect the static content to another server (aka Content Delivery Network or CDN). In the case of PHP and Wordpress, there are several additional" />
<meta property="og:image" content="http://cdn1.static.surniaulula.com/wp-content/gallery/cache/5_crop_200x200_20120814-114043-sbellive-0078.jpg" />
<meta property="og:site_name" content="Surnia Ulula" />
<meta property="og:title" content="Wordpress Caching and Plugins for Performance" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://surniaulula.com/2012/12/01/wordpress-caching-and-plugins-for-performance/" />
<!-- NextGEN Facebook OG Meta Tags END -->

NextGEN Facebook OG is being actively developed and supported. You can review the FAQ Page for additional setup notes, and if you have questions or suggestions, post them on the NEXTGEN Facebook OG Support Page.

Using the WordPress Dashboard

1. Login to your weblog
2. Go to Plugins
3. Select Add New
4. Search for NextGEN Facebook OG
5. Select Install
6. Select Install Now
7. Select Activate Plugin

Manual

1. Download and unzip the plugin
2. Upload the entire nextgen-facebook/ folder to the /wp-content/plugins/ directory
3. Activate the plugin through the Plugins menu in WordPress

Once activated, you don't have to configure any settings for NextGEN Facebook OG to automatically start adding the Open Graph meta tags to your pages.

Some plugin options are available under Settings -> NextGEN Facebook OG to select a default image, include Facebook buttons at the end of Posts and Pages, change the default thumbnail image sizes, etc.

Q. How can I control the social button layout?

A. NextGEN Facebook OG uses the "ngfb-buttons" CSS class name to wrap all social buttons, and each button has it's own individual class name as well. Here's an example of the CSS I use on Surnia Ulula:

.ngfb-buttons { 
    text-align:center; 
    margin:30px 0 20px 0;
}
.facebook-button,
.g-plusone-button,
.twitter-share-button, 
.linkedin-button {
    display:inline-block;
    vertical-align:bottom;
    height:20px;
    padding:0;
    margin:0;
}
.facebook-button { margin-right:22px; }
.g-plusone-button { margin-right:-10px; }
.twitter-share-button { margin-right:-10px; }
.linkedin-button { margin-right:22px; }

Q. How can I exclude social buttons from a post or page?

A. You can exclude the social buttons, or pretty much any object, from a page or post by using "display:none" in your CSS stylesheet. For example, if you use the "Inspect Element" feature of Firefox (right-click on the object to inspect), or use "View Source" to see the page's HTML, your content text should be wrapped in a <div> HTML tag similar to this one:

<div class="post-123 post type-post status-publish format-standard hentry category-test category-wordpress tag-css tag-html" id="post-123">
    Content Text
</div>

You could use any of these class names to hide one or more NextGEN Facebook OG social buttons. For example, the following CSS hides the social buttons for post #123, any page with in category "test", and posts using the Aside and Status formats:

.post-123 .ngfb-buttons,
.category-test .ngfb-buttons,
.format-aside .ngfb-buttons,
.format-status .ngfb-buttons { display:none; }

Q. Does NextGEN Facebook OG use functions from other plugins?

A. Yes, NextGEN Facebook OG can detect and use the following plugins:

• WP-WikiBox : If the WP-WikiBox plugin is active, an option will be added to the settings page to use WP-WikiBox for the Open Graph description field (for pages, not posts).
• Exclude Pages : If the Exclude Pages plugin is active, social buttons will not be added to excluded pages. An additional option will be available on the settings page to toggle this default behavior on/off.

Q. Why doesn't Facebook show my featured image?

A. The first time Facebook accesses your webpage, it will cache the image and text it finds. Facebook then prefers to use that cached information until it has expired. So, before you hit the send / share button for the first time, make sure you've chosen your featured image and (optionally) entered an excerpt text. If you change your mind, and your webpage has not been liked or shared yet, then try using Facebook's Open Graph debugging tool. If your webpage has already been liked or shared on Facebook, then there's nothing you can do to change the image, text, or title that was used.

Q. How can I see what Facebook sees?

A. Facebook has an Open Graph debugging tool where you can enter a URL and view a report of it's findings. Try it with your posts, pages, archive pages, author pages, search results, etc. to see how NextGEN Facebook OG presents your content.

If there are Open Graph Warnings, read them carefully -- usually they explain that the information they already have for this webpage is in conflict with the Open Graph information now being presented. This might be just the published and modified times, or (if the webpage has already been liked or shared) the title and image Facebook has saved previously.

Q. What about Google Search and Google Plus?

A. Google reads the Open Graph meta tags, along with other "structured data markup" on your webpage. You can see what Google picks up from your webpages by using it's Rich Snippets Testing Tool. You may also want to link your WordPress authors with their Google+ profiles by using one of the available plugins, like Google Plus Author Information in Search Result (GPAISR) or others like it.

Q. Does LinkedIn read the Open Graph tags?

A. According to LinkedIn's Setting Display Tags for Shares information page, they use three of the Open Graph tags (title, description, and url).

Q. The W3C Markup Validation Service complains that 'there is no attribute "property"'.

A. The Facebook / Open Graph <meta property="" /> attribute is not part of the HTML5 standard, so the W3C validator is correct in throwing up an error. In practice though, this incorrect attribute is completely harmless -- social sites (Facebook, Google+, etc.) look for it and don't care if it's part of the standard or not.

If you want to address the W3C validator error, you'll have to change the DOCTYPE of your website to XHTML+RDFa (an example follows). The DOCTYPE definition is usually located in the header.php file of your theme.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

1. 

   NextGEN Facebook OG v1.7.1 - The Settings Page

v.1.7.2

• Fixed: Added the missing "data-annotation" field to the Google+ social button.
• Fixed: Changed "</p>" to a space before stripping out all html tags from og:description.

v.1.7.1

• Changed the plugin name from "NextGEN Facebook" to "NextGEN Facebook OG" to better describe it's function (adding Open Graph meta tags).

v.1.7

• Added LinkedIn social button options.
• Added a setting to include hidden debug info above the Open Graph tags.
• If the Exclude Pages plugin is installed, a new option will be available on the settings page to turn on/off social buttons on excluded pages (by default, social buttons are not added to excluded pages).
• Added the og:video meta tags (including width, height, type, etc.) for youtube iframe embeded videos.
• Cleaned-up some PHP code to consolidate the OG variables within a single array.

v.1.6.1

• Fixed a bug where some checked options -- those that should be ON by default -- would always stay checked. Thanks to chrisjborg for reporting this one.
• Stripped javascript from the_content text so it doesn't make it to the og:description meta tag.

v.1.6

• Added the Google+ and Twitter button options.
• Added the "Open Graph HTML Meta Tags" options to exclude one or more Facebook and Open Graph HTML meta tags from the webpage headers.

v.1.5.1

• Added the "Default Image on Search Page" option.
• Added the "WP-WikiBox Tag Prefix" option to identify the WordPress tag names used to retrieve Wikipedia content.
• The two WP-WikiBox options ("Use WP-WikiBox for Pages" and "WP-WikiBox Tag Prefix") will not appear on the settings page unless the WP-WikiBox plugin is installed and activated.
• Updated the readme's Description and FAQ sections with more information on Open Graph and it's use by Google and LinkedIn.

v.1.5

• Added the "Add NextGEN Gallery Tags" option to include the featured (or default) image tags from the NextGEN Gallery.
• Added the "Content Begins at a Paragraph" option to ignore all text before the first <p> paragraph in the content (not the excerpt). This might be useful for photography oriented websites that have thumbnails, captions, etc. preceeding their content.
• Added the "Use WP-WikiBox for Pages" option. This is an option very few, if any, besides myself will find useful. If you use the WP-WikiBox plugin's function in your theme's templates (and not the shortcode), then you can use the page's tags or title to retrieve content from Wikipedia. This only aplies to pages, not posts. Here's how it works; the plugin will check for the page's tags, and use their names to retrieve content from Wikipedia. If no tags are defined, then the page title will be used. If Wikipedia does not return a summary for your tags or title, then the content of your page will be used.

v1.4.1

• Small fixes to the article:tag and article:author after finding additional information on these meta tags.
• Changed article:tag by including it once for every WordPress tag, instead only once with an array of values.
• Changed article:author to a URL instead of the author's name.

v1.4

• Added a website topic setting to choose a value for the article:section meta tag. If defined, the article:section meta tag will be added to all posts and pages. You can leave it blank, if for example, your website covers a wide variety of subjects.
• When viewing a tag webpage, added the tag description (if there is one) to the Open Graph description meta tag.
• When viewing a author webpage, added the author biographical info (if there is one) to the Open Graph description meta tag.

v1.3

• Moved some code out of the meta HTML section to make it cleaner. There's no functional difference, it just looks nicer. ;-)
• When viewing a category webpage, added the category description (if there is one) to the Open Graph description meta tag.
• When viewing a category webpage, added the category parents (if any) to the Open Graph title meta tag.
• Added the following meta tags: article:published_time, article:modified_time, article:author, article:tag.

v1.2

• Added the Default Image ID option, in addition to the existing Default Image URL option. Since the plugin can find images by ID number, might as well use it for the default image as well. :)

v1.1

• Improved the description and installation texts.
• Used a single screenshot image of the settings page, instead of two.
• Removed the "NextGEN Gallery Image Size" setting - it was a bit redundant. Instead, I've suggested using an existing Size Name from the Media Library, and if necessary, to create an additional Size Name specifically for NextGEN Facebook. Since NextGEN Gallery doesn't understand these Size Names, I've added some code to get the width, height, and crop from the Size Name, before calling the necessary NextGEN Gallery functions.
• Added a "Use Default on Multi-Entry Pages" checkbox to force the default image to be used on the homepage, category page, author page, etc. (instead of the featured image from the first post, for example).
• Added extra parsing for author pages, tag pages, category pages, etc., to refine the og:description text.
• Also improved the og:title text for archive pages, category pages, etc.
• No bugs were reported or fixed from the previous version, which is good news I guess. ;-)

v1.0

• Initial release.

The NextGEN Facebook OG plugin adds Open Graph meta tags to all webpage headers, including the "artical" object type for posts and pages. The featured image thumbnails, from a NextGEN Gallery or Media Library, are also correctly listed in the "image" meta tag. This plugin goes well beyond any other plugins I know in handling various archive-type webpages. It will create appropriate title and description meta tags for category, tag, date based archive (day, month, or year), author webpages and search results. You can also, optionally, add Facebook, Google+, Twitter and LinkedIn sharing buttons to post and page content.

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. The Open Graph meta tags are read by almost all social websites, including Facebook, Google (Search and Google+), and LinkedIn.

NextGEN Facebook OG was specifically written to support featured images located in a NextGEN Gallery, but also works just as well with the WordPress Media Library. The NextGEN Gallery plugin is not required to use this plugin - all features work just as well without it. The image used in the Open Graph meta tag is chosen in this sequence; a featured image from a NextGEN Gallery or WordPress Media Library, the first NextGEN [singlepic] or IMG HTML tag in the content, a default image defined in the plugin settings. If none of these conditions can be satisfied, then the Open Graph image tag will be left empty.

Here's an example of Open Graph meta tags for a post on my website titled "Wordpress Caching and Plugins for Performance":

<!-- NextGEN Facebook OG Meta Tags BEGIN -->
<meta property="article:author" content="http://surniaulula.com/author/jsmoriss/" />
<meta property="article:modified_time" content="2012-12-03T12:33:18+00:00" />
<meta property="article:published_time" content="2012-12-01T15:34:56+00:00" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="apache" />
<meta property="article:tag" content="apc" />
<meta property="article:tag" content="bandwidth" />
<meta property="article:tag" content="cache" />
<meta property="article:tag" content="caching" />
<meta property="article:tag" content="cdn" />
<meta property="article:tag" content="content delivery network" />
<meta property="article:tag" content="httpd" />
<meta property="article:tag" content="linux" />
<meta property="article:tag" content="memcached" />
<meta property="article:tag" content="opcode" />
<meta property="article:tag" content="performance" />
<meta property="article:tag" content="php" />
<meta property="article:tag" content="plugins" />
<meta property="article:tag" content="rewrite" />
<meta property="article:tag" content="static content" />
<meta property="article:tag" content="wordpress" />
<meta property="fb:app_id" content="525239184171769" />
<meta property="og:description" content="Over the past few weeks I've been looking at different solutions to improve the speed of my Wordpress websites. The first step was to mirror and redirect the static content to another server (aka Content Delivery Network or CDN). In the case of PHP and Wordpress, there are several additional" />
<meta property="og:image" content="http://cdn1.static.surniaulula.com/wp-content/gallery/cache/5_crop_200x200_20120814-114043-sbellive-0078.jpg" />
<meta property="og:site_name" content="Surnia Ulula" />
<meta property="og:title" content="Wordpress Caching and Plugins for Performance" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://surniaulula.com/2012/12/01/wordpress-caching-and-plugins-for-performance/" />
<!-- NextGEN Facebook OG Meta Tags END -->

NextGEN Facebook OG is being actively developed and supported. You can review the FAQ Page for additional setup notes, and if you have questions or suggestions, post them on the NEXTGEN Facebook OG Support Page.

Using the WordPress Dashboard

1. Login to your weblog
2. Go to Plugins
3. Select Add New
4. Search for NextGEN Facebook OG
5. Select Install
6. Select Install Now
7. Select Activate Plugin

Manual

1. Download and unzip the plugin
2. Upload the entire nextgen-facebook/ folder to the /wp-content/plugins/ directory
3. Activate the plugin through the Plugins menu in WordPress

Once activated, you don't have to configure any settings for NextGEN Facebook OG to automatically start adding the Open Graph meta tags to your pages.

Some plugin options are available under Settings -> NextGEN Facebook OG to select a default image, include Facebook buttons at the end of Posts and Pages, change the default thumbnail image sizes, etc.

Q. Why doesn't Facebook show my featured image?

A. The first time Facebook accesses your webpage, it will cache the image and text it finds. Facebook then prefers to use that cached information until it has expired. So, before you hit the send / share button for the first time, make sure you've chosen your featured image and (optionally) entered an excerpt text. If you change your mind, and your webpage has not been liked or shared yet, then try using Facebook's Open Graph debugging tool. If your webpage has already been liked or shared on Facebook, then there's nothing you can do to change the image, text, or title that was used.

Q. How can I see what Facebook sees?

A. Facebook has an Open Graph debugging tool where you can enter a URL and view a report of it's findings. Try it with your posts, pages, archive pages, author pages, search results, etc. to see how NextGEN Facebook OG presents your content.

If there are Open Graph Warnings, read them carefully -- usually they explain that the information they already have for this webpage is in conflict with the Open Graph information now being presented. This might be just the published and modified times, or (if the webpage has already been liked or shared) the title and image Facebook has saved previously.

Q. What about Google Search and Google Plus?

A. Google reads the Open Graph meta tags, along with other "structured data markup" on your webpage. You can see what Google picks up from your webpages by using it's Rich Snippets Testing Tool. You may also want to link your WordPress authors with their Google+ profiles by using one of the available plugins, like Google Plus Author Information in Search Result (GPAISR) or others like it.

Q. Does LinkedIn read the Open Graph tags?

A. According to LinkedIn's Setting Display Tags for Shares information page, they use three of the Open Graph tags (title, description, and url).

Q. How can I control the social button layouts?

A. NextGEN Facebook OG uses the 'ngfb-buttons' class name to wrap all buttons, and each social button has it's own individual class name as well. Here's an example of the CSS I use for trtms.com:

.ngfb-buttons { text-align:center; }
.facebook-button,
.g-plusone-button,
.twitter-share-button, 
.linkedin-button {
    display:inline-block;
    vertical-align:bottom;
    height:20px;
    padding:0;
    margin:0;
}
.facebook-button { margin-right:22px; }
.g-plusone-button { margin-right:-10px; }
.twitter-share-button { margin-right:-10px; }
.linkedin-button { margin-right:22px; }

Q. The W3C Markup Validation Service complains that 'there is no attribute "property"'.

A. The Facebook / Open Graph <meta property="" /> attribute is not part of the HTML5 standard, so the W3C validator is correct in throwing up an error. In practice though, this incorrect attribute is completely harmless -- social sites (Facebook, Google+, etc.) look for it and don't care if it's part of the standard or not.

If you want to address the W3C validator error, you'll have to change the DOCTYPE of your website to XHTML+RDFa (an example follows). The DOCTYPE definition is usually located in the header.php file of your theme.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

1. 

   NextGEN Facebook OG v1.7.1 - The Settings Page

v.1.7.2

• Fixed: Added the missing "data-annotation" field to the Google+ social button.
• Fixed: Changed "</p>" to a space before stripping out all html tags from og:description.

v.1.7.1

• Changed the plugin name from "NextGEN Facebook" to "NextGEN Facebook OG" to better describe it's function (adding Open Graph meta tags).

v.1.7

• Added LinkedIn social button options.
• Added a setting to include hidden debug info above the Open Graph tags.
• If the Exclude Pages plugin is installed, a new option will be available on the settings page to turn on/off social buttons on excluded pages (by default, social buttons are not added to excluded pages).
• Added the og:video meta tags (including width, height, type, etc.) for youtube iframe embeded videos.
• Cleaned-up some PHP code to consolidate the OG variables within a single array.

v.1.6.1

• Fixed a bug where some checked options -- those that should be ON by default -- would always stay checked. Thanks to chrisjborg for reporting this one.
• Stripped javascript from the_content text so it doesn't make it to the og:description meta tag.

v.1.6

• Added the Google+ and Twitter button options.
• Added the "Open Graph HTML Meta Tags" options to exclude one or more Facebook and Open Graph HTML meta tags from the webpage headers.

v.1.5.1

• Added the "Default Image on Search Page" option.
• Added the "WP-WikiBox Tag Prefix" option to identify the WordPress tag names used to retrieve Wikipedia content.
• The two WP-WikiBox options ("Use WP-WikiBox for Pages" and "WP-WikiBox Tag Prefix") will not appear on the settings page unless the WP-WikiBox plugin is installed and activated.
• Updated the readme's Description and FAQ sections with more information on Open Graph and it's use by Google and LinkedIn.

v.1.5

• Added the "Add NextGEN Gallery Tags" option to include the featured (or default) image tags from the NextGEN Gallery.
• Added the "Content Begins at a Paragraph" option to ignore all text before the first <p> paragraph in the content (not the excerpt). This might be useful for photography oriented websites that have thumbnails, captions, etc. preceeding their content.
• Added the "Use WP-WikiBox for Pages" option. This is an option very few, if any, besides myself will find useful. If you use the WP-WikiBox plugin's function in your theme's templates (and not the shortcode), then you can use the page's tags or title to retrieve content from Wikipedia. This only aplies to pages, not posts. Here's how it works; the plugin will check for the page's tags, and use their names to retrieve content from Wikipedia. If no tags are defined, then the page title will be used. If Wikipedia does not return a summary for your tags or title, then the content of your page will be used.

v1.4.1

• Small fixes to the article:tag and article:author after finding additional information on these meta tags.
• Changed article:tag by including it once for every WordPress tag, instead only once with an array of values.
• Changed article:author to a URL instead of the author's name.

v1.4

• Added a website topic setting to choose a value for the article:section meta tag. If defined, the article:section meta tag will be added to all posts and pages. You can leave it blank, if for example, your website covers a wide variety of subjects.
• When viewing a tag webpage, added the tag description (if there is one) to the Open Graph description meta tag.
• When viewing a author webpage, added the author biographical info (if there is one) to the Open Graph description meta tag.

v1.3

• Moved some code out of the meta HTML section to make it cleaner. There's no functional difference, it just looks nicer. ;-)
• When viewing a category webpage, added the category description (if there is one) to the Open Graph description meta tag.
• When viewing a category webpage, added the category parents (if any) to the Open Graph title meta tag.
• Added the following meta tags: article:published_time, article:modified_time, article:author, article:tag.

v1.2

• Added the Default Image ID option, in addition to the existing Default Image URL option. Since the plugin can find images by ID number, might as well use it for the default image as well. :)

v1.1

• Improved the description and installation texts.
• Used a single screenshot image of the settings page, instead of two.
• Removed the "NextGEN Gallery Image Size" setting - it was a bit redundant. Instead, I've suggested using an existing Size Name from the Media Library, and if necessary, to create an additional Size Name specifically for NextGEN Facebook. Since NextGEN Gallery doesn't understand these Size Names, I've added some code to get the width, height, and crop from the Size Name, before calling the necessary NextGEN Gallery functions.
• Added a "Use Default on Multi-Entry Pages" checkbox to force the default image to be used on the homepage, category page, author page, etc. (instead of the featured image from the first post, for example).
• Added extra parsing for author pages, tag pages, category pages, etc., to refine the og:description text.
• Also improved the og:title text for archive pages, category pages, etc.
• No bugs were reported or fixed from the previous version, which is good news I guess. ;-)

v1.0

• Initial release.

Could you send a link so the plugin can be downloaded please. Alternately you can reply to this and send a .zip or .rar file.

Please reply with 7 days. If a reply is not received the submission will be rejected and you will have to submit the plugin again, with code, should you want your plugin hosted.

Thanks.