Question

我的名字是迈克。谢谢你的帮助。

在Wordpress中，我们设计了我们的网站，以便在facebook调试器中尽可能接近youtube的og数据。尽管如此，在Facebook上分享视频的方式并不相同。虽然我们网站的份额预览很好，但实际的份额本身并非如此。这是一个比较：

注意：我们的“分享时，这将包含在scaper中的预览”看起来很好，但实际分享时并不是我们得到的。

第1步： Youtube网址共享预览：包括视频缩略图，标题和说明 AccentR URL共享预览：全宽视频，无标题，无说明

第2步：已发布Youtube分享：包括视频缩略图，标题和说明发布的AccentR份额:(与步骤1相同）

第3步： Youtube视频播放自分享：视频宽度增加到Facebook墙的宽度，标题和描述自动显示在视频下方 Accentr视频播放分享：您必须点击视频两次（一次将其发送到youtube，再次播放*），标题和说明仍未显示

请参阅Facebook调试器的并排比较： http://www.accentreductionnow.com/pronounce-th-sounds/

和

https://www.youtube.com/watch?v=shcQojmaIFs

我们已尝试在“这些是我们找到的原始标记”部分中使og标记与youtube尽可能相同，包括它们的显示顺序（排除android和ios标记）。我们已经取得了最好的理解，但共享问题仍然存在。

这是我们定义og标签的php：

    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 );

注意：不知怎的，虽然刮刀说Youtube有og：video：url as

... youtubeurl /嵌入/ shcQojmaIFs

它以某种方式变成

... youtubeurl /嵌入/ shcQojmaIFs？自动播放= 1

在调试器的“共享类型”部分。怎么样？这可以解决上面第3步中的问题，但我们不知道这种变化是如何发生的。

感谢您为第一次发布的海报提供的任何帮助。

Answer 1

我不确定为什么即使标签相同，两者也会以不同的方式呈现。经过实验，我发现一个hacky解决方案，用于渲染分享对话框，就像带有文字和描述的YouTube一样，是为og：image标签使用大于200 x 200像素的方形图像。例如，我试过这个：

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

在Facebook上与视频共享URL不显示描述/标题

1 个答案: