ClassCentral Widget

classcentral.md

Meetup.com

• Uses a iframe to render the content. Can use explicit width and height settings to render the way we want (can be configurable as well)
• The good thing is that iframe acts as a sandbox and we can load external js e.g. backbone / jquery which will definitely ease the development.

<!-- iframe generated -->
<iframe width="225" height="570" src="http://meetu.ps/2F9WG8" frameborder="0"></iframe>
<iframe width="650" height="300" src="http://meetu.ps/2F9XJy" frameborder="0"></iframe>

Disqus

1. Disqus like Google Analytics asks you to inject a piece of JS in your page which in itself is configured with a parameter.
2. As per my guess, this is done to determine ownership of the domain and the request originator.
3. In ClassCentral's case, we would not require this approach as the data is in public domain so simple iframe (like above) can do the trick.

var disqus_shortname = 'asdfgh'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

Twitter

1. Twitter's embedded tweets have, in my opinion, great similarity to CC's reviews. The idea for both is to allow other websites to display the content that is available on their platform.
2. Clicking on the embed tweet button on a tweet generates the HTML (see below), which can be just pasted.
3. The heavylifting is done by widgets.js which creates an iframe, loads the necessary CSS and displays the tweet like a card.
4. One thing is to notice is that the html contains just enough data so that its identifiable. widgets.js then fetches the fav and retweet count dynamically and updates the iframe.

<blockquote class="twitter-tweet" lang="en">
  <p>Should I call tech support or pray or what 
    <a href="http://t.co/8l3UxvnWud">pic.twitter.com/8l3UxvnWud</a>
  </p>&mdash; Jingle Yael (@elle91) 
  <a href="https://twitter.com/elle91/status/546109799025639425">December 20, 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

View on Codepen

Twitter Timeline

Embeddable widget for viewing a collection -

<a class="twitter-timeline" href="https://twitter.com/prakharsriv9/favorites" data-widget-id="556743010877054976">Favorite Tweets by @prakharsriv9</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

View on Codepen

Options

Embeddable tweets also provide options which are part of the markup. For example, to stop showing the images in a tweet, one can do the following. This seems like a great way of providing configurable options to the users.

<blockquote class="twitter-tweet" lang="en" data-cards="hidden">
  <p>Should I call tech support or pray or what 
    <a href="http://t.co/8l3UxvnWud">pic.twitter.com/8l3UxvnWud</a>
  </p>&mdash; Jingle Yael (@elle91) 
  <a href="https://twitter.com/elle91/status/546109799025639425">December 20, 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Same way, theming (light or dark) can be controlled - data-theme="dark". Here's a complete list of all parameters supported.