Enable Twitter Cards and Open Graph in Blot.Im

I struggled for days on how to correctly enable Twitter Cards and Open Graph (aka Facebook) in my Blot.IM templates! Days!

The problem is now solved and I will share it here with fellow Blotsters. I have to give a big shouout to David from Blot, I couldn’t have solved it without his help!

##Why Twitter Cards and Open Graph?

Let’s be honest here, not many people create a blog or some sort of content just for it to sit hidden on the Internet. We all crave eyeballs’ and interaction from others for our awesome content! For that we have to share our missives using mostly Twitter and Facebook. Wordpress and other CMSs make this really easy out of the box via their fancy templates but Blot is a bit different.

Granted it’s an emerging awesome CMS and has some great advantages over the Wordpress bloat (see more here), it does require you to roll up your sleeves and do some simple hacking from time to time.

##Twitter Cards

I started out by wanting to implement Twitter Cards. If I could that working, then I’d move on to Facebook. As a baseline, I went to the Twitter Card Validator and checked a random blog post. It failed miserably!!! I really wanted to embed an image from the post itself into the Twitter card so I don’t get that lame grey icon. I wanted the twitter card to look like below for the this post.

##Twitter Card code in your Head file

The neat thing about Blot.Im is that you can hack the HTML files of your theme really easily. You can do it in the native editor Blot provides OR you can do it via importing the templates locally. I work locally because I like working in Sublime Text better than going to the website.

I first opened the head.html file and inspected added a new section called <—Twitter Code—>. Then after much trial and error, and with David’s help, figured out the right way hack in the mustache template code.

This works great as long as you have either one image in the body of the blog post. Next step was hacking for Facebook!

##Facebook Open Graph

Building on what I learned from above, merging in the Open Graph calls were quite easy.

There was one snag though, you need to get a FB API key to get this work. In the image above you can see where it goes. That’s it. Pretty simple if you know what you are doing!

Up next My Frenemies, the colon (:) and semicolon (;) This is a repost from my lost Posterous blog One of the most powerful and frustrating pieces of punctuation in my life is the colon (:) and Seven Writing Tips from Edgar Allan Poe I loved a lot of his short stories and his ability to write terror. Here are his 7 tips: Know the ending in advance, before you begin writing. Keep
Latest posts Revisiting GOOG, GE, NE, IYR from 2007 The Ye Old Blog List Motorola: Then and Now EWM Redux Testing for mean reversion with Python & developing simple VIX system - Talaikis unsorted - Tadas Talaikis Blog Steps to calculate centroids in cluster using K-means clustering algorithm - Data Science Central Basics of Statistical Mean Reversion Testing - QuantStart Algorithmic trading in less than 100 lines of Python code - O’Reilly Media Interpreting Machine Learning Models Microsoft the AI Powerhouse Investing in the S&P500 still beats AI Trading Microsoft makes a push to simplify machine learning | TechCrunch 10 Great Articles On Python Development — Hacker Noon Introduction to Keras Democratising Machine learning with H2O — Towards Data Science Getting started with Python datatable | Kaggle Phone Addiction Machine Learning Making Pesto Tastier 5 Dangerous Things You Should Let Your Kids Do The Pyschology of Writing Investing in 2019 and beyond TensorFlow and High Level APIs Driving Marketing Performance with H2O Driverless AI Machine Learning and Data Munging in H2O Driverless AI with datatable Making AI Happen Without Getting Fired Latest Musings from a Traveling Sales Engineer The Night before H2O World 2019 Why Forex Trading is Frustrating Functional Programming in Python Automatic Feature Engineering with Driverless AI Ray Dalio's Pure Alpha Fund