CODEWITHSUNDEEP
phpwordpressfacebookfacebook-graph-apiwoocommerce
Vfero
Vfero

Reputation: 503

Making a Dynamic Facebook OG in Woocommerce

in order to have the right image and the right link everytime I share on Facebook, here's what i've done on my Wordpress/Woocommerce header:

    <meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
    <meta property="og:title" content="<?php echo the_title(); ?> by Pixel Komando" />
    <meta property="og:url" content="<?php echo get_permalink(); ?>" />

Everything works fine in my woocommerce products pages, but when i want to share the Shop Page, the FB debugger shows me this :

URL : https://www.pixelkomando.com/shop

Meta tag og:url https://www.pixelkomando.com/shop/CATEGORY/PRODUCT/

It seems it works correctly everywhere except on the Shop Page itself. Instead of retrieving the Shop Page URL, it gives the URL of a random product.

I dont really know what is wrong.

Regards Fero

Upvotes: 1

Views: 1509

Answers (2)

Raunak Gupta
Raunak Gupta

Reputation: 10809

As it is an archive page so whenever you call get_permalink() it will pick either the last or the first product URL, so what I'll suggest you to remove your code from header.php and add the following code in your functions.php

function wh_doctype_opengraph($output) {
    return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}

add_filter('language_attributes', 'wh_doctype_opengraph');


function wh_fb_opengraph()
{
    global $post;
    if (is_home() && is_front_page())
    {
        ?>
        <meta property="og:type" content="website" />
        <meta property="og:title" content="<?= get_bloginfo('name') ?>"/>
        <meta property="og:url" content="<?= get_site_url() ?>"/>
        <meta property="og:image" content="<?= get_site_url() . '/wp-content/uploads/myhome.jpg' ?>"/> <!-- replace it with your static image-->
        <?php
    }
    //for singles post page
    else if (is_single() && !is_product())
    {
        if (has_post_thumbnail($post->ID))
        {
            $img_src = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'medium');
        }
        //if featured image not present
        else
        {
            $img_src = get_site_url() . '/wp-content/uploads/post.jpg'; //replace it with your static image
        }
        ?>
        <meta property="og:type" content="article" />
        <meta property="og:title" content="<?= get_the_title($post->ID); ?>"/>
        <meta property="og:url" content="<?= get_the_permalink($post->ID); ?>"/>
        <meta property="og:image" content="<?= $img_src; ?>"/>
        <?php
    }
    //for singles product page only
    elseif (is_product())
    {
        $img_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'woocommerce_single_image_width'); //replace it with your desired size
        ?>
        <meta property="og:type" content="product" />
        <meta property="og:title" content="<?= get_the_title($post->ID); ?> by Pixel Komando"/>
        <meta property="og:url" content="<?= get_the_permalink($post->ID); ?>" />
        <meta property="og:image" content="<?= $img_url[0]; ?>"/>
        <?php
    }
    //for product cat page
    else if (is_product_category())
    {
        $term = get_queried_object();
        $img_src = wp_get_attachment_url(get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true));
        if (empty($img_src))
        {
            $img_src = get_site_url() . '/wp-content/uploads/myproductcat.jpg'; //replace it with your static image
        }
        ?>
        <meta property="og:type" content="object" />
        <meta property="og:title" content="<?= $term->name; ?>" />
        <meta property="og:url" content="<?= get_term_link($term->term_id, 'product_cat'); ?>" />
        <meta property="og:image" content="<?= $img_src; ?>" />
        <?php
    }
    //for shop page
    elseif (is_shop())
    {
        ?>
        <meta property="og:title" content="<?= $term->name; ?>" />
        <meta property="og:url" content="<?= get_permalink(woocommerce_get_page_id('shop')); ?>" />
        <meta property="og:image" content="<?= get_site_url(); ?>/wp-content/uploads/myshop.jpg" /> <!-- replace it with your static image-->
        <?php
    }
    else
    {
        return;
    }
}

add_action('wp_head', 'wh_fb_opengraph', 5);

Code is tested and works.

Hope this helps!

Upvotes: 2

Matthew
Matthew

Reputation: 13332

It seems like the issue is with your og:url tag. Each time I re-scrape with the sharing debugger it is different. To me, this suggests the get_permalink() method is not returning a consistent result.

FYI, the og:url meta tag is not required, so an easy fix here is just to leave it off. You only really need it if you have multiple URLs to access the same resource and you want to let FB's crawler which is URL is the canonical one.

Upvotes: 0

Related Questions