Skip to main content

Twitter Cards for Blogger

So, I’ve been seeing people with beautiful Twitter Cards in my Twitter Stream. They make it clear that there is a web page to visit and give a quick preview of what would be found. Something like the one below:
Screen Shot 2017-07-10 at 7.10.15 PM.png

I’ve been wondering how to get one of the cards to appear when I tweet out a link to my latest blog post.  Since I use Blogger, there is not a simple button to click to turn this on.  I had to find a way to paste new code into the HTML code of my blog.  It took some searching from multiple sites to get a completely functional.  This site though was quite helpful.  But, I’d like to walk you through my process and hopefully it helps a few out.

There are a few types of Twitter Cards.  Two that at most frequently see are the basic summary card and the summary card with large image.  Below you can see the layout of each, but realize that they both have the same content pieces.

This is going to look like a lot more work than it will actually be, I just really broke down the steps so that they’d be easier to follow. Ok, here we go.
Eventually, we will paste some code into your Blogger Site. But, first thing we need to do is turn on Descriptions for your site. This may already be done, but be sure to double check this. If not already set-up, we’ll need to do this. The numbered diagram below will help with that.

  1. Click on Settings
  2. Under Settings, click on Search Preferences
  3. In Description, be sure that Yes is selected
  4. In the Description Text Box, add a short summary of your site (150 characters maximum).
  5. To save your work, click Save Changes

As you saw in the Twitter Cards, a description will appear about your post will appear as a part of the card.  You’ll need to add this to each blog post as you make new posts otherwise the card won’t work. It’ll be quick and painless, though.

  1. Click on Search Description on the right hand menu.
  2. Add a brief description in the text box you’d like to appear on the Twitter Card.
  3. Click Done to save your changes

Now we’re going to actually add the little piece of code to your site. Before we actually add the lines of code, we’ll have you back up your layout.  That way if something really gets messed up for some reason, you can restore the previous version.

  1. Click on Theme from the left side menu
  2. In the upper right corner click Backup/Restore.  In the pop-up window click Download Theme. Then click Close. (If anything goes really wrong and your site doesn’t work, this is where you would upload that theme the restore it.)
  3. Once you’ve got your backup downloaded, click on Edit HTML

Finally we’re going to paste in a few lines of code.
Below are the lines we’ll be pasting in based on what type of card you want. So choose option 1 or option 2.  Note that there is only one change you’ll need to make and that is highlighted in red.  You’ll add the Twitter username you are associating the card with. For example, mine is @mo_physics.

Option 1: Basic Summary Card
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@yourtwitterusername' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<!-- end twitter card details -->

Option 2: Summary Card with Large Image
<!-- twitter card details -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@yourtwitterusername' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<!-- end twitter card details -->

Now where will you put this? Let me walk you through this too.

  1. We have to find the specific place we need to paste the code. It will be before a line of code that is </head>. To find that place, click inside the code box itself  and then hit control + F (or Command + F on Mac) to bring up the “Find bar”.  In that “find bar”, type in /head.
  2. That will show you exactly where </head> is in the code. Remember we are pasting our code in before </head>.
  3. Copy the lines of code above and paste them in before </head>. Remember to overwrite @yourtwitterusername to your Twitter username.
  4. Finally, hit Save Theme at the top of the page.

Ok, we should be good now.  So we’ll have to see if this worked. Once you’ve got a blog post that has a title, an image, and an added description, we can check it out. We’ll head to the Twitter Card Validator to check it out, so click here.

To check if it works, copy the address of the individual blog post (NOT your blog homepage) and paste it into the textbox. Then, click Preview Card. Hopefully all goes well, and you should see a preview of your card.

I’m not an HTML coder and I could do this by. So, good luck. So if you’re having issues, I might not be much help.  But, give it a try.

Popular posts from this blog

Waves of Innovation in Elmbrook Part 1

As a part of a graduate project, I am looking at innovations in education within my school district, Elmbrook Schools. I am specifically focusing on those looking to provide learners with more ownership over their own learning (a.k.a. personalizing learning). I've completed 4 interviews so far.  I had no intention of sharing them via this blog.  But, I think the stories and insights of these educators really are important for all.  They were vulnerable in a way that shows their passion for what they are undertaking.  They want the best for all learners not simply students, but educators who may hear their words.  So, please take the time to listen to their stories.  

In this video, Jeff Ortman a teacher in his 22nd year, discusses implementing strategies to give students ownership of their learning in his high school English classroom.  He discusses why he wanted to change his learning environment, his first steps to bring change, how choice and feedback are key to his classroom, a…

Can I Believe These Numbers?

Our union put out the results of a recent district survey.  The number of those who responded to the survey was low in comparison to the total number of certified staff. But the number and comments related to personalized learning struck me as troubling.

Based on this data, over half of the district staff polled are not onboard with the district's vision for personalized learning.  I would argue that not knowing the district vision for personalized learning is synonymous with not understanding what personalized learning is. The mission of the Elmbrook School Districtto inspire every student to think, to learn and to succeed.  By personalizing learning, we hope to achieve that mission.
I begin to question have we put the phrase before the meaning?  Have we thrown out this word without intention?  Have we made it to much of another thing to do rather than a method to achieve our shared vision.
These numbers shake me to the core.  After the recent presidential election, I realized I was…

How to Personalize Learning Part 3: Knowing How a Classroom Learns

Now, it may seem contradictory to state that teachers should create a classroom learner toolkit.  All individuals in our class have their own profile. We can’t simply design on blanket profile for the class.  That is very true.  That’s why Bray and McClaskey take a different approach to what a classroom learning toolkit looks like.  It is a 3-step process Class Learning Snapshot Preferences and Needs Class Learning Toolkit

Class Learning Snapshot In this model of designing tools for a whole classroom, the authors first recommend the teacher identify 4 learners who are diverse.  The Class Learning Snapshot records the specific strengths, talents, interests, and challenges of those four learners. If a teacher could meet the needs of these diverse learners through UDL, the needs of the other students in the class would probably be met.

Student Strengths, Talents, and Interests Challenges 1 It's easier for me to understand content when I am taught by a teacher and then am able to get informati…