My name is Mike. Thanks for your help.
In WordPress, We have designed our website so the og data is as close to youtube’s as possible in the facebook debugger. In spite of this, the way in which the videos are shared on Facebook is not the same. Though the preview for the share of our website is fine, the actual share itself is not. Here’s a comparison:
NOTE: Our “When shared, this is what will be included” preview in the scaper looks fine, but when actually sharing that’s not what we get.
Step 1:
Youtube URL Sharing Preview: Includes Thumbnail of video, Title, and Description
AccentR URL Sharing Preview: Full Width Video, NO title, NO Description
Step 2:
Youtube share is Posted: Includes Thumbnail of video, Title, and Description
AccentR share is Posted: (same as step 1)
Step 3:
Youtube Video Played from Share: Video Width increase to width of Facebook wall, Title and Description automatically displayed under the video
Accentr Video Played from Share: You must click the video twice (once to get it to youtube, again to get it to play*), Title and Description still do not appear
Please see a side-by-side comparison on Facebook debugger of:
http://www.accentreductionnow.com/pronounce-th-sounds/
and
https://www.youtube.com/watch?v=shcQojmaIFs
We have tried to make the og tags in the “These are the raw tags that we found” section as identical to youtube as possible including the order in which they are presented (with the exclusion of android and ios tags). We have succeeded to the best of our understanding, but the sharing problems remain.
Here is our php that defines the og tags:
function insert_fb_in_head() {
global $post;
$youtube = get_post_custom_values('youtube');
$youtubeID = get_post_custom_values('youtubeID');
$postmeta = htmlspecialchars(get_post_meta($post->ID, '_su_description', true));
$postpermalink = get_permalink();
$posttitle = get_the_title();
if ( !is_singular()) { //if it is not a post or a page
return;
}
echo '<meta property="og:site_name" content="Accent Reduction Now" />';
echo '<meta property="og:url" content="' . $postpermalink . '" />';
echo '<meta property="og:title" content="' . $posttitle . '" />';
if(!has_post_thumbnail( $post->ID )) {
if ($youtube) {
echo '<meta property="og:image" content="http://i.ytimg.com/vi/'.$youtubeID[0].'/maxresdefault.jpg" />';
}
else {
$default_image="http://www.blah.png";
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo '<meta property="og:description" content="' . $postmeta . '"/>';
if($youtube) {
echo '<meta property="og:type" content="video" />';
}
else {
echo '<meta property="og:type" content="article" />';
}
if($youtube) {
// TEXT/HTML version
echo '<meta property="og:video:url" content="https://www.youtube.com/embed/'.$youtubeID[0].'" />';
echo '<meta property="og:video:secure_url" content="https://www.youtube.com/embed/'.$youtubeID[0].'" />';
echo '<meta property="og:video:type" content="text/html" />';
echo '<meta property="og:video:width" content="1280" />';
echo '<meta property="og:video:height" content="720" />';
// SHOCKWAVE version
echo '<meta property="og:video:url" content="http://www.youtube.com/v/'.$youtubeID[0].'?version=3&autohide=1" />';
echo '<meta property="og:video:secure_url" content="https://www.youtube.com/v/'.$youtubeID[0].'?version=3&autohide=1" />';
echo '<meta property="og:video:type" content="application/x-shockwave-flash" />';
echo '<meta property="og:video:width" content="1280" />';
echo '<meta property="og:video:height" content="720" />';
// og:video:tags
echo '<meta property="og:video:tag" content="Pronunciation (Website Category)" />';
echo '<meta property="og:video:tag" content="English Phonology" />';
echo '<meta property="og:video:tag" content="Lesson" />';
echo '<meta property="og:video:tag" content="learn" />';
echo '<meta property="og:video:tag" content="Lessons" />';
echo '<meta property="og:video:tag" content="Education" />';
// fb:app_id
echo '<meta property="fb:app_id" content="475649032509250" />';
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
NOTES: Somehow, though the scraper says Youtube has og:video:url as
youtubeurl…/embed/shcQojmaIFs
it somehow becomes
youtubeurl…./embed/shcQojmaIFs?autoplay=1
in the “type of share” section of the debugger. How? This may solve our problem in step 3 above, but we don’t know how this change occurs.
THANK YOU for any help you can provide, to this first-time poster.
I am not sure why the two are rendering in different ways even though the tags are same. After experimenting, a hacky solution that I found to render the share dialog like the one for YouTube with text and description was to use a square image larger than 200 x 200 pixels for the og:image tag.
For example, I tried this: