Social Media Share buttons

When adding a Social Media Share Button on your website and someone clicks on the social media icon, then you can share a page/image on your website Facebook page.

In WebBuilderPro go to 'Settings' and click on 'Meta Information'.
Insert Meta Tags as per the example below.

To turn your web pages into graph objects, you need to add basic metadata to your page. The four required tags for every page are:

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".

As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

 

STRUCTURED PROPERTIES
Some properties can have extra metadata attached to them. These are specified in the same way as other metadata withproperty and content, but the property will have extra :

The og:image property has some optional structured properties:

  • og:image:url - Identical to og:image.
  • og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
  • og:image:type - A MIME type for this image.
  • og:image:width - The number of pixels wide.
  • og:image:height - The number of pixels high.
 

A full image example:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
 

The og:video tag has the identical tags as og:image. Here is an example:

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
 

The og:audio tag only has the first 3 properties available (since size doesn't make sense for sound):

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
 
 
 
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

My Google Map is not working

If your Google maps is not displaying on your website and shows "Oops something went wrong..."...

How to add a FAQ page

You have created your website using our WebBuilderPro website builder and now need to add a FAQ...

How to add/change a favicon

This tutorial video shows you how to add/change a favicon in WebBuilderPro. See How to add/change...

How to add a menu item

This tutorial video shows you how to add a menu item to an existing menu in WebBuilderPro. See...

How to add a product to your e-commerce site

This tutorial video shows you how to add a product to your website in WebBuilderPro. See How to...