Connexions Adds Like and Tweet Buttons

Last week, we released the addition of Like and Tweet buttons to all Connexions content. I thought I would share some of the details of coding the change. When we first discussed adding the buttons, we all thought it was going to be a quick and easy addition. Just grab the button code off Twitter and Facebook, tweak it a bit and off we go. We were very wrong.

Facebook changed how they display links while we were in the middle of developing the change. They started pulling some of the content for a thumbnail of the text instead of just displaying the title. Because of the way we structure our content, Facebook was pulling the definition of a EPUB file that we have embedded for a help popup for every piece of content that was "liked". To get around this, we added the content summary or abstract to a META tag in the content header. There were some additional problems with embedded CNXML in some of the collection summaries which were solved by creating a new function to provide a plain text version, and using that for the meta tag contents.

Thinking the buttons were ready to go, we started testing the devset. All went well until we tested in Internet Explorer 8. The addition of the Tweet button caused IE8 to no longer render math. The problem was caused by the JavaScript from Twitter creating an iFrame for the Tweet button interacting poorly with other javascript on the page. Rearrange where various bits were called lead to results ranging from nothing on the page rendering to any one functionality being missing (math, twitter, dynamic menus, etc.) The ultimate solution was to create the iFrame ourselves instead of letting Twitter's code handle it.

Many thanks to our developers, Phil and Max and our sys admin, Ross who worked to get this done.