How to achieve Elegant Twitter Cards

Help
1

I have a question regarding the twitter cards. I did find a similar post [SOLVED] Twitter Cards for links which discussed the same thing. I read it, but it seems the last post there mentions this is now supported, I just don’t get why it looks different.

My question is this, when I posted the URL to my blog post on twitter, it looked like this:

IMG_2182
IMG_2182908×500 98.2 KB

But how can I get it to look much better like this:

IMG_2181
IMG_2181875×975 282 KB

Is this something that is supported in the platform or is this something that we have to code ourselves?

I was doing some googling and found this post https://www.quora.com/How-do-you-tweet-links-without-having-the-link-in-your-tweet which talks about the site itself has to be coded for twitter.

2 Likes
2

After some reading around the internet including the Twitter Developer API, I was able to figure out what needs to be done in order to have the different styles of Twitter Cards.

My issue now is how to accomplish that on Write.as because the change I need to make is in the <head> tag.

I tried using the JS approach to replace the tag, but it doesn’t seem to be doing anything:

var b = document.querySelector('meta[name="twitter:card"]');
if (b) {
    b.setAttribute('content', 'summary_large_image');
}

I’m wondering if the code does not work in this case because what I am trying to change is a meta property in the <head> tag versus something in the <body> tag.

3

I think you’re right @digorsink — I put a variation of your code onto my blog and saw the changes reflected in the <head>. But when I sent a post over to Twitter, it didn’t use the _summary_large_image card. My thinking is that this is something on the platform level rather than something that can be changed with Custom JavaScript. Would be curious about @matt’s take on this too.

4

Yeah, I’m thinking it may have to do something with the way pages are usually rendered. Typically the head tag is processed before the body tag as it should. That is why it is called head. So in theory Twitter is already pulling in the head tag meta data before the body even loads (in-fact, Twitter api may not even be looking at the body)…meanwhile the JS script I added is most likely being processed when the body loads which allows it to be ignored by twitter. So it would have to be done at the platform level to have that twitter attribute in there as a static value instead of trying to do it dynamically.

1 Like
5

I was thinking through how this could be implemented if Matt decides to add it to the platform.

  1. Maybe just make it an option in the"Customize" dashboard for us to choose what type of Twitter Card style layout we want for our site. Then it can just update the head tag accordingly.
  2. If you do implement this, pls update the <meta name="twitter:title" /> tag not to have the “mdash” and domain name appended to the end. This is because it becomes redundant since Twitter by default adds the domain name on the second row of the twitter card as you can see in the original screenshots. I know it’s a small detail, but it adds just extra touch.
6

Wish I had seen this before spending the time to try it myself! Probably for speed, Twitter doesn’t bother loading any more than it needs to, so any scripts wouldn’t even get run or loaded.

I opened a PR to fix this, but this is my first foray into the writefreely code so not sure if this is the best way it just seemed pretty straightforward.

Edit: Looks like this was merged and deployed!

1 Like