Loader scripts for Social Media

These script samples will provide an example of how to load social media embeds into your stream. Whether loading a single post – or creating a combined post by dragging content into the Rich Text Editor, you can use our API to display a variety of social media posts.

• Twitter – Single Post
• Facebook – Single Post
• Instagram – Single Post
• Combined posts

…………………………………………………………………………………………………………………..

Twitter – Single Post

Note: Remove the asterisks in <*script> tags before testing this code.

<*script>window.twttr = (function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0],
		    t = window.twttr || {};
		  if (d.getElementById(id)) return t;
		  js = d.createElement(s);
		  js.id = id;
		  js.src = "https://platform.twitter.com/widgets.js";
		  fjs.parentNode.insertBefore(js, fjs);

		  t._e = [];
		  t.ready = function(f) {
		    t._e.push(f);
		  };

		  return t;
		}(document, "script", "twitter-wjs"));<*/script>

>

>

>

>

Additional Information / Links

• Script-Setup: https://dev.twitter.com/web/javascript/loading
• Manually Loading Posts: https://dev.twitter.com/web/javascript/initialization
• Initial page load: If posts exists on page load, it will load automatically.
• Post page load: Execute the following for new posts coming in after initial page load:

twttr.ready(function (twttr) {
twttr.widgets.load();
});

…………………………………………………………………………………………………………………..

Facebook – Single Post

Note: Remove the asterisks in the <*div> and <*script> tags before testing this code.

<*div id="fb-root"><*/div>
		<*script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));<*/script>

>

>

>

Additional Information / Links

• Script-Setup: https://developers.facebook.com/docs/plugins/embedded-posts/
• Where to find the url for data-href: Extract the url from the JSON-response. e.g.: Source: ‘<*a href=”https://www.facebook.com/34558408771/posts/10154060331058772“>Facebook<*/a>’, …
  <*div class=”fb-post” data-href=”https://www.facebook.com/34558408771/posts/10154060331058772” data-width=”auto”><*div>

…………………………………………………………………………………………………………………..

Instagram – Single Post

Note: Remove the asterisks in <*script> tags before testing this code.

 <*script async defer src="//platform.instagram.com/en_US/embeds.js"><*/script>

>

https://www.instagram.com/p/9ZXA6NG43C/?taken-by=scribblelive

>

>

Additional Information / Links

• Script-Setup: Include <*script async defer src=”//platform.instagram.com/en_US/embeds.js”><*/script>
• Retrieve Instagram Embed Code:
  • Extract the url from the JSON-response. e.g.: … Source: ‘<*a href=”https://www.instagram.com/p/BKEAtQEAcrV/” class=’sl_instagram_post’>Instagram<*/a>’
  • Do HTTP-request to https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BKEAtQEAcrV/&omitscript=true
  • In the returned JSON response for the made request, there is a parameter html. This is the code HTML needed to render the instagram post
• Embedding: https://www.instagram.com/developer/embedding/
• Post page load: Execute instgrm.Embeds.process() for new posts coming in after inital page load

…………………………………………………………………………………………………………………..

Combined Posts

Combined posts can be posts with multiple social embeds, or a single embed with additional text from the Rich Text Editor.

>

https://www.instagram.com/p/9ZXA6NG43C/?taken-by=scribblelive

>

>

• Script-Setup: Combined posts use the same scripts as the single posts
• Twitter: Blockquote for Twitter is provided in the returned content
• Facebook: Blockquote for Facebook is provided in the returned content
• Instagram:
  • Extract url <*div class=”scrbbl-post-embed” data-url=”https://www.instagram.com/p/BKEArIZAbuf/“><*/div>
  • Do HTTP-request to https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BKEArIZAbuf/&omitscript=true
  • In the returned JSON response for the made request is a parameter html this is the code HTML needed to render the instagram-post
  • Insert returned html into “div.scrbbl-post-embed”