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>
>
>
>
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.
>
>
>
- 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”
