In my line of work Facebook is a necessary evil. I say evil because it sucks tying to work with them. They constantly change their platform but don’t update the documentation. There’s zero customer support for when you want to get something *fixed*. Yes, they offer their service for free (bombarded with ads) so there’s a bit of you get what you pay for in that, but we (developers) are creating content/apps/games/etc. to keep users on their site so they can continue to make money. The lest they could do is offer us an avenue to get tech help when we need it. Even if I had to pay a subscription or something, I’d do that instead of combing the Internet looking for answers when things go awry.
OK, rant over, on to one of the tools for developers that anyone (not just a developer) can use. This one is all about sharing (sharing is fun, right?). You make a web page/site and you want to let people share it. The only thing is, Facebook is going to grab random pieces of information (or is it? More on that later) to show when sharing. How do you know what it’s going to show to users?
Easy, use the Facebook Debug Tool (formally, Linter).
This tool will show you what the share title, description, image, and other items that it will use to share your page to the Facebook world. So you can see if there’s something not right. For example, I just used the tool on my home page. See the screen shot below:
That clearly shows that if someone tries to share my home page, the thumbnail will be of a smiley emoticon. Oops! I’d better define what image I want it to show.
Luckily, my site is specifically setting the other tags that Facebook requires. Oh, and if you read my post on My Essential Woodpress Plugins, Jetpack is doing that for me automatically. Boom! Love Jetpack.
What are the tags that you need to put on your page to tell Facebook to show the right content? Easy:
|
1 2 3 4 5 6 |
<meta property="og:image" content="http://illusionmedia.com/wp-content/uploads/2013/05/im_with_writing.jpg" /> <meta property="og:type" content="blog" /> <meta property="og:title" content="illusionmedia.com" /> <meta property="og:description" content="Specializing in custom web application development, internet development, graphic design, consulting, social media consulting and more!" /> <meta property="og:url" content="http://illusionmedia.com/" /> <meta property="og:site_name" content="illusionmedia.com" /> |
You see that I added the og:image tag there to fix my image problem. Now if I reload the Facebook Debug Tool I get this:
Much better, right? So make sure to use those tags so you’ll have control over what Facebook is going to show when someone shares your page(s). Also, a bit of advice, check this share link BEFORE you post/publish your page. We had a situation at work where we needed to change the description and even though we set the correct tags, Facebook cached the page and wouldn’t refresh to take the new changes. The correct changes showed in the debug tool, but when someone went to share the link, the old information was still there. Thanks Facebook… stay classy.
Bonus Handy Facebook Tool
Here’s another one you might need at some point. Facebook likes to tell you to use your Facebook id for a lot of things when you’re a developer. Only, it’s kind of difficult to find the place to actually get your Facebook id. Keep this link handy: Graph API Explorer. When you hit that URL it will tell you what your Facebook id is. That tool is used for a lot of other things like testing the graph api and other queries, but it’s a good place to quickly get that id.
Hopefully this will help you a bit in the vast jungle that is developing for Facebook (until they decide to change their platform again).
{ 0 comments }