botbotbot 's blog

Sharing with Open Graph

12 Oct 2015 Tags: jekyll website ·

sharing with open graph

Add this meta data to your html page between <head> ... </head>

 <meta property="og:title" content="Markdown Slide" />
 <meta property="og:type" content="article" />
 <meta property="og:url" content="http://dev.im-bot.com/slide/" />
 <meta property="og:image" content="http://dev.im-bot.com/public/opengraph_logo.png" />
 <meta property="og:description" content="Remark.js - easy and simple slide" />
 <meta property="og:site_name" content="botbotbot" />
 <meta property="og:locale" content="th_TH" />

Then using Open Graph Object Debugger to look what it look like when shared.

Tips:

  • og:image always cache in fb server. you should change your image url to force fb reload your image.

Jekyll Integrate Open Graph

Add this line in your _includes/head.html between <head> ... </head>

<meta property="og:title" content="Sharing with Open Graph" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://dev.im-bot.com/opengraph//" />
<meta property="og:image" content="http://dev.im-bot.com/public/img/open-graph-thumbnail.png" />
<meta property="og:image:width" content="862" />
<meta property="og:image:height" content="453" />
<meta property="og:description" content="Make your site look pretty when sharing on facebook." />
<meta property="og:site_name" content="botbotbot" />
<meta property="og:locale" content="th_TH" />

Create _includes/opengraph.html

<meta property="og:title" content="Sharing with Open Graph" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://dev.im-bot.com/opengraph//" />
<meta property="og:image" content="http://dev.im-bot.com/public/img/open-graph-thumbnail.png" />
<meta property="og:description" content="Make your site look pretty when sharing on facebook." />
<meta property="og:site_name" content="botbotbot" />
<meta property="og:locale" content="th_TH" />

Update _config.yml

logo: /public/logo.png
locale: th_TH

Custom Post

----
excerpt: summary
thumbnail: /public/thumbnail_for_your_post.png
----

References:

Latest Posts