Using OpenGraph to get the right image on Facebook
To drive traffic to your website from Facebook, you copy/paste your website address into the status line, and voila! Facebook puts a picture and a description. But wait, that's the wrong picture! Here's the OpenGraph way to fix that.
Facebook visits the page and first looks for OpenGraph content. In a nutshell, OpenGraph is a standard way of describing objects on the web. If it finds the OpenGraph descriptions, it uses them; if not, it does other stuff. While the details don't matter, the result is it somehow manages to pick the one picture on the page that you don't want!
Step 1: add some open graph code. You can google OpenGraph and you'll get a very long tutorial with lots of great info, but the quick and dirty is this: add these lines to the header of your page:
How do you add them to a DNN page? Logged in with enough permissions, click the blue [Edit Page] button on the top control bar and then click Page Settings (in version 7+; in v6+, goto the page menu in the top control bar and click Page Settings)
Look for the text box that's labeled "Add to Page Header" and add those lines into the box. Of course, change the content to match your own website name, URL and some image on your website. The image doesn't have to be on the page by the way. In my case, I grabbed a screen shot of the page and shrank it down and uploaded it to the site via DNN's File Manager.
Step 2: tell Facebook about it.
Facebook likely remembers what it served up last time, so you need to ask it to go look again. Here's how.
Visit https://developers.facebook.com/tools/debug/og/object/
It's been a while since I've been doing things on the developer section, so it may have changed, but I believe it'll ask you to create a developer account if you've not done it, but it's free and relatively easy to do.
The page I just sent you to has an address form at the top. Put your URL in there. If you [Show existing scrape information] you'll see what exactly Facebook found before. If you're in a hurry, click [Fetch new scrape information]. Now look down the page and confirm that Facebook found the image you specified in that og:image tag. Did it? You're good to go.
Jump over to you Facebook page and paste that same URL into the status line. Facebook should serve up the correct picture.
Was this helpful? Please let me know.
Don Gingold
Co-Founder and Managing Director of Sprocket Websites, Inc.; Co-Founder Chicago Area DotNetNuke User Group
Other posts by Don Gingold