Facebook Sharing for Products ( No Pic )

[icr8]

Hello Gys,

Sorry for the late response. I have been travelling. First Berlin, then London and Now i’m in Africa.

I will tell you the solution I have, but beware I haven’t finished testing it yet.

RATIONALE
The facebook share API pulls the information it uses from Open graph tags (or OG tags). Currently, the theme doesn’t have all the tags it requires, so it does its best to pull whatever info it can find, hence the jibberish in the product description.

You can find info about OG tag best practices here https://developers.facebook.com/docs/plugins/checklist/#opengraphtags

Given this info, I set about trying to add the OG meta tags into the page without changing too many files. The main goal is to pass the product description and encapsulate it in the og:description tag. OG tags are meta tags which have to be included within the head tag. In the neighborhood theme, this is located in the header.php file, so that’s where it needs to be changed. Here’s how I did it.

Inserting product description into OG tag for facebook
1. If you haven’t done so already, you need to install the neighborhood child theme or create a child theme yourself. (Info on how to do that is here).
2. Copy the header.php file from wp-contents/themes/neighborhood into your child theme file, located at wp-contents/themes/name-of-your-theme
3. In your child theme’s header.php file, locate the section for meta tags in the header. (see attached image). It should be under the following html comment

<!--// SITE META //-->

4. Under the content there, and before the next section which should be pingback and favicon, add the following code.

<!--// ADDING OG TAG META FOR FACEBOOK SHARE//-->

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>  

<!-- Set the values here if you have registered your site as a facebook app. If not, you don't need the two lines below -->  
<meta property="fb:app_id" content="226492710858523" />  
<meta property="fb:admins" content="512510627" />
  
<!-- Checks if page is a content page or  a product page -->  
<?php if (is_single()) { ?>  
<meta property="og:url" content="<?php the_permalink() ?>"/>  
<meta property="og:title" content="<?php single_post_title(''); ?>" /> 
 
<?php if (is_product()){ ?>

<meta property="og:description" content="<?php echo get_post_meta($post->ID, 'sf_product_description', true); ?>" /> 
 <?php } else { ?>  
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />  <?php } ?>
<meta property="og:type" content="article" />  
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />  

<!-- if page is others -->  
<?php } else { ?>  
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />  
<meta property="og:description" content="<?php bloginfo('description'); ?>" />  
<meta property="og:type" content="website" />  
<meta property="og:image" content="logo.jpg" /> <?php } ?>

5. Save the file, delete your cache and refresh your product page. Test to check the tags are being inputted correctly by looking in the source code of your product page.

Now, you should note that Facebook only scrapes your website every 24 hours! So if you test the share button from your website, it may not look like it’s working, even though the OG tags are being outputted in the source code. This is because facebook hasn’t scraped your site since the update.

6. To force facebook to scrape a page and test if the sharer will work correctly, use the Debugger Tool, provided by facebook here. Just copy and paste the url of your product page, and you can see what info they are pulling. IF something looks wrong, try deleting your cache and checking the head section of the page’s source to make sure the tags and description is correct in there. Then try thr debug tool again.

7. Now for the product you tested in the debug tool, go to the product page and try the facebook share button again. This time, the correct description should be there.

Now you just have to wait 24 hours for facebook to scrape your whole site.

VARIATION
– Some of you may only have a product short description and not a full description. In that case you need to pull the short desc instead of the full desc from the database. You do this by changing this line of code
<meta property="og:description" content="<?php echo get_post_meta($post->ID, 'sf_product_description', true); ?>" />

to this
<meta property="og:description" content="<?php echo get_post_meta($post->ID, 'sf_short_product_description', true); ?>" />

– Also, if you prefer to type a single constant message instead of product descriptions, you can do it by putting the message directly in the content attribute of the og:description meta tag. e.g.

<meta property="og:description" content="Look at what i just found at someamazingsite.com" />

I hope this helps you guys. Let me know if you have any success with it. ANd if it doesn’t work for you, let me know and i’ll try my best to help you figure out why.

@swiftideas It would be cool if you guys could add this feature to future updates, so people don’t have to do this manually

Good luck with it guys!! 🙂

[icr8]

Has anybody tried this solution yet? And did it work for you?..

[laranz – SUPPORT]

Hi @icr8,

Didn’t tried, but it will work, you will directly fill the open graph tag 🙂 that plugin also do the same, but with some more options without code edit. 🙂 If that works for you, it will works for everyone 🙂

Thanks for your co-operation and patience over this period when we spent holidays, we wish that you too had a great holiday. 🙂

Let me know, what you got.

Thanks,
laranz.