Using The Meta Data Tab for Images re Sharing Testimonials to Facebook

Using The Meta Data Tab for Images re Sharing Testimonials to Facebook

Facebook published an informative article here:    https://developers.facebook.com/docs/sharing/webmasters

Though all the pertinent information is in that very informative and detailed article, here are the bare essentials to help you with what we, you and Testimonial Tree, are doing.

Backstory
First, a little backstory, specifically, about why we are doing this at all. Facebook, and, increasingly, other websites, are branding messages, emails and the like with a picture designated by your webmaster, grabbed from your website. If your webmaster does not properly designate a photo using the <meta> tag, then a randomly choosen picture from your website will be used.

The "How-To"
Now, to the practical side: actual meta tag implementation. Here is the breakdown:

  1. <meta property="og:image:url" content="[URL of the image itself]" />
    <meta property="og:image:type" content="[image/jpeg, image/gif or image/png]" /> 
    <meta property="og:image:secure_url" content="    [secure URL of the image itself. Use this if the image URL starts with 'https']" />
    <meta property="og:image:width" content="    [width of image in pixels. It is best to enter both width and height]" /> 
    <meta property="og:image:height" content="    [height of image in pixels. It is best to enter both width and height]" />




Using the above as a guide, the following would be an acceptable use of the meta tag


SAMPLE



  1. <meta property="og:image:secure:url" content="https://testimonialtree.zendesk.com/hc/en-us" />
    <meta property="og:image:type" content="image/png" /> 
    <meta property="og:image:width" content="261" /> 
    <meta property="og:image:height" content="60"     />


When used on the home page of your site, the image that returns from the URL on the line
  1. "og:image:secure:url" or "og:image:url"
 will be used by Facebook, and in our particular case, it will be used by Facebook to help branding when sharing to Facebook.

IMPORTANT NOTE: 

To update an image after it's been published, use a new URL for the new image. Images are cached based on the URL and won't be updated unless the URL changes.
Now What?

Now that you have the code, what are you supposed to do with it? In a perfect world, you give it to your webmaster. For some of us, we are our own webmaster, so here are the nitty gritty details for where to paste it:

In the backend of your website, in the .html document where all your HTML code is housed (it is commonly named index.html), you will need to find, towards the top, the <head> and </head>  tags: <head> will appear before/above </head>. 

If you paste the code anywhere between <head> and </head>, you are good to go.


Test Your Meta Data
After you get the code in your backend, test it here:

https://developers.facebook.com/tools/debug/

You may have to tweak the image width and height.

 


    • Related Articles

    • Adding your Facebook link to your Review Generation

      You can add your Facebook URL to your Review Generation page to both Generate new reviews as well as Monitor your existing reviews.   Generate = Your client will be redirected or prompted to go to Facebook to copy and paste their review there after ...

    • How to Add Survey Meta Data

      Meta Data can be added to surveys to allow tracking of any data you require that is outside of the base use case of the Testimonial Tree software. Meta Data is most commonly used to augment the survey presented to your customers. By Adding a ...

    • Booj Websites: Add Testimonial Tree Reviews to Your RE/MAX Website

      This article will walk you though how to add your Testimonial Tree reviews to your RE/MAX Booj Website. Step 1: Your Testimonial Tree account must have been created or acquired in RE/MAX Marketplace  Be sure to login to Testimonial Tree via the ...

    • Adding, Managing, and Deleting Third-Party Sites (Review Generation)

      Adding, Managing, and Deleting Third-Party Sites (Review Generation) Testimonial Tree offers the ability to send customers to third-party sites' "Leave a Review" page to leave you a testimonial and a high-star rating. For our purposes, third party ...

    • Import and Data Syncing Overview

      Import Overview This document is designed to help explain the technical details necessary create one time and recurring data imports within Testimonial Tree. The overall goal is to create a seamless user experience for professionals. Part of that ...