Thought we’d drop a reminder with regards to adding our twitter summary card to Black Eyed Admin.
Firstly here’s the link to the official Twitter Cards Getting Started Guide where you can read all the bumph with regards to getting your card set up and running and it really doesn’t take that long at all.
What you’ll need to start with:
- Taking it as red that you’ve got a twitter account & access to the header of your web site!
- That said, now for the information that you wish your twitter summary card to share
- In other words the www address you want the link to open / visit
- Description / information about your link
- Your twitter handle / name
- Location of your image / where your image is hosted?
That’s all folks!
Just a quick heads up about the image that you’ve chosen to use.
Twitter states that the image size for your summary card should be 120px by 120px. (<– Thats’s the BEA logo image on the left)
When your twitter card image is actually used in the twitter summary card your image (on the left) will be resized to 120px by 90px.
So when your creating your image in whatever app your using (gimp / photoshop / whatever) size your image to 120px x 90px.
Then make the canvas of your image 120px x 120px centering your image in that canvas (That’s the BEA logo image on the right–>)
As you can see there’s not that much difference between the two images but the extra space at the top and bottom, created by centering your image in the canvass ensures that the top & bottom of your image is not cut off when twitter resizes your image for your newly created twitter summary card.
As I only want to use one twitter card for the whole site, i’ll be using the BEA logo. Suppose if you want to share specific images on different cards then you’ll need different images for each card on each individual page.
Principle is the same whether it be one or 21! Create your image and add the meta data to your desired page header. Don’t forget to read the bumph for more info about the various twitter cards available.
For the now, we’re using the twitter summary card and for sure there’s more than a few you can choose from that may meet your differing requirements on the twitter card types information page.
So here’s the meta data information that we used to create our twitter summary card.
Original Twitter Summary Card Code
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@flickr" /> <meta name="twitter:title" content="Small Island Developing States Photo Submission" /> <meta name="twitter:description" content="View the album on Flickr." /> <meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" /> <meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />
Black Eyed Admin Twitter Summary Card Code
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@blackeyedad" /> <meta name="twitter:title" content="Black Eyed Admin" /> <meta name="twitter:description" content="Black Eyed Admin Believes In A Can Do Approach www.blackeyedadmin.co.uk" /> <meta name="twitter:image" content="http://www.blackeyedadmin.co.uk/logos/bealogo1.jpg" /> <meta name="twitter:url" content="http://www.blackeyedadmin.co.uk/twitter-cards/" />
Tweak the original twitter summary card code to fit your wants and then copy the meta data code into the head section of your web page
Call To Mind – Untitled
Once you’ve added the meta data to the head section of your site, your going to want to test it out to have a look see at what your newly created twitter summary card looks like?
- Log into your twitter account
- Go to the Twitter Card Validator page
- Type in the www address where you placed your meta data in the card url
- Click on preview card