Running a website is hard, especially when it comes to supporting social networks. I learned the hard way when I started building my own website on GitHub Pages that doing the work yourself (especially with a static site generator) isn’t easy. I realized my website needed social tags on the very small chance that anyone ever wanted to share something from my website on Facebook or Twitter.
Adding Facebook support can be tough when you’re troubleshooting it all yourself and don’t have the benefits of a more complex system. If you’re running your own site, adding Facebook and Twitter support to your site’s pages can be tough. Here’s how to do it.
How to Add Facebook and Twitter Support to Any Website
The meta tags
Facebook and Twitter turn URLs into rich objects for sharing on social media by analyzing properties on a website. It expects you to add these properties to make sharing easier for their scraper bots.
You can add support for Facebook and Twitter’s scraper bots by adding
<meta name="tag" content="tag data">
tags to every page. Hopefully you have a way to automate this, like I set up with Jekyll.
Twitter tags
Twitter’s tags are actually easier to use than Facebook’s OpenGraph weirdness, so here’s an easy way to create a neat-looking card whenever someone includes a link to your content on Twitter.
We recommend looking at Twitter’s helpful developer guidelines for all card content, especially this list of meta properties. Familiarize yourself with these and start adding them to your site.
To get started, you’ll need a Twitter account. Use @your_username to fill in the twitter:site and twitter:creator properties.
For my website, I used Jekyll to automatically fill in the description, title and image from within the article. For example, posting a news article as a card would require:
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="title">
<meta name="twitter:description" content="description">
Filling in the generics where appropriate.
Once that’s all done, you can test it by visiting Twitter’s Cards Validator. It’ll show you what your link will look like as a card when users are (hopefully) sharing it).
Posting to Facebook
Wrangling Facebook’s OpenGraph tags is trickier. Whatever scraper bot they use over there is the pickiest, most persnickety piece of software ever written. Sharing good-looking content on Facebook means jumping through a lot of hoops.
First, you’ll need a Facebook account and an App ID. If you don’t have an ID, sign up. You’ll also want to follow Facebook’s start guide to get your website registered and set up.
OpenGraph has a simple interface that works much the same way as Twitter’s does. Add content and assign it to a meta tag, in this case ones that start with “og:”.
Add in the tags like usual, but be sure to do it the Facebook way. og:images should be large and preferably landscape or Facebook will crop it smaller.
Warning: Facebook requires all images to be stored on some kind of subdomain. If you try to link an image through an og:image tag and it’s stored on http://domain.com, that will not work.
This drove me crazy until I figured out that storing the image on http://www.domain.com does work. Make sure you’re on at least one subdomain, even if it’s www.
Facebook’s Debugger is tremendously helpful here. Just be sure not to use it too much or it will ban your domain for spam.
For my site’s articles, Facebook wanted these tags:
og:title
og:url
og:image
og:description
og:site_name
og:locale
fb:admins (admin id)
fb:app_id
The last two you can find by signing up for a developer account.
Final Thoughts
Creating a social-friendly website was much harder than I expected. It’s not easy to create something that plays nicely with Facebook and Twitter. However, if you want to bring in traffic, that’s exactly what your users will expect- a fast, modern, social-friendly website they can share easily.
