Rock Content CSS & JS API SDK

platform-feature

    Allow me to introduce the Rock Content CSS & JS API SDK. These two files will save you countless hours when working with the Rock Content API. This SDK will help you properly display:

    • Slideshows in advanced posts
    • Polls
    • Tweets as Twitter cards in advanced posts
    • Media items in all posts

    To use this SDK, just include these two files in the head of the page that uses the Rock Content API. The CSS & JS target the same HTML post structure used by our open source recent posts widget. Used together, you’ll have a pretty decent custom API widget ready to roll in no time.

    CSS

    <link rel="stylesheet" type="text/css" href="http://embed.scribblelive.com/modules/sdk/scrbbl.css" />

    JS

    <script type="text/javascript" src="http://embed.scribblelive.com/modules/sdk/scrbbl.js"></script>

    Create an Instance

    Create an instance of the library.
    new scrbbl({ShowCaptions:true; EventId:XXXXXX; IncludeJquery:true});

    Parameters?

    • ShowCaptions
      • True (default)/False
      • Shows or hides captions for all media posts.
    • EventId
      • String (default is an empty string)
      • Used to render a video player for posts containing videos.
    • IncludeJquery
      • True (default)/False
      • This library includes jquery. If you already have jquery on the page, and things are being weird, set this to false.

    Render

    The function you’ll want to use is called Render(). You pass it the JSON object of a post from the Rock Content API and it will render everything properly and pass you back the HTML DOM element for the content of the post. Put what it returns wherever you want the content of the post to appear. The meta data and avatar are up to you.

    Render All

    The function RenderAll() takes an array of JSON post objects, sends them to Render() one-at-a-time, and returns you an array of HTML DOM elements rendered properly.

    Resize Slideshows

    Slideshows need to be resized after they’re already on the page. If you put the element on the page right when you get it back from the Render() function, things should be fine. If your slideshows aren’t resizing properly, you can call the ResizeAllSlideshows() function with a DOM element, or CSS selector as the parameter. This will find and resize all slideshows in that container.

    CSS Selector

    The CSS in this SDK looks for posts to be in a container with a class of SL-Posts. If the posts are list items in an unordered list with the class of SL-Posts, everything will work well.

    Share
    Rock Content Writer Rock author vector
    Content writer at Rock Content.

    Subscribe to our blog

    Sign up to receive Rock Content blog posts

    Want to receive more brilliant content like this for free?

    Sign up to receive our content by email and be a member of the Rock Content Community!

    Our site is customized for each country we operate in.

    Go to English website ->