Social Media Thumbmail fix

Problem: Thumbnail from default schoolwires template was rendering instead of an image from our site. 

Schoolwires response:  

Hi Leslie,

Adam let me know you were looking for an update on this; my apologies for the delay in getting back to you.

Facebook (and other social media outlets) have their own logic when choosing what image to display for the posts that are added to your Facebook page.  I found a good article that somewhat explains the logic for Facebook - http://www.quora.com/How-does-Facebook-determine-which-images-to-show-as-thumbnails-when-posting-a-link.  There may also be information available from the Facebook Developers network on how to specify a particular image for your social media posts. 

I was able to locate information on how to specify a particular image be used for your Facebook posts.  I have added the code into the Head Content field in your Configure > System Settings > Template tab.  If you expand that field by clicking and dragging the lower right corner, then scrolling down to the bottom, you’ll see the following open graph meta code:

<meta property='og:image' content='http://www.uppercapetech.com/cms/lib8/MA01907801/Centricity/ModuleInstance/537/large/Bus.jpg?rnd=0.163450759445993'/>

The URL of the image was taken from your rotating homepage imagery, and should now be the default image used when posting links.  I tested this on my own Facebook page, and you can see that it chose the appropriate image (http://screencast.com/t/Cj3dU2xaD).  You can update that URL in the code above with any desired image URL.   To force Facebook to clear its cache, you can go to https://developers.facebook.com/tools/debug/, enter the URL of a page from your site that you would like to post, and click ‘Debug’.  Once the page loads, if the image displayed isn’t the image you added to the Head Content, click Fetch new scrape information’, and Facebook should empty its cache and bring in the new information.

I am unsure if this will affect your other media outlets, but I believe it should.  I found additional information regarding the open graph codes, and how they can be implemented (http://moz.com/blog/meta-data-templates-123).  These codes can be added to the Head Content field, just as the image above was.  Keep in mind that these will be applied to every page throughout the site, so they should be generic in regards to your school, not story-specific. 

I hope this information helps.  There is a large amount of additional information available, the information provided here from third-party sources is only the specific results that I located.  If there are any additional questions or concerns, please don’t hesitate to ask.