$$ \newcommand{\dint}{\mathrm{d}} \newcommand{\vphi}{\boldsymbol{\phi}} \newcommand{\vpi}{\boldsymbol{\pi}} \newcommand{\vpsi}{\boldsymbol{\psi}} \newcommand{\vomg}{\boldsymbol{\omega}} \newcommand{\vsigma}{\boldsymbol{\sigma}} \newcommand{\vzeta}{\boldsymbol{\zeta}} \renewcommand{\vx}{\mathbf{x}} \renewcommand{\vy}{\mathbf{y}} \renewcommand{\vz}{\mathbf{z}} \renewcommand{\vh}{\mathbf{h}} \renewcommand{\b}{\mathbf} \renewcommand{\vec}{\mathrm{vec}} \newcommand{\vecemph}{\mathrm{vec}} \newcommand{\mvn}{\mathcal{MN}} \newcommand{\G}{\mathcal{G}} \newcommand{\M}{\mathcal{M}} \newcommand{\N}{\mathcal{N}} \newcommand{\S}{\mathcal{S}} \newcommand{\I}{\mathcal{I}} \newcommand{\diag}[1]{\mathrm{diag}(#1)} \newcommand{\diagemph}[1]{\mathrm{diag}(#1)} \newcommand{\tr}[1]{\text{tr}(#1)} \renewcommand{\C}{\mathbb{C}} \renewcommand{\R}{\mathbb{R}} \renewcommand{\E}{\mathbb{E}} \newcommand{\D}{\mathcal{D}} \newcommand{\inner}[1]{\langle #1 \rangle} \newcommand{\innerbig}[1]{\left \langle #1 \right \rangle} \newcommand{\abs}[1]{\lvert #1 \rvert} \newcommand{\norm}[1]{\lVert #1 \rVert} \newcommand{\two}{\mathrm{II}} \newcommand{\GL}{\mathrm{GL}} \newcommand{\Id}{\mathrm{Id}} \newcommand{\grad}[1]{\mathrm{grad} \, #1} \newcommand{\gradat}[2]{\mathrm{grad} \, #1 \, \vert_{#2}} \newcommand{\Hess}[1]{\mathrm{Hess} \, #1} \newcommand{\T}{\text{T}} \newcommand{\dim}[1]{\mathrm{dim} \, #1} \newcommand{\partder}[2]{\frac{\partial #1}{\partial #2}} \newcommand{\rank}[1]{\mathrm{rank} \, #1} \newcommand{\inv}1 \newcommand{\map}{\text{MAP}} \newcommand{\L}{\mathcal{L}} \DeclareMathOperator*{\argmax}{arg\,max} \DeclareMathOperator*{\argmin}{arg\,min} $$

How to Use Specific Image and Description when Sharing Jekyll Post to Facebook

Often times, when we share our blog post to Facebook, disappointments will arise. Our hard work reduced to zero just because Facebook picks undesireable image and description. Our perfectly written and beautifully arranged blog post looks really bad in the Facebook post… The horror!

However, there is a quick remedy for that, and if you’re using Jekyll, you just need to modify once, and forget about it for the rest of your life. Here’s how!

First, check the front matter format of your blog post’s markdown. Here’s mine for example:

---
layout:     post
title:      "Deriving LSTM Gradient for Backpropagation"
subtitle:   "Deriving neuralnet gradient is an absolutely great exercise to understand backpropagation and computational graph better. In this post we will walk through the process of deriving LSTM net gradient so that we can use it in backpropagation."
date:       2016-08-12 12:34
author:     "wiseodd"
header-img: "img/code.png"
category:   techblog
tags:       [machine learning, programming, python, neural networks, rnn, lstm]
---

So, in my case, I want the image and the description that are displayed in my Facebook post to be the value of header-img and subtitle variables respectively. You can use any variable though, as this is just an example.

Now, open your _include/head.html template, and this piece of code inside the <head> tag.

{% if page.header-img %}
    <meta property="og:image" content="{{ site.url }}/{{ page.header-img }}" />
{% endif %}

<meta property="og:description" content="{{ page.subtitle }}" />

And voila! The next time you share your blog post to Facebook, the post’s header-img and subtitle will be used!

To update the already shared posts so that they follow the above schema, you should head to https://developers.facebook.com/tools/debug/, enter your URL, click “Debug”, and click “Scrape Again”.

Now, try to re-share the post. It should be updated now.

We have to do this because Facebook caches the scraped URL. It is especially true if the URL is somewhat recently shared.

Credit due to front-end ninja http://timotiusnc.github.io!