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.

For a look at this in action, take a look at the the demo page. The source code shows more of the context in a working History API driven page.

If you’re looking for more reading on how to get started with the history API, I recommend taking a look at this tutorial before looping back.

Posted Friday, March 2nd, 2012 · Back to Top

SPONSOR

Add Comment

42 Comments 0 Mentions

  1. شات صوتي Author Editor

    You are great and thank for you articles

    ·

  2. طراحی سایت Author Editor

    The demo is working but I can’t get the snippet of code to work. I’m doing something wrong.

    ·

  3. Bharat Chowdary Author Editor

    thanks for the demo and download link.

    ·

  4. Sarah Author Editor

    Thank you for sharing the codes and information with your readers here. I’ll work with them and let you know the feedback. Sicily Food & Wine Tours

    ·

  5. bvjf89safka Author Editor

    Thank you for sharing the codes and information with your readers here. I’ll work with them and let you know the feedback. Sicily Food & Wine Tours

    ·

  6. Caley Jack Author Editor

    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.

    ·

    • phphunger Author Editor

      Hi Caley Jack, could you please suggest me how to work out on this for a blogger blog…actually i didn’t understand properly..as i am novice in this FB kind of stuff…Thanks in advance…

      ·

  7. Arun Kumar J Author Editor

    Thanks for demo and the codes.

    ·

  8. phphunger Author Editor

    nice work but can anyone suggest me where can i apply this for blogger..is there any custom widget available for this…

    ·

  9. Christian Louboutin Author Editor

    Don’t forget the things you once you owned. Treasure the things you can’t get. Don’t give up the things that belong to you and keep those lost things in memory.  

    ·

  10. saha Author Editor

    I agree with you. Updating social widgets is important. Thanks for sharing this code snippet for help.

    ·

  11. John Bash Author Editor

    This is damn cool, thanks for sharing the snippet. Will try my hands on this in my free time.

    ·

  12. زعفران Author Editor

    Works like a charm here.
    It’s great. I appreciate it.

    ·

  13. http://researchpaperstar.net/ Author Editor

    So nice grest so nic gret!

    ·

  14. DesignSanduiche.com Author Editor

    Great article and tutorial. Thanks!

    ·

  15. طراحی سایت Author Editor

    The demo is working but I can’t get the snippet of code to work. I’m doing something wrong.

    ·

  16. kodak ink cartridges Author Editor

    This is very very imaginative and creative approach, nice buddy,

    ·

  17. http://essaystar.org/ Author Editor

    Oh well done very nice great!

    ·

  18. sonu sindhu Author Editor

    Very nice such a helpful
    Thanks

    ·

  19. Jan Author Editor

    Very nice article and very helpful for me! Thanks so much.

    ·

  20. سئو Author Editor

    i like it tnx

    ·

  21. david Author Editor

    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.

    ·

  22. درب اتوماتیک Author Editor

    very good :)))))))))))))))

    ·

  23. mahesh Author Editor

    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

    ·

  24. Alex Author Editor

    Brilliant and simple – thank you! :) Social media integration is the bane of my existence, but alas it seems a necessary evil in this day and age.

    ·

  25. http://essayscope Author Editor

    Thank for an informative post. I’m working like an business analyst, so it was useful.

    ·

  26. Sahar Author Editor

    Thanks for demo and the CODES!

    ·

  27. davetiye Author Editor

    I tried it for protect my history.

    ·

  28. Jay Author Editor

    thanks for this post! it’s very useful.

    ·

  29. Paul D. Mitchell @ business web design company Author Editor

    By utilizing social media widgets and making your job more ocular on general avenues on the net can graphite to increment in your business’ popularity, if you witticism your cards good.

    ·

  30. web design naperville il Author Editor

    Thanks for sharing this. This will prove useful.

    ·

  31. Sharath Author Editor

    Excellent Post. helped a lot

    ·

  32. pro-writing-essay.com Author Editor

    This article seems to me very interesting!!! Thanks a lot for your nice work!

    ·

  33. http://bestessaysonly.com/custom Author Editor

    Good post! It might be very helpful in my job!

    ·

  34. Stephen Moyers Author Editor

    Thanks for sharing the wonderful post. Keep up the good work, I am really impress and it’s helpful a lot. Social media is booming nowadays.

    ·

  35. Reciana Author Editor

    Hey, your demo is brilliant! Thank you for the codes also, very handy indeed :-)

    ·

  36. Karen Walters Author Editor

    Hey Zach,
    For a long time I was searching for such useful article. Some of these points I was unaware about. Finally I got it from here.
    Great job and keep it up !!

    ·

  37. perfectdissertations co uk Author Editor

    Thanks for this post! I’d like to read more about this theme.

    ·

  38. http://payforessay.net/custom-essay Author Editor

    Thanks for code! Very helpful information for me. Thanks for this.

    ·

  39. BlogBazzar Author Editor

    I did not know it was that easy to update the social widget. Thanks for code and demo, it is going to save a lot of time!

    ·

 

Build Internet by One Mighty Roar. Since 2008.