Social Media Integration For JavaScript Intensive Website

Social Media
1

I am currently building a JavaScript intensive website. This website more or less functions with a single physical page using AJAX when JavaScript is enabled. One requirement of high importance is to enable social sharing of various entities on the website. The vendors that must be supported are Facebook, Twitter, Pinterest, and Google+.

In my research to support all these sites through a normalized API I discovered all vendors specified support open graph tags. However, I don’t believe open graph tags will work due to the dynamic nature of the application avoiding physical page refreshes and multiple entities on a single page w/ social sharing toolbar.

Here are some specific scenarios.

  • There are some forms on the home page that once submitted should provide a confirmation message with the option of sharing the action. The form is handled completely via AJAX without a page refresh when JavaScript is enabled.
  • The front page contains several data tables of various individual entities. Everything including pagination is handled via AJAX without a page refresh. Each entity row in the grid will contain a social media toolbar to share the entity in-place without physically visiting the entity detail page.
  • Each entity in the data grid described above when clicked the detail page for the entity full listing page will be displayed in-place without a physical page refresh within a modal overlay. The modal overlay will contain a social sharing toolbar to share the entity from this detail view.

I have looked into addthis but I don’t necessarily want to be tied down to 1000 requests per hour and am not looking for a service that charges. Can anyone suggest a good solution to this problem besides writing custom JavaScript to interact with each of these vendors APIs?

I don’t think it is to relevant but the site is being built using Drupal 7. I’ve looked into various modules but all of them seem to fall flat on their face due to the dynamic, JavaScript intensive nature of the website.

These are the two options I’m considering:

  • Interacting directly with the various vendor API’s through the JavaScript SDK.
  • Writing my own restful service and interacting with the APIs at the server level.

Both are things I rather not spend my time on if I don’t have to…

2

I came across this post.

http://www.hanselman.com/blog/AddSocialSharingLinksToYourBlogWithoutWidgetJavaScript.aspx

However, it looks like the Facebook implementation is deprecated although it still seems to work. So in digging deeper I think I’ve established using the JS SDK share dialog is the best option for Facebook. I can write the my own JavaScript to trigger it than pass in the open graph data dynamically. At least that is what I believe from reading the docs.

Still need to look into the *best solution for the other vendors.

3

Drupal specific this looks promising though is somewhat an overkill. My specific requirements only outline supporting fb login. So I wrote something custom to do that. However, supporting others would probably be welcomed and provide flexibility going forward. I also like the fact the module was updated recently which probably means it is actually maintained.

https://www.drupal.org/project/hybridauth