Embed Your Facebook Cover Photo On Any Static Website
Just a tiny bit of JavaScript and bam! Dynamic magic to keep your static site “updated”.
Update: this script no longer works as Facebook now requires an access token.
Why I Did It
My brother is a pro fisherman, that’s right, “pro” baby. He’s made quite a name for himself in the industry. Since I don’t know a thing about fishing, my way of supporting him has been making him look good online.
When I redesigned his site last spring, I made a point of keeping everything “dynamic”. Dynamic in a sense that when he added content to his Facebook, Youtube or Tumblr account, those changes would automatically be reflected on his site. One of my favorite features was mirroring his header image with his FB cover photo.
Check out the example at jessefishing.com
How It’s Done
So the process is this: we grab the Facebook cover photo using a simple call to Facebook’s open graph. Then, we use jQuery to parse the JSON file we receive and apply the image source to our CSS. Sounds simple right? It is. Here’s the breakdown.
The Code
First, you need to find your Facebook ID. The fastest way is to simply type in your username on findmyfacebookid.com. Simple.
Once you have your ID, simply paste it into this Facebook Open Graph url scheme.
http://graph.facebook.com/yourpageid?fields=cover
Next, we need to write some jQuery that will be used to parse the returned JSON code and apply the cover image to our CSS. To do that, simply place this snippet in your <head>.
This technique requires jQuery for parsing the JSON. Be sure to have it linked inside the <head> of your html.
And that’s it!
I used the div id #facebookCover. Feel free to change it to anything you want but make sure you reflect your changes both in this script and in your html/css.
Thanks for reading!
Show some <3 and hit RECOMMEND.
