Og Image is not working in whatsapp share in wordpress

為{幸葍}努か 提交于 2021-02-07 09:27:29

问题


Initially it was working when i share blogpost link in whatsapp , then adding new meta tags on the website header.php page it is working only with meta tag og image. and finally i removing it but it is not working.

my changes(meta tags with og image) is adding to this header.php page but image of the sharing post is not working with that link.please help me. header.php

<?php
/**
 * NewsGamer Theme
 *
 * Theme by: MipThemes
 * http://themes.mipdesign.com
 *
 * Our portfolio: http://themeforest.net/user/mip/portfolio
 * Thanks for using our theme!
 *
 */
?>

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

    <!-- start:global -->
    <!-- <meta property="og:url" content="https://www.mediatenlive.com/webpage/"> -->

    <meta charset="<?php bloginfo( 'charset' );?>" />
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><![endif]-->
    <!-- end:global -->

    <!-- start:responsive web design -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />



    <!-- end:responsive web design -->
    <title><?php wp_title('|',true,'right'); ?></title>


    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
        // Theme Custom Meta
        MipThemeFramework_Util::miptheme_set_meta();
    ?>

    <!-- start:wp_head -->
    <?php wp_head(); ?>
    <!-- end:wp_head -->

    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/respond.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- RMS Code Start -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
    $(function(){
        $(".soc-media").prepend("<a href='https://play.google.com/store/apps/details?id=com.mediaten.media10'><i class='fa fa-android'></i></a>");
        $(".soc-media-sharing").prepend('<a class="btn-social btn-facebook btn-icon" href="whatsapp://send?text='+window.location.href+'" onclxick="window.open(this.href, \'weeklywin\', \'left=50,top=50,width=600,height=360,toolbar=0\'); return false;"><i class="fa fa-whatsapp fa-lg"></i><span id="smWhatsapp">whatsapp</span></a>');
    });

    /*$(document).click(function(event) { 
        //alert("Clicked");
        if(!$(event.target).closest('#mobile-menu').length && !$(event.target).closest('#nav-expander').length){
            //alert("outside menu=="+$('#mobile-menu').is(":visible")+"==");
            if($('#mobile-menu').is(":visible")) {
                //alert("visible");
                $('#mobile-menu').hide();
                $("#wall-ad-container").remove();
            }
        }        
    });*/
    </script>
    <!-- RMS Code End -->
</head>
<body <?php body_class() ?> itemscope itemtype="http://schema.org/WebPage">

    <!-- start:body-start -->
    <?php get_template_part('elements/body-start'); ?>
    <!-- end:body-start -->

    <!--RMS Code start:ad-top-banner -->
    <?php if (!wp_is_mobile()) echo"<div style='height:100px;align:center;' class='hidden-xs'></div>";get_template_part('elements/ad-wall-banner'); ?>

<!-- end:ad-top-banner -->

    <!-- start:page outer wrap -->
    <div id="page-outer-wrap">
        <!-- start:page inner wrap -->
        <div id="page-inner-wrap">

            <!-- start:page header mobile -->
            <?php get_template_part('elements/header-mobile'); ?>
            <!-- end:page header mobile -->

            <!-- start:page header -->
            <?php get_template_part('elements/header-navigation'); ?>
            <!-- end:page header -->

            <!-- start:page top grid -->
            <?php get_template_part('elements/top-grid'); ?>
            <!-- end:page top grid -->

            <!-- start:ad-side-banner -->
            <?php get_template_part('elements/ad-side-banner'); ?>
            <!-- end:ad-side-banner -->

            <!-- start:outside post header -->
            <?php get_template_part('elements/post-header-outside'); ?>
            <!-- end:outside post header -->

            <!-- start:ad-top-banner -->
            <?php get_template_part('elements/ad-top-banner'); ?>


            <!-- end:ad-top-banner -->

single.php

<?php
/**
 * NewsGamer Theme
 *
 * Theme by: MipThemes
 * http://themes.mipdesign.com
 *
 * Our portfolio: http://themeforest.net/user/mip/portfolio
 * Thanks for using our theme!
 *
 */

// load header
get_header();

// Get Page properties
$mip_current_page   = new MipThemeFramework_Page();

// Update Post View
MipThemeFramework_Post_Views::update_post_views($post->ID);

// Load Custom post headers
get_template_part( 'elements/parts/post-header-'. $mip_current_page->page_template .'' );
?>

    <!-- start:post-info-bar -->
    <?php if ($mip_current_page->enable_post_info_bar) get_template_part( 'elements/post-info-bar' ); ?>
    <!-- end:post-info-bar -->

    <!-- start:page content -->
    <div id="page-content" class="<?php echo esc_attr($mip_current_page->page_template_class); ?> clearfix">

        <?php
            //get sidebar
            if ( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(!wp_is_mobile()) ) get_sidebar();
        ?>

        <!-- start:main -->
        <div id="main" class="main article">
            <!-- start:article post -->
            <article id="post-<?php echo esc_attr($post->ID); ?>" <?php post_class('article-post clearfix'); ?> <?php echo MipThemeFramework_Util::get_item_scope( $mip_current_page->review_post ); ?>>
            <?php
                if (have_posts()) :
                    // Get Template
                    get_template_part( 'elements/'. $mip_current_page->page_template .'' );
                else :
                    // No Posts
                    esc_html_e('No posts.', 'newsgamer');
                endif;
            ?>
            </article>
            <!-- end:article post -->
        </div>
        <!-- end:main -->

        <?php
            //get sidebar
            if ( ($mip_current_page->page_sidebar_template == 'right-sidebar')||( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(wp_is_mobile()) ) ) get_sidebar();
        ?>

    </div>
    <!-- end:page content -->

<?php
    // load footer
    get_footer();
?>

1.Normally when sharing post I get like this enter image description here 2.when add meta tag image with content of any Image link i get like this enter image description here means get thes image for any post. but i need defferent images(posts) with defferent posts. please help me anyone.


回答1:


Add This function in your functions.php

function doctype_opengraph($output) {
    return $output . '
    xmlns:og="http://opengraphprotocol.org/schema/"
    xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');
function fb_opengraph() {
    global $post;

    if(is_single()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'thumbnail');
        } else {
            $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>

    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src[0]; ?>"/>

<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

This solved the issue for me! Initially, the meta tags were below every tag and were not getting the image! While when I tried this the meta tag moved to top above all other tags, Which then images are added in WhatsApp. Hope this method helps you!




回答2:


I had same problem on OMG Diary News; my thumbnails didn't show when I shared posts on WhatsApp. Reducing image sizes to less than 150kbs solved the problem permanently. Hope this may also work for you too.



来源:https://stackoverflow.com/questions/46075866/og-image-is-not-working-in-whatsapp-share-in-wordpress

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!