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.

5 ways to motivate yourself


Many of us lacks the determination to achieve our goals or finish our plans with single-mindedness due to the lack of motivation or drive, while some of us are scatterbrained with a bunch of ideas, but are unable to set the goals. Chances are you’re one of those people, or perhaps you want to further increase your fluctuated motivation level.

Understanding yourself is the first step towards the self-improvement. The knowledge you gain from the others can help you understand about yourself and your weakness, and how to use your strength to overcome your weakness. For whatever reasons you are suffering from low motivation, following the 5 ways presented below might help you in boosting your motivation level:

1) Create a list of reasons for your goals

When you have a goal, then there is a high probably that you have reasons behind it. Write the every reason you know that you need to achieve your goals, i.e., what will you achieve with your goals, what motivated you to achieve your goals in the first place, etc. When you feel less motivation or get the negative thoughts, read the list again and again. You must convert your negative thoughts, and replace them with positive ones in order to have a clear picture of what the future will look like once you accomplish your goals. Research shows that positive reaffirmation helps programming your mind for the better outcome. You can even create notes about yourself to understand when your motivation sucks to see the pattern.

2) Break your goal into baby steps

You get a burst of ideas to achieve your goal, but you are not confident about it, because there are so many steps that come to your mind, then the old ideas get vanished and you get new ideas, this endless loop continues and you lose motivation. In order to efficiently achieve your goal, you must break it into baby steps and follow them thoroughly. Keep tracking the progress of your projects. If you keep a journal, then write the steps down and stick with them. Doing this way, you can even ask the help from other people to complete some of your steps, so that you can achieve your goals earlier than the predicted time.

3) Prepare ahead for the bad feelings

You must make the realistic expectations and set the logical steps for your goals. You must see the possibilities from every perspective before setting your goals. If you don’t prepare for the odds or the bad feelings, then you will become self-absorbed, self-hating, and thus lose the motivation to achieve your goals. You must understand that the lack of motivation you feel now won’t last long unless you make yourself immersed in the feelings. You must learn to replace procrastination with the willpower in order to complete the project with determination.

4) Listen to the motivational music

Listening to up-beat and loud music can really boost your motivational level. In particular, people with high musical intelligence tends to be inspired and motivated after they listen to their favorite music. Music can also help you in stabilizing your mood. Always listen to the music with optimistic lyrics if you want to reduce the pessimism and cynicism in your life.

5) Do the things your own way

If the traditional approach towards improving your motivation doesn’t work, then you shouldn’t worry about it, as not every person is the same. The best you can do is to study yourself, and try to analyze the situation when you get the motivation. Try to recreate that feeling to get motivation when needed. Perhaps, you might have an ADD? In that case, the psychiatrist can help you overcome your lack of focus.

Final Thoughts

Whatever road you take towards increasing your motivation, remember the life is too short for the procrastination. If you can overcome your procrastination when you must focus on your goal, then you’ve won the great war of the human misery. Procrastination has the capability to kill your dreams; do not let it control you!