Sharing URL With Video On Facebook Not Displaying Description/Title

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:

Read More

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&amp;autohide=1" />';
        echo '<meta property="og:video:secure_url" content="https://www.youtube.com/v/'.$youtubeID[0].'?version=3&amp;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.

Related posts

1 comment

  1. 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:

    // using Marvin icon for example purposes
    <meta property="og:image" content="http://findicons.com/files/icons/206/looney_tunes/300/marvin_martian.png" />
    

Comments are closed.