Blog

Codes, snippets, tips and tricks for web designers using Adobe Business Catalyst, jQuery, CSS3, HTML5 and Respsonsive Design.

How to Customize Open Graph Tags to Maximize the Value of Your Facebook Like Buttons

Fabrizio Michels - Thursday, October 06, 2011

Open Graph tags are tags that you add to the of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

This allows Facebook to present a specific image, category, and other information that you can choose about your site when Likes of your content appear in user profiles and news feed.

To customize this information just add meta tags to the head of your site:

<meta property="og:tag name" content="tag value" /> 

See the examples:

    <title>The Rock (1996)</title>
    <meta content="The Rock" property="og:title" />
    <meta content="movie" property="og:type" />
    <meta content="http://www.imdb.com/title/tt0117500/" property="og:url" />
    <meta content="http://ia.media-imdb.com/rock.jpg" property="og:image" />
    <meta content="IMDb" property="og:site_name" />
    <meta content="USER_ID" property="fb:admins" />
    <meta content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons." property="og:description" />
    ...
  </head>

If you use Open Graph tags, the following six are required:

  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graph types.
  • og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name - A human-readable name for your site, e.g., "IMDb".
  • fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

Using pen Graph Tags on Business Catalyst

just add the meta tags that more suits your needs on your template, see example below:

        <meta property="og:type" content="food & Restaurant" />
        <meta property="og:url" content="{ module_siteurl}" />
        <meta property="og:image" content="http://yourdomain.com/images/blog/mythumbnail.jpg" />

Please note the use of BC tag to publish the correct URL of your blog post or webapp content:

{ module_siteurl}

In this case the the like button will always present the iamge you have selected and included in the meta tag, this prevents Facebook to insert a random image of your page, which sometimes is the CAPTCHA image or any other irrelevant imagery that could exists in your page for a different reason.

Comments
Post has no comments.