Developing and stuff: Add Twitter cards to your Rails site with metamagic

Lately I've been working on adding support for Twitter Cards to the Ztory website. Basically it's just a bunch of metatags that need to be added to your page, so that the next time you tweet with a link to your site you get something like this:

Just implemented the @twitterapi cards on @ztoryapp, let's see if they work! https://t.co/3vboLbaW0f
— Miguel Parramon (@mparramon) July 16, 2014

However, there were some tricky parts in the process, so I want to document my efforts here, as a small how-to guide.

To add the card you see above to our site, I used the twitter documentation for the large image summary card, and I also added some metatags mentioned on the markup reference, which can be used on all twitter cards (twitter:site, twitter:app:id and twitter:app:url ).

Doing this with the metamagic gem is very simple, after adding it to my Gemfile, I just needed to add the following to app/views/magazines/show.html.erb, for the magazine-specific metatags:

<%
twitter card: 'summary_large_image',
          description: magazine.description,
          image: magazine.latest_issue..image_url,
          title: magazine.name,
          app: {
            url: {
              iphone: "ztory://view/magazines?magazine_id=#{magazine.id}",
              ipad: "ztory://view/magazines?magazine_id=#{magazine.id}",
              googleplay: "ztory://view/magazines?magazine_id=#{magazine.id}"
            }
          }
%>

And then the following on the <head> section of my layout, for the metatags that will be shared on all pages:

<%
  twitter site: '@ztoryapp'
          app: {
            id: {
              iphone: '647302038',
              ipad: '647302038',
              googleplay: 'com.ztory.main'
            },
            country: 'se'
          }
%>
<%= metamagic %>

(Be sure that you add the metamagic call *after* the calls to the twitter method, or else it won't work. I spent a good 20 minutes on this :P)

After making sure that the metatags were being rendered properly, I deployed and headed to the Twitter Card Validator page. There, I inputted my URL with the card metadata, checked that the metatags were correct, and submitted the domain for validation:

Twitter said that it could take a couple of weeks to get an answer, but thankfully I got one in just a few minutes :D

After that, I tried making a test tweet, and everything worked perfectly! The best part of it, is that if you check the tweet on your mobile device, you can click a button to open that magazine in the Ztory app directly:

Hope it works for you as well as it did for me! :)

Add Twitter cards to your Rails site with metamagic

3 comments: