~2 min read
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!
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 CMS's 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.
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.
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!
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!