Add Open Graph Protocol Markup to Any WordPress Theme

og

Rich objects in a social graphs

When you share a link on Facebook, an image from the link is shown, usually. Sometimes, no image is displayed, as if Facebook couldn’t find a suitable image at the URL.

Why?

Adding Open Graph protocol tags to your site will ensure that Facebook knows which image to use when someone shares a page on your website. Open Graph markup is similar to schema.org markup. Both allow you to define values for certain aspects of your website, as seen by other sites like Facebook, Twitter, and many other social media sites.

How?

There’s a couple of ways we can do this. You can use a plugin, like Open Graph Protocol Framework, or you can add Open Graph markup to your WordPress theme manually.

We’ll be covering how to add Open Graph markup to your theme manually. Especially useful for theme developers who want to build Open Graph protocol support into their themes.

The markup we’ll be adding can be seen in this GitHub gist:

Most of that should be pretty self-explanatory.

The og:type property is the only tag that needs explanation, as there’s only certain values that are valid. Most of the time, you’ll probably be setting the og:type property to article or website. A list of other Open Graph protocol object types can be found at the Open Graph protocol site.

The Code

Every Open Graph property will be set on-the-fly, depending on which post or page is being viewed or shared. To add the necessary markup, we need to use the add_action WordPress function inside your theme’s functions.php file. Here’s how I’ve been handing it:

Comments are open below, feel free to ask questions or tell me how wrong I am on one point or another. :)

HTML Boilerplate

HTML5_Logo_512

I’ve been using this for a boilerplate lately, it’s pretty nice, and not all that different from the piece of HTML I’ve had saved on Dropbox for the last 10 years.

It provides a bare, standards-compliant starting point for your websites, giving you just enough to get started, making it easy to add your own stuff in.

It’s available under the MIT license, which is GPL compatible, and can be downloaded from GitHub.

There are a few things you may want to customize before you start writing a bunch of content, though. This is taken straight from the README on GitHub. Take these points into consideration, especially page titles, css includes, and javascript includes.

  • Document’s language
  • Meta description
  • Title
  • Favicon file
  • CSS includes
  • Javascript includes

Poll: Which Language?

languages

Just an unscientific poll of Hacker News and Designer News users (mostly)

Choose your favorite 3:

View Results

Loading ... Loading ...

Results will always be publicly available. This is more of a practice simply to help me gauge where I should go from PHP and JavaScript. Golang is enticing and is currently what I’m leaning towards.

Hacker News thread, and Designer News thread.

Sticky Alerts: A New, Tiny jQuery Plugin

jquery-sticky-alert

A super tiny sticky alerts plugin

Why?

Just because. Sticky Alerts can be downloaded here, and a demo can be seen here.

This pen from Thommy Browne caught my eye. The sticky alert bar was made with some very simple jquery and a bit of CSS.

I’ve been quickly increasing my JavaScript knowledge and figured I’d try creating a legit jQuery plugin, using the code from Thommy Browne. After a couple hours of tinkering, I had it! I was really surprised how easy it is to create a jQuery plugin, even adding options to plugins is crazy easy.

So, if nothing else, this was simply an exercise in creating a jQuery plugin.

Get It

You can see the plugin in action at http://sticky.longren.io/, which is hosted on GitHub Pages. The plugin itself can be downloaded from GitHub. The JavaScript is incredibly small, a total of 36 lines, which could easily be condensed into about 5 lines.

jQuery Sticky Alerts is available under the MIT license and is free for use on personal or even commercial projects.

Using the plugin is extremely easy. Just define the container you want the alert to sit in, make sure jQuery and jquery.stickyalerts.js (and jquery.stickyalerts.css) is loaded, define some options, and you’re set!

You can see usage instructions at the GitHub project page. Below are the options in use on the demo page:

Provide Feedback

I’m new to building jQuery plugins, so let me know if I’ve made any errors or if you see anything I could be doing better (I want to learn!!). You can leave a comment on this post or create an issue at GitHub. Pull requests are also welcome! :)

If you decide to use Sticky Alerts in a project, I’d love to know about it! Just drop a link in the comments.

Flat Shadow jQuery Plugin

flat-shadow

I really dig this Flat Shadow jQuery plugin. You can find a demo here. It can be found on GitHub, too.

Saw this on DesignerNews earlier today and knew I’d have a use for it. Will probably use it to replace the image on the Work With Me page.

The plugin was originally released in August of 2013. It hasn’t seen much for updates, the most recent was in January 2014 and was a simple change to the README to include a license.

Searched on codepen.io quick to see if I could find anything using this plugin. One pen, Long Shadow Icon Prototype, looks to be using the plugin. It was created about the same time that the plugin was pushed to GitHub.

I haven’t used this yet, but the demo is super simple and looks really easy to use. Looking forward to playing around with it.

Detailed usage instructions and other customization options can be found on GitHub.