How Publizjr2 supports Twitter Cards Out of the Box - ΩJr. Publizjr Creates Web PagesChoose how Twitter displays links to your web pages with built-in support for Twitter Cards in Publizjr, the web page publication system.
This information applies to Publizjr 2.
Adding Twitter Card support in the original Publizjr was quite the hassle. Every web site wound up with their own implementation. We are proud to announce that we have added native support for Twitter Cards into the default Publizjr Page Generator templates, as well as into the programming class objects that drive them.
At the top we see the actual tweet by the @FailureNotes Twitter account. In that tweet we see the hyperlink to the web page in blue. Beneath it we see the Twitter Card. We explain its structure below:
Right underneath the tweet we see the name of the FailureNotes Twitter Account again, and also a miniature of its Twitter logo: that is because the web page specified this account as its official Twitter account. In Publizjr, you can set this per template in the following manner:
(We decided to make this a section-wide choice rather than a page-specific one.)
The Linked Web Page Title
Underneath that, we see the title of the linked web page. It just happens to be the same as the text of the tweet, and though that is smart because that way your link fulfills its promise to your visitors, it is not necessary. Instead, a Publizjr 2 template automatically takes your web page title and tells Twitter to use it as the title of the Twitter Card. (No, for some reason Twitter does not take the actual page title: they require that extra specification.)
The Linked Web Page Description
The title is followed by the description. Again, Twitter does not assume your web page's description should be used, so a Publizjr 2 template takes your web page's description and tells Twitter to use it as the Twitter Card's description.
The View On Web Button
We have seen Twitter show this button in various ways, including a mention of the linked site's name. We have yet to investigate whether or not we are able to influence this button.
The Twitter Card Image
And finally the Twitter Card displays an image. Twitter specifies how large this should be. We advise an image at least 256px square (on a 1:1 ratio), in 24-bit PNG format.
Twitter's various apps, clients, and web site versions show this image in an ever-changing variety of ways. In the above example the image is showed with a 7:5 ratio. Please keep up with Twitter's own specifications.
Publizjr 2 has a function built in that detects which image to show for your web page. It is called readTwImage().
First, it looks in the language-specific sub folder for your web page. Then it looks in the web page folder itself. After that, it looks in the section folder (where the template is located). And finally, it checks for a default image that probably is missing from your website.
The function takes the first image it finds and tells Twitter to use that one as the Twitter Card Image.
You can do this by adding a new text file named “twCardType” into the web page's folder, and in that, write the desired card type. Currently Twitter limits your choice to app, gallery, player, photo, summary, and video. It defaults to “summary”.
We have yet to experiment with these features to decide whether or not we will build in native support for these other card types. If you have a need for them and are using Publizjr 2, please contact us.
What is a Twitter Card?
Twitter Cards come in a variety of forms. The most-seen one is the Summary Card: it shows your web page's title, description, an image of your choosing, and in some cases also a link to your Twitter account, for verification.Example Twitter Summary Card
The below image shows a Twitter Summary Card:At the top we see the actual tweet by the @FailureNotes Twitter account. In that tweet we see the hyperlink to the web page in blue. Beneath it we see the Twitter Card. We explain its structure below:
Anatomy of a Twitter Summary Card
The Twitter Account NameRight underneath the tweet we see the name of the FailureNotes Twitter Account again, and also a miniature of its Twitter logo: that is because the web page specified this account as its official Twitter account. In Publizjr, you can set this per template in the following manner:
<meta property="twitter:site" name="twitter:site" content="@FailureNotes">(We decided to make this a section-wide choice rather than a page-specific one.)
The Linked Web Page Title
Underneath that, we see the title of the linked web page. It just happens to be the same as the text of the tweet, and though that is smart because that way your link fulfills its promise to your visitors, it is not necessary. Instead, a Publizjr 2 template automatically takes your web page title and tells Twitter to use it as the title of the Twitter Card. (No, for some reason Twitter does not take the actual page title: they require that extra specification.)
The Linked Web Page Description
The title is followed by the description. Again, Twitter does not assume your web page's description should be used, so a Publizjr 2 template takes your web page's description and tells Twitter to use it as the Twitter Card's description.
The View On Web Button
We have seen Twitter show this button in various ways, including a mention of the linked site's name. We have yet to investigate whether or not we are able to influence this button.
The Twitter Card Image
And finally the Twitter Card displays an image. Twitter specifies how large this should be. We advise an image at least 256px square (on a 1:1 ratio), in 24-bit PNG format.
Twitter's various apps, clients, and web site versions show this image in an ever-changing variety of ways. In the above example the image is showed with a 7:5 ratio. Please keep up with Twitter's own specifications.
Publizjr 2 has a function built in that detects which image to show for your web page. It is called readTwImage().
First, it looks in the language-specific sub folder for your web page. Then it looks in the web page folder itself. After that, it looks in the section folder (where the template is located). And finally, it checks for a default image that probably is missing from your website.
The function takes the first image it finds and tells Twitter to use that one as the Twitter Card Image.
Twitter Card Type
Twitter allows for several other card types, besides Summary Card. We chose not to implement those out of the box. What we did do, however, is let you specify what card type Twitter should show for a specific web page.You can do this by adding a new text file named “twCardType” into the web page's folder, and in that, write the desired card type. Currently Twitter limits your choice to app, gallery, player, photo, summary, and video. It defaults to “summary”.
We have yet to experiment with these features to decide whether or not we will build in native support for these other card types. If you have a need for them and are using Publizjr 2, please contact us.
Interested?
Let's meet for coffee or over lunch. Talk to me using this form.