If you have a site with dynamic pages that you want people to be able to share via Twitter, you don't want to repeat yourself - especially if you are trying to follow the Don't Repeat Yourself (DRY) programming methodology. To that end, you are likely populating variables from your underlying data source to display content on the page. What follows is how I programmatically populated Twitter Card information using .Net 6 and Razor Pages. A similar process could likely be followed with other programming frameworks.
A few things to get started.
What follows is not a complete solution. Rather, it highlights the requisite pieces that I used within my project to accomplish the task of populating the Twitter Card. These are items from a blog engine I created and is in use in this blog that you are reading.
Model items
The following items are a part of the blog post model:
public string Title { get; set; } = string.Empty;public string MetaDescription { get; set; } = string.Empty;public string FeatureImagePath { get; set; } = string.Empty; public string FeatureImageAltText { get; set; } = string.Empty;public string UrlSlug { get; set; } = string.Empty;
ViewData items
These are items that are used to populate variables:
ViewData["Twitter"] = "@mswhiteco";
This is hard-coded and used for other Twitter-specific items. For my purposes, it works to be hard coded but it could be programmatically populated with some adjustments.
ViewData["Canonical"] = "https://www.mswhite.com/blog/" + item.UrlSlug;ViewData["Title"] = @Html.DisplayFor(model => item.Title);ViewData["Image"] = "https://www.mswhite.com" + item.FeatureImagePath;
Twitter-specific Meta Items
There are <meta> items that need to be added to the <head> section that direct Twitter what to do. See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image for more information about the markup.
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@ViewData["Twitter"]"><meta name="twitter:creator" content="@ViewData["Twitter"]">
In this particular implementation, I do not use the following tags explicitly:
Twitter:imageTwitter:image:alt
Instead, I have the following Open Graph properties in <head> section that Twitter will use. Since I already have these tags, I don't repeat the Twitter versions (DRY).
<meta property="og:image" content="@ViewData["Image"]" /> <meta property="og:image:alt" content="@Html.DisplayFor(model => item.FeatureImageAltText)" /><meta property="og:description" content="@Html.DisplayFor(model => item.MetaDescription)" /><meta property="og:title" content="@Html.DisplayFor(model => item.Title)" />
A DRY Caveat
In the <head> section, there is an og:type property in addition to the twitter:card property. This is so Twitter will use the summary_large_image content type.
Populating Variables
When a blog post page is called, most of the variables are populated via the underlying PageModel. Some variables are used in places where I haven't used code to cycle through the PageModel to get data - namely as a part of the tweet button. In these instances, I added the ViewData items noted above.
The Tweet button
Following the documentation at https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview I created this Tweet button:
<a href="https://twitter.com/intent/tweet?url=@ViewData["Canonical"]&text=@ViewData["Title"]"
class="bi bi-twitter text-primary fs-3" >
<small class="d-none">Tweet this post</small>
</a>
Breaking the button down...
The first part of the href up to the first query string parameter points to Twitter. The 'url' and 'text' parameters tell Twitter what URL and text, respectively, to share in the tweet. Rather than using Twitter's own button and to match other buttons on the page, I use the Bootstrap Icons Twitter icon in the class property. For accessibility purposes, I include the text within the <small> tag to describe the link.
When a site visitor clicks the Twitter icon, it produces a tweet similar to this:
Validate
You can visit https://cards-dev.twitter.com/validator to validate your setup.
In Summary
This, in a nutshell, illustrates how I populated variables with data that comes from a data source to feed the information that gets put in a tweet. There are other share buttons that use similar variables. Additionally, some of these variables and others are used for SEO purposes from on-page items to populating of the sitemap.xml and RSS feed data. And, an added bonus is that I only have one 'page' that is used to display the content of each post.
–Michael.