chuckreynolds / wpfbogp Goto Github PK
View Code? Open in Web Editor NEWWordPress Open Graph plugin development
Home Page: wordpress.org/plugins/wp-facebook-open-graph-protocol/
WordPress Open Graph plugin development
Home Page: wordpress.org/plugins/wp-facebook-open-graph-protocol/
=== WP Facebook Open Graph protocol === Contributors: ryno267, andrewryno Donate link: http://goo.gl/8lGv3 Tags: open graph, ogp, facebook open graph, google +1, +1, google plus one, plus one, linkedin share, facebook meta, open graph meta, facebook share, facebook like, linkedin Requires at least: 3.0 Tested up to: 4.6.1 Stable tag: 2.0.13 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Adds proper Facebook Open Graph Meta tags and values to your site so when links are shared it looks awesome! == Description == This plugin adds well executed and accurate Facebook Open Graph Meta tag information to your site. The idea is to keep minimal settings and options as to remain out of your way and in the background while still proving a powerful Open Graph plugin for your WordPress site. This plugin works on Facebook, Google Plus, and Linkedin. Shortname: WPFBOGP = Image Handling = By popular demand we've added a setting so the Fallback image in settings can be the default sitewide. If you don't check that box, here's now she works. The plugin will first look for a featured image. If there isn't one or your theme doesn't have those available, then it will pull the image(s) in the post/page content. If that isn't there either, then it will default to using the image you put into the plugin settings in the admin panel. If THAT isn't there then... well you fail and you won't have an image and we'll put a comment in your source to remind you to add one as Facebook requires one. New in 2.0 - We'll pull ALL those images and feed them to Facebook and Google + so you can hit the arrows to select which one you want. It will use the fallback image first IF it's selected as default, then will do featured image next and then any content images. Test with the <a href="http://developers.facebook.com/tools/debug">Facebook Debugger</a>. = Title and Description = New in 2.0+, the plugin will use the title and meta description from ANY SEO plugin or theme, including Genesis and Thesis. Worst case it'll fall back to pulling some of your content as a last-ditch backup. But if you're concerned with what your Open Graph tags look like, then you should probably be running some kind of SEO plugin anyways. AMIRITE? = Testing Your Site = Once you've enabled the plugin head over to Facebook's testing tool and paste in one of your post/page url's or your home page to see what info Facebook is pulling in. This tool is located here: <a href="http://developers.facebook.com/tools/debug">http://developers.facebook.com/tools/debug</a> = Plugin Roadmap = If you have feature requests or bugs? Use the support links on <a href="http://rynoweb.com/wordpress-plugins/?utm_source=wpfbogp_readme" title="rynoweb wordpress plugins">rYnoweb.com/WordPress-Plugins</a> and get in touch. == Installation == 1. Upload the `wp-facebook-ogp` folder to the `/wp-content/plugins/` directory 1. Activate the WP Facebook OGP plugin through the 'Plugins' menu in WordPress 1. You MUST add your Facebook ID OR an App ID to the Plugin Settings page for the plugin to produce OGP meta data. This is required by Facebook. == Frequently Asked Questions == = Do I need to create a Facebook Application to use this plugin? = No. Either your Facebook User ID or or an Application ID is a requirement. You're not required to register an app, instead just use your User ID (plugin admin settings page helps you find that). You can use both an App ID and User ID if you'd like. More details on how Facebook verifies admins is located here: https://developers.facebook.com/docs/insights/ = Why doesn't this plugin have a Like/Send button? = Honestly it's not hard to add one once you have the proper meta content in the header. Look at <a href="https://developers.facebook.com/docs/reference/plugins/like/">how to add a Like button</a> using fb:like. There are a lot of 'like' button plugins but this one focuses on solid and accurate Open Graph meta data. == Screenshots == 1. The Open Graph admin options panel has all options laid out in one easy place. The rest is all behind the scenes. == Upgrade Notice == = 2.0.13 = Small patch for sites use .html in their url permalink structure = 2.0.12 = Quick Patch - Changes how trailing slashes are handled. Big update coming soon too! = 2.0.11 = Fixes an issue some had with thumbnail image paths & fixes php notice some were getting. Cheers. = 2.0.9 = uses large size thumbnail instead of medium. bigger is better! = 2.0.8 = fixes feed problems some people are having. this is an interm upgrade before the massive rewrite coming soon = 2.0.7 = fixes bug with certain plugins not showing description tags properly = 2.0.6 = preg_replace causing LOTs of issues. rolled back to fix admin issues. more planning needed. big update coming. = 2.0.5 = Fixes issues with dollar signs and special characters in titles and descriptions = 2.0.3 = This update should fix the "Parser Mismatched Metadata" warnings Facebook started throwing. = 2.0.2 = Fixes bug that caused a PHP warning to display and also fixes bugs with plugins not functioning properly when using content filters. = 2.0.1 = Bug fixes for HTTPS/SSL pages, SEO plugins, force fallback images and more. = 2.0 = BIG Update - now works with ALL SEO plugins for titles and descriptions, adds multiple images and other fixes! = 1.6.1 = Bug fix with 1.6 initial release. Titles broke for some running 'naked sites' w/ no seo plugins. It worked on all testing sites but obviously I need to test a little more. Standby = 1.6 = Because we're getting more accurate titles you may see a change in how they're pulled. If you're using an SEO plugin it should now pull that title == Changelog == = 2.0.13 = Release Date - 2015-07-06 * Fixed trailing slash issue for sites that use .html in their article url permalink structure. Should play nice now. = 2.0.12 = Release Date - 2015-06-19 * Changed how og:url is called and handle trailing slashes better all around * Fixed issue when using the blog as a page had root url = 2.0.11 = Release Date - 2014-07-31 * Check for relative URLs in post thumbnails images - props -> github.com/jjeaton * fixes problem w/ strings in image array * flip image array. this will move your default image (if you have one) to the top of the array but Facebook pulls it the way they want anyways. = 2.0.10 = * Remove deprecated argument from `get_the_excerpt`. Fixes PHP Notice. props -> github.com/jjeaton = 2.0.9 = * bump og:image size to large like beta/dev version. bigger is better. but size doesn't matter? well it's large now * tested to WP3.9 = 2.0.8 = * update html namespace to prefix (ogp.me) from xmlns (facebook) * dont run buffer if in a feed * fixed media uploader link = 2.0.7 = * fixes bug with certain plugins not showing description tags properly * added back self-close on meta tags to preserve xhtml compatability, html5 is forgiving. core does this. = 2.0.6 = * The changes we made to fix the dollar sign in title problem caused big problems in wp admin. rolling back for now while we plan and recode a lot of the plugin w/ norcross for a bigger update. Just don't use dollar signs for now in titles. sorry. standby. = 2.0.5 = * Short: Dollar signs in titles were screwing things up. Long Story: Fixed a bug where preg_replace() would think a dollar sign in the argument is a backreference, instead of just a dollar sign. Now using preg_quote() to escape all regex variables/symbols in a string. Makes things mo betta! = 2.0.4 = * Image size for OpenGraph now defaults to medium for thumbnail image * updated screenshot. it was from v1 so was about time * fixed grammar error - props Jeff K. = 2.0.3 = * Should fix the "Parser Mismatched Metadata" warnings Facebook started throwing. Made locale all lowercase. = 2.0.2 = * Fixes bug that would display a PHP warning with debug mode turned on. * Removed code that would filter the_content() which caused problems with plugins that also used that same filter. = 2.0.1 = * Fixed bug where og:url was returning a https URL instead of http, causing Facebook Linter to fail. Now using the WordPress function is_ssl() instead of the $_SERVER global variable. * Fixed bug with some SEO plugins where the page title and meta description were not being pulled correctly. * Changed front pages to have the og:type 'website', not 'article'. * Fixed bug where the 'force fallback' checkbox will check itself after initial installation. = 2.0 = * Now works with ALL SEO plugins AND Frameworks like Genesis and Thesis. It now grabs the actual outputted <title> tag and <meta> description after all SEO plugins/themes/etc have done their job. * New Open Graph feature allow multiple images therefore we now add all those properly for selection (in Facebook, Google +, and even now Linkedin) if there are more than one in the post/page in addition to any featured image and the fallback image in settings (only if force fallback isn't selected). * Removed og:page_id - Facebook depreciated that 1 April 2012. * Adds filters to all outputted values. * Images in Galleries work too now as we apply filters to the_content() before pulling images. * Some house cleaning: old functions removed, code cleaned up, and better follows WordPress coding standards. * Modified plugin settings help links - facebook keeps changing things :/ * Last but certainly not least... Improves performance == WIN = 1.6.1 = * Bug fix with 1.6 initial release. Titles broke for some running 'naked sites' w/ no seo plugins. It worked on all testing sites but obviously I need to test a little more. Standby = 1.6 = * update help info and links as Facebook has changed a lot about their docs including image should be 200px square now * use wp_title() to get the title of the current page. SEO plugins filter wp_title so we will get the best title available. This is a baby step towards bigger and better things :) * fix bug in scraping content images * add settings option to allow fallback image to become site-wide default = 1.5.2 = * bug fix in urlpath again & check for https. Props goes to Seb Francis at burnit.co.uk for better fix. = 1.5.1 = * bug fix in image basepath thing I fixed in 1.5... false checking. make sure to update this or your images could not display on facebook = 1.5 = * simple cleanup and couple bug fixes * fix image path auto pulled from content if there wasn't a basepath * fix for custom post type og:description. (props Leia Scofield) did same for og:type * remove hidden code for old contextual menus that never happened = 1.4 = * added og:locale as facebook has started requiring that for valid ogp = 1.3.5 = * fixed bug with line returns if they were in auto desc * added strip_shortcodes on autogen desc * updated image handling post id issue and changed medium size image to thumbnail for optimization and speed * fixed og:url to work with every page type and archive type * x.5 update because needed to push some of these bugs out but too busy to fix others. more updates coming soon. = 1.3 = * Added much requested auto-description generation from content. So now on single posts, it will still look for the post excerpt and if one doesn't exist it will auto-generate one from the first 160 characters of the content field. * redacted some other updates to push this one feature out - more soonish. = 1.2 = * fixed if latest post in blog listing had a featured image, og:image would use that instead of default image from admin. Fixed that. = 1.1 = * fixed an issue with single quotes in excerpts ruining the meta description (props Chris Jensen) * added link to support form for bugs and/or feature requests & minor copy updates in admin = 1.0 = * initial public release on wordpress repo * lots of verbiage and help updates. more to come here as I think it's still too confusing. * removed help menu function until I can get something more useful in there. next version. = 0.0.10 = * fixed the continue reading injection added to the end of excerpts in twentyten and twentyeleven themes/childs that look bad in meta desc * fixed admin width issue for table, now displays correct * verbiage updates - prep for full help menu setup = 0.0.9 = * added admin notifications if plugin is activated but doesn't have the required fields (app id or user id) saved = 0.0.8 = * if no default image set no longer display a blank og:image tag, now it will show a comment in source reminding you to add a default image in the plugin settings = 0.0.7 = * updated admin UI - now follows WP 3.2 style admin UI. Very Nice! = 0.0.6 = * lots of changes! * titles, descriptions and urls all now working with home and all other page/posts * og:type handled better and working on home and page/posts * added optional page_id field if ppl want to associate insights with their page instead. but still need a user or app id req * more admin help / reference information linked up. promotional tweet about this plugin added. big help/instruction overhaul coming soon. * lots of little changes I forget and some clean up sweeping = 0.0.2 = * added meta field if no admin id set as to give instruction to liven up plugin * more readme explanation/help = 0.0.1 = * Initial beta release == Other Notes ==
Would like to be able to exclude the itunes image buttons on my site from being included in the og:image tags. A field on the settings page where we could paste the URLs to such images, maybe as a comma separated list, would be useful.
Why did you place the uninstall outside of the class?
It will work fine within the main class.
article:publisher lets a publisher link an article to their own Facebook page. When the article is shared in News Feed, a "like" button is displayed so people can like the publisher page.
<meta property="article:publisher" content="https://www.facebook.com/cnn" />
article:author lets a publisher link an article to the Facebook profile of the author. When the article is shared in News Feed, a "follow" button is displayed so people can follow the author. The author needs to have Follow activated on his or her profile for this button to appear.
<meta property="article:author" content="https://www.facebook.com/fareedzakaria" />
Problem comes in when they don't have social links in meta w/ a plugin or anything... do I want to add that to this plugin? fuck no.
Plugin still works fine for the "good" rules for FB w/o these but just consider for future:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
if ( ! function_exists( 'get_attached_media' ) ) {
$attachments = get_attached_media( 'image', $post->ID );
}
http://codex.wordpress.org/Function_Reference/get_attached_media
Just to make the repo prettier and I plan to look into setting up unit tests with travis at some point.
Add:
The Facebook Debug Tool (https://developers.facebook.com/tools/debug/og/object/) gives me the following error for our wordpress pages.
I see this error for the first time so I guess facebook changed their behavior!
We have some logik somewhere in wordpress (probably core, since I cannot find any plugins or custom changes about this) that will always redirect you to the version of an url that ends in "/" -> https://www.betterplace.org/c/neues is redirected to https://www.betterplace.org/c/neues/
The bug:
The the og-URL says <meta property="og:url" content="https://www.betterplace.org/c/ueber-uns"/>
(without the trailing slash)
How can I fix this?
Notice: Undefined index: wpfbogp_force_fallback in /var/www/public/wp-content/plugins/WPFBOGP/wp-facebook-ogp.php on line 408
function wpfbogp_validate($input) {
$input['wpfbogp_admin_ids'] = wp_filter_nohtml_kses($input['wpfbogp_admin_ids']);
$input['wpfbogp_app_id'] = wp_filter_nohtml_kses($input['wpfbogp_app_id']);
$input['wpfbogp_fallback_img'] = wp_filter_nohtml_kses($input['wpfbogp_fallback_img']);
$input['wpfbogp_force_fallback'] = ($input['wpfbogp_force_fallback'] == 1) ? 1 : 0;
return $input;
}
Considering adding some small designators in the comment output code that would tell me the setup people have a little more.. only this plugin.. nothing invasive but...
for example:
In order as an example.. maybe something like diYftNfbN
.
Would help me with support in the WP forums as nobody ever relays that info.
This is one request of many. http://wordpress.org/support/topic/oglocale-for-japan-needs-a-little-change
I'd like to not get to a point where it needs to be a dropdown in settings but that's super super last resort. Should just handle with locale() but fix WP's weirdness.
The software uses incorrect headings in admin screens. See https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/ for more.
is_home() && get_option('page_for_posts')
is a page that's showing the blog. we should check to see if that has a featured image and then display it. currently it ignores it because it's is_home.
Update helper_codes at bottom of output too.
right now if there's a default image it shows up last in the array according to the debugger (and google plus). Need to flip that order so if there's a default image link it'll show first on FB.
Also consider if the checkbox is set to only default then we may not want to display the rest of images in the array at all.
https://developers.facebook.com/docs/technical-guides/opengraph/built-in-objects/
probably need to add in
if is_home -> type=blog
else is_single -> type=article
else is_page -> type=website
something like that
In edge-cases the canonical URL returned via WP has a trailing slash when some apache installs do not enforce it therefore wpfbogp returns the og:url with no trailing slash triggering a redirect loop error with Facebook Debugger.
Consider optional replacement:
http://kovshenin.com/2012/current-url-in-wordpress/
global $wp;
$current_url = add_query_arg( $wp->query_string, '', home_url( $wp->request ) );
This support request had some weird shit going on in adminID
and appID
output... not sure what they did but need to make sure we're scrubbing that.
<meta property="fb:admins" content="100000195032462"100000195032462"/>
<meta property="fb:app_id" content="1801701280113135"1801701280113135"/>
edit: need to better sanitize them all lol.
<meta property="og:title" content="Nutrition : qui écouter ?"/>
Nutrition : qui écouter ?
We use img tags with src="//imghostname/path_to/xyz.jpg" URLs that don't have the protocol. This allows HTTP pages to use an HTTP URL and HTTPS pages to use an HTTPS URL.
The WPFBOG plugin turns this into:
<meta property="og:image" content="https://bloghostname/blogpath/imghostname/path_to/xyz.jpg"/>
The preg_match() call on line 57 needs to be modified to check for a valid "//" prefix URL match.
Is there a way to set the fallback image globally for my multiside? The same as with the app_id (#2 (comment))?
Thanks
Facebook doesn't seem to require those be filled out anymore. They're still there for Domain Insights but not required.
References:
Only things marked as required now are og:title
and og:type
Mobile (which is bigger ?? hokay - should default to this)
~~> Image aspect ratio: 1.91:1 ~~
> Image specs in ad: 560x292 px
~~> If the uploaded image is smaller than ~~
~~> 560x292 px, then it will render as 100x100px ~~
> MAX 110 characters (90 preferable)
Desktop
~~> Image aspect ratio: 1.91:1 ~~
~~> Image specs in ad: 400x209 px ~~
~~> If the uploaded image is smaller than ~~
~~> 400x209 px, then it will render as 154x154 ~~
~~> or 90x90 px (the largest available size) ~~
> MAX 500 characters
edit: optimal sizes now: "Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images."
source:
"$1350" in title in 2.0.7 displays fine in meta
displays as "| 50" in 2.1b
After I upgraded to 2.0.12 the plugin is adding a trailing slash to the og:url. Like this:
whereas before it was like this:
So now Facebook debugger says that there is a circular redirect path detected.
Let me know how I can change this to work how it was before.
Thanks!
Lately I've been considering not showing the fallback image if there's a featured image present. Thought is - if you have a featured image it's probably more important than a fallback image and because FB sometimes pulls the image array in different orders - the fallback gets shown sometimes when it should use the featured image.
Open to opinions here.
This should allow us to grab all images in the post, whether they are in a gallery or included directly in the post content.
Need to check if WordPress is 3.5 or higher.
Thoughts?
need to add if
add_filter( 'jetpack_enable_opengraph', '__return_false', 99 );
code they use to detect FB I should add too:
if ( in_array( 'facebook/facebook.php', $active_plugins ) )
add_filter( 'jetpack_enable_opengraph', '__return_false', 99 );
function wpfbogp_admin_warnings
is being displayed to all logged in users - even on the subscriber level.
solution is adding: if ( current_user_can('manage_options') )
as condition but it does not work due to some wordpress limitation because the user level can not be determined at that point.
Although in my OOP code https://github.com/Foe-Services-Labs/WPFBOGP/blob/oop-conversion/wp-facebook-ogp.php#L128 it's working fine.
-> OOP rulez! 👿
Look into adding in this. https://github.com/Automattic/get-the-image
should clear up the rare image acquisition problems.
Should be using the built-in sanitize_text_field
options instead of running wp_filter_nohtml_kses
on everything...
https://core.trac.wordpress.org/browser/tags/4.1/src/wp-includes/formatting.php#L3792
seems *.html extensions forced in urls - we're still adding the trailing slash. ugh.
<meta property="og:image" content="http://redacted.com/wp-content/uploads/2014/04/facebookicon.jpg"/>
<meta property="og:image" content="http://redacted.com/wp-content/uploads/2014/04/facebookicon.jpg"/>
look into it
stuff like nextgen facebook, ultimate seo?, wpseo fb setting, facebook plugin, aioseo, etc.
[edit] jetpack jetpack_enable_open_graph
exists already
We have this in for twentyten and twentyeleven as they add stuff to the excerpt... wanted to check if twentytwelve did the same thing and if so add it in
On some posts (written in Icelandic) I've noticed that the meta description is missing.
This happens on wp 3.6.1 with plugin version 2.0.7.
I'm not sure what exactly triggers this, but I managed to solve it by replacing this line:
$description = str_replace( "\r\n", ' ' , substr( strip_tags( strip_shortcodes( $post->post_content ) ), 0, 160 ) );
with:
$charset = get_option( 'blog_charset' );
if( ! $charset )
$charset = 'UTF-8';
$wpfbogp_description = str_replace( "\r\n", ' ' , mb_substr( strip_tags( strip_shortcodes( $post->post_content ) ), 0, 160, $charset ) );
where I use mb_substr() instead of substr(), i.e. the multi-byte version of substr().
Hi @chuckreynolds ,
I moved the whole code to a class and everything is working.
If you got some time have a look at the changes: https://github.com/Foe-Services-Labs/WPFBOGP/tree/oop-conversion
Let me know what you think.
Regards,
Christian
have to use the array format [http://ogp.me/#array]
instead of
meta property="fb:admins" content="1111111111,222222222" />
must now be
meta property="fb:admins" content="1111111111" />
meta property="fb:admins" content="2222222222" />
The find_images
method already does this for all images in the post that aren't the featured image. (lines 92-96)
The same logic would need to be added starting around line 266 where the post thumbnail is added to the $wpfbogp_images
array. I didn't think it would be possible for this to not have the full URL, but if a site has the "Full URL path to files" set in the Media settings (ugh), this will happen.
If, by chance, this could make it into a 2.0.11 release, that would be awesome and I can happily throw away my forked version of the plugin. 😃
add_filter( 'jetpack_enable_open_graph', '__return_false' );
I have the plugin configured in a way that it always adds the fallback image.
Right now I see a behavior where the fallback image is the first image and the (for example) post-image is the second.
<meta property="og:image" content="https://asset1.betterplace.org/assets/default/og-image.betterplace.png"/>
<meta property="og:image" content="http://www.betterplace.org/c/ueber-uns/files/2014/05/generic-content-header_desktop-1024x448.jpg"/>
With this code Facebook takes the fallback as primary image.
Screenshot: https://developers.facebook.com/tools/debug/og/object/ shows:
In the code, there is a place that manually changes the order of the array. So it looks like, the plugin should behave correctly already. See https://github.com/chuckreynolds/WPFBOGP/blob/master/wp-facebook-ogp.php#L188
Question:
Thanks
Nothing serious. Just to clarify.
What is the right license so I can sync it all around the files?
GPLv2
or
GPLv2 or later
First off it needs a super fallback in case no excerpt or no content; which agreeably is rare but it happens. Also need a fallback if description is empty. which again; rare but... happens.
Secondly, and optionally, I'd like to try and filter for seo plugins. Hence smarter.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.