Adding Twitter Cards To Jekyll

In the past, I’ve discussed about the Open Graph and its integration with Jekyll, where Open Graph tags are used in the HTML to control the content display while sharing on social media networks, particularly Facebook. The tags work pretty well on those sites which natively support Open Graph, such as, Facebook, Google+, etc., however, Twitter doesn’t support Open Graph tags to control the content’s display.

Worry not, as Twitter provide Twitter Cards with its own tags to support the content display control of your blog posts which you share on Twitter. What it actually does, is that it can provide a title, thumbnail and description of your blog post just below your tweet which you shared on your Twitter profile. This results in a higher probability of Click-through rate, as such links look cool and encourages your audience to click on your links. By simply adding a few lines of HTML to your webpage, the users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.

Jekyll, as we have seen before, supports pretty much anything one can do with HTML/CSS/Javascript. With the inclusion of a short code snippet in your Jekyll repository, you can easily integrate Twitter Cards to your Jekyll site. Although, Twitter Cards come in 4 flavours (Summary Card, Summary Card With Large Image, App Card, Player Card), I chose the Summary Card because of its simplicity. Following is the process of adding the Summary Card to your Jekyll site:

1) Understand the structure of your site

Summary Card allows the users to preview the site content within a tweet. In order for Twitter Cards to support your site, you must have three parameters in your site: title, description and image. Twitter Cards will use that information to create a unique card for your links. title, description and url can be either added in _config.yml or in the YAML Front Matter block of your blog posts. The relevant parts in my _config.yml looks like following:

title:               Danyal Zia
description:         "Danyal Zia's thoughts on software development, personal development and writing."
avatar:                 media/images/danyal-zia-avatar.png

Relevant parts in the YAML Front Matter block of my blog posts:

title: 5 ways to motivate yourself
description: The guide to develop your self-motivation
thumbnail: /media/images/motivation.jpg

2) Add the Twitter Cards snippet

As you are using Jekyll like me for your blogging/website needs, the simplest way to add Twitter Cards to your site is to find head.hml in your _includes folder and add the code snippets of Twitter Summary Cards under . The basic HTML meta tags that Twitter provides looks like the following:

You can manually add your title, description and image, but we can use liquid syntax to automatically scrap the objects from our Jekyll blog. My complete code looks like the following:

Here, I chose Twitter handle for both site and creator. If it’s a blog post, then the title would be the name of the blog post, otherwise it will be the name of the blog (i.e., Danyal Zia). Similar logic has been applied for url, description and image.

Instead of adding the code in head.html, I created a new file twittercards.html, copied the code in it, and included in my head.html.

3) Validate your links for Twitter Cards

Now, once you have added the code in your head.html, you need to update the source trunk of your Jekyll blog and validate your links from here. This will also add your site in the white-list for the future validation.



In this blog post, I have provided the information on Adding the Twitter Cards to Jekyll and how it can be used to optimize the sharing of your blog posts. If you have any questions, then ask in the comments section below.

My experience with learning SQL

learning sql

Sharing my experiences and initial impression on learning SQL.

Today, I finished the third class of SQL (about its syntax and Microsoft SQL Server) in my university, where we have been taught about SQL Joins (Inner Joins, Outer Joines, etc.) and Subqueries.

Even though, it was my first time learning SQL and its actual Queries (the first two classes were introductory classes and thus were boring for me), it convinced me enough that learning SQL isn’t too hard for newbies compared to general purpose programming languages like C/C++, Java, etc.

My conviction was further increased when I read about it on the internet. So, I am going to highlight the reasons on why learning SQL seem easy to me.

My experience with learning SQL

I came to this conclusion for the following reasons:

1) Separation of church and state

RDBMS is separated from SQL; you do not need to learn about the inner details of RDBMS in order to learn SQL. Most SQL code is portable across different RDBMS.

2) Writing SQL queries is similar to writing pseudo-code

SQL is very declarative unlike most procedural programming languages (C/C++, Java, etc.). You can just throw a bunch of keywords and expect good things to happen! Consider the following SQL query:

It’s pretty obvious from the code that we are asking for a table with name of Customers who lives in America.

3) Tables are ubiquitous

You can play with predefined tables; you do not need to learn about tables / schemas and their different formats. Most RDBMS also supports reading / writing Microsoft Excel files.


Overall, I find SQL very easy to learn because of its eloquent syntax, although I felt a bit lack of intuition in its syntax considering it was initially developed in the 70s. I will be updating on my journey to learn SQL, so stay tuned!

Usefulness of constexpr in C++14


The new standard of C++, that was formally called C++1y has been released for preview in the mid-August of 2014. It took some time for the standardization. Clang and g++ already implemented most of its features at the time with Clang claiming to be 100% feature-complete. For the new users of C++11, it merely enhances some aspects that were either oversight or voluntary left out for the future revisions.

One of many things that C++11 introduced is the inclusion of [compile-time function evaluation CTFE in the core language through the use of constexpr keyword. It is noted that we have already seen CTFE in D programming language — a language that is highly influenced by C++, through which with small intuition, we can evaluate lots of things at compile-time. While constexpr in C++ is arguably far less powerful than CTFE features found in D, it still provides some ways to evaluate various things at compile-time.

In C++11, not more than simple arithmetic with numbers or finding min/max values of int could be done with constexpr. C++14 improves upon it; it relaxes a lot of its restrictions, namely some iterations can now be done within a function without resorting to doing recursion for looping. We will see what can be done easily with C++14 that were previously cumbersome to be done with C++03/C++11. Although, I have mentioned about CTFE of Dlang, I won’t write about it in this post.

Variable initialization

In C++11, we couldn’t initialize variables in a constexpr function, which greatly limited its usefulness. With C++14, we can simply initialize how many variables we need, though we can’t use **static**, **thread_local** and **global** variables.

Conditional branch

We can now use If and else in constexpr functions, if they don’t have any extra return statement. Previously we had to use the short form of if/else to achieve the same effect.

Loops / Iterations

With C++14, we can write loop statements for iterations. This also includes range-based for loops. Previously, we had to use recursion to achieve the same effect.


C++’s compile-time evaluation features have a long way to come near Dlang’s CTFE, but they are arguably in the right direction. I have already seen its uses in new libraries. If you are using new constexpr features in your C++ library, then please tell me in the comments section!