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:



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! :)


3 comments:

  1. Cool blog site friend I'm about to suggest this to all my listing contacts.
    Social Media Marketing

    ReplyDelete
  2. Making it the least popular digital marketing channel.
    xenforo classifieds

    ReplyDelete
  3. The stuff in the blogs blows out my mind.
    Men Sex Toys

    ReplyDelete