Files

Share

Topics

Updating Social Widgets with the History API

Keep social widgets in sync with pages loaded via history API

Keep Your Social Current

After working with the HTML5 history API for the launch of You Rather, I hit a snag with keeping social widgets current. The content and URL would update, but the Like button would stick to the original document location. As it turns out, Twitter and Facebook widgets that can’t simply be updated via typical jQuery selectors since they are parsed into iframes once the page loads. Fortunately for us, there is an easy fix.

In the function below, you can see that on push state we replace the HTML of the widget’s parent with the new unparsed snippet. Then we search for a window level object of FB for
Facebook and
twttr for Twitter and reload each if they exist. For those looking to update Google Analytics you’ll also notice there is a section where the URL is pushed as a new pageview. You earned those pageviews, so don’t forget to claim them.

I am trying to do something very similar with the History API. However, instead of using the Like button for Facebook, I am using FB.ui to create a dialog box using the feed method.

The problem I am running into is that I am getting multiple dialog boxes. The more I click through my website, the more boxes get created. They tend to stack up on each other and for whatever reason the layering order keeps changing so it looks like a slideshow of all the loaded dialog boxes.

Is it possible to reset/remove the iframes that are created in #fb-root? I have tried using jQuery’s remove() and empty() but that just causes errors. Any thoughts would be appreciated.

I found this is an educational and interesting publication, so I think it is very useful and knowledgeable. Thank you for the efforts you have made in writing this submission. I am hoping the analogous best work from you next time as well. practically your creative writing ability has inspired me.

I am running into is that I am getting multiple dialog boxes. The more I click through my website, the more boxes get created. They tend to stack up on each other and for whatever reason the layering order keeps changing so it looks like a slideshow of all the loaded dialog boxes.thanks