back to top
shopping basket

View your basket

Stretched Canvas Print

What our customers are saying:

Many thanks for your help and excellent service, I will be sending you some more slides.

Read more...

Make Your Posts Stand Out On Social Media

Make Your Posts Stand Out On Social Media

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 12 March 2015

If you add a link to a post on Facebook, you might have noticed that it will often add a small preview of the page linked to, below your text. The same is the case in Google+ and to a lesser extent in Twitter. Have you ever seen those previews and wanted to have some control over what is presented?

Well, thanks to Facebook's Open Graph mark up and what Twitter calls, "Twitter Cards," you can. And all it takes is a few lines of code between the <head> and </head> tags on the relevant webpage. Were you to share this blog post to Twitter, Facebook or Google+, it would be presented on the page in a similar fashion as the example from last week's blog post, shown above.

Adding the code below to the head of any webpage will achieve this effect. It doesn't matter if the page you want sharing isn't a blog post, just change the relevant parts to match the page you do want sharing.

<title>Blog Post Title</title><!-- max 60 characters -->

<meta name="Description" content="First 160(max) characters of the article"><!-- Max 160 characters -->

<meta property="og:type" content="article">

<meta property="og:title" content="Blog Post Title">

<meta property="og:url" content="http://yourdomain.co.uk/blog-post-title">

<meta property="og:description" content="First 250(ish) charcters of article, followed by ..."><!-- Approx 250 characters -->

<!-- Important note: for punctuation in the og:description, follow guidelines at http://www.w3schools.com/charsets/ref_html_ansi.asp (apostrophes are, for example: &#039;)-->

<meta property="article:published_time" content="YYYY-MM-DD">

<meta property="og:site_name" content="Your Domain">

<meta property="og:image" content="http://yourdomain.co.uk/images/blog-post-title.JPG">

<!-- Begin Twitter Card -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@yourtwitterhandle">

<meta name="twitter:title" content="Blog Post Title">

<meta name="twitter:description" content="First 250(ish) charcters of article, followed by ..."><!-- Approx 250 characters -->

<!-- Important note: for punctuation in the twitter:description, follow guidelines at http://www.w3schools.com/charsets/ref_html_ansi.asp (apostrophes are, for example: &#039;)-->

<meta name="twitter:image" content="http://yourdomain.co.uk/images/blog-post-title.JPG">

<meta name="twitter:url" content="http://yourdomain.co.uk/blog-post-title">

<!-- End Twitter Card -->

... and the parts I have left as comments, don't need including when you upload your finished page, they're just there for guidance.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more