11 Replies Latest reply on Sep 18, 2009 1:45 AM by liuyanyan

    Using a widget outside of Clearspace X

       

      It would be really great if I could expose the "Recent Content" Widget for a community on an external web page outside of the Clearspace portal. (cross/grass roots marketing)

       

       

      Is there any way to do this without any major head-aches?

       

       

      Thanks,

      Dan

       

       

        • Re: Using a widget outside of Clearspace X
          dawn

          One way to do this is to use rss to pull the recent content out of Clearspace.  We do something similar on http://www.jivesoftware.com/dev

           

          Here's a simple and rough example using JSP, but you could do this in a variety of ways (Rome API, etc.)

                         <%-- Discussion threads --%>
          
                         <%
                             FeedFetcherCache feedInfoCache = HashMapFeedInfoCache.getInstance();
                             FeedFetcher feedFetcher = new HttpClientFeedFetcher(feedInfoCache);
          
                             SyndFeed feed = null;
                             try {
                                 feed = feedFetcher.retrieveFeed(new URL("@jive.url@/community/feeds/threads")); 
                             }
                             catch (Exception ioe) {
                                 // ignore
                             }
          
                             if (feed != null && feed.getEntries().size() > 0) {
                                 List entries = feed.getEntries();
                                 for (int i = 0; i < 3; i++) {
                                     SyndEntry entry = (SyndEntry) entries.get(i); %>
          
                                     <li>
                                     <span class="avatar"><a href="/community/people/<%=entry.getAuthor()%>"><img src="/community/people/<%= entry.getAuthor() %>/avatar/32.png" width="22" height="22" alt="" /></a></span>
                                     <span class="content"><a href="/community/people/<%=entry.getAuthor()%>" class="jive-username-link jive-status-away"><%= entry.getAuthor() %></a> wrote <a href="<%= entry.getLink() %>">"<%= entry.getTitle()%>"</a> "<%= StringUtils.chop(StringUtils.stripTags(entry.getDescription().getValue()), 60)%>"</span>
                                     </li>
          
                                 <% }
          
                             } else { %>
                                 <li><span class="content">No threads available.</span></li>
                             <% }
                         %>
          

           

          • Re: Using a widget outside of Clearspace X

            hi Dan,

             

            Another way of doing this (besides the RSS that Dawn mentioned) is by using JSON. Every single one of the feeds that you can get from Clearspace can be rendered in JSON format as well, so you could do something like this:

             

            <script type="text/javascript" src="http://jivesoftware.com/community/community/feeds/allcontent/json"></script>
            <script type="text/javascript">
                var ct = document.getElementById('tags-container');
                var content = '';
                 var entries = Community.feed;
                 for (var k in entries) {
                        content += '<strong><a href="' + entries[k] + '">' + entries[k] + '</a></strong><br />';
                      content += entries[k] + '<br />';
                }
                content += '... <a href="' + Community.feed + '">(view all)</a>';
                content += '<br /><br />';
                ct.innerHTML = content;
            </script>

             

            We do lock down the JSON feeds by default, so if you want to use JSON, you'll need to set a Jive property in the admin console:

             

            secure-json-requests = false

             

            That's all on the client so you don't have to write a lick of server side code.  

             

            Cheers,

             

            AJ

              • Re: Using a widget outside of Clearspace X

                AJ's solution is nice and elegent.  It looks like the contents of the JSON response may have changed a bit since his post though.  I've attached an example that seems to work well now.

                 

                After having trouble with the brackets being misinterpreted by the wiki syntax process, I am just attaching the example as an html file.

                  • Re: Using a widget outside of Clearspace X

                    No need for the iframe though right?

                     

                    Cheers,

                     

                    AJ

                    • Re: Using a widget outside of Clearspace X

                      I'm sure I'm missing something because the I'm getting an error when I try and execute the code as is.

                       

                      I think the code needs a slight adjustment, by adding in alert(k); as the first line of the for loop, I can see that the entries that are being looped through are title, description, link and then entries (which are actually the content elements I'm looking for )

                       

                       

                      So, in it's current form it's erroring out on the trim the whitespace line var body = entry.replace(/^\s|\s$/g, ''); and if I remove it / edit it, I get an unexpected runtime error.

                       

                       

                      I'll keep trying though.

                       

                       

                       

                        • Re: Using a widget outside of Clearspace X

                           

                          After a slight modification I've got it to work:

                           

                           

                          &lt;script type="text/javascript" src="http://xxx/community/feeds/allcontent/json"&gt;&lt;/script&gt;

                          &lt;script type="text/javascript"&gt;

                          function loadFeeds() {

                               var ct = document.getElementById('tags-container');

                               var content = '';

                            var entries = Community.feed.entries;

                            for (var k in entries) {

                             var entry = entries[k];

                             content += '&lt;div class="entry"';

                                   content += '&lt;div class="title"&gt;&lt;a href="' + entry + '"&gt;' + entry + '&lt;/a&gt; by ' + entry + '&lt;/div&gt;';

                           

                           

                             var body = entry;

                             if (('' != body)&&(null!=body)) content += '&lt;div class="body"&gt;' + body + '&lt;/div&gt;';

                                content += '&lt;/div&gt;';

                               }

                               content += '&lt;div class="conclusion"&gt;';

                               content += '... &lt;a href="' + Community.feed.link + '"&gt;' + Community.feed.title + '&lt;/a&gt;';

                               content += '&lt;/div&gt;';

                               ct.innerHTML = content;

                          }

                          &lt;/script&gt;

                           

                           

                          &lt;/head&gt;

                          &lt;body onload="loadFeeds()"&gt;

                           

                           

                          &lt;h1&gt;Clearspace Feeds Using JSON&lt;/h1&gt;

                           

                           

                          &lt;div id="tags-container"/&gt;

                           

                           

                      • Re: Using a widget outside of Clearspace X

                        Any chance to get this working from inside an HTML widget? I tried to figure that out, but

                        1. there is no onLoad() function due to missing <body> tag - I can understand this
                        2. if I have a look at the produced HTML source after publishing the HTML widget - it's completly empty!

                         

                        Any ideas?

                          • Re: Using a widget outside of Clearspace X

                            Hi Tobias,

                             

                            A couple of thoughts:

                            1) You'll need to add your own <div> to the HTML widget, above the <script> sections, as the target for the HTML rendered from JSON.

                            2) There is something funky going on with using the JavaScript for...in loop with the array returned from the JSON call. So, change the for loop to a counter style.

                            3) Because you know your div exists in the dom prior to the execution of the script, no need to worry about calling loadFeeds() from the onload handler. Instead, just call it after definition in the second script section.

                             

                            Here's what you can add to your HTML widget to get it to work (assuming nothing bad happens to the formatting):

                             

                            <div id="my-content-container"></div>
                            
                            <script type="text/javascript" src="http://jivesoftware.com/community/community/feeds/allcontent/json"></script>
                            <script type="text/javascript">
                                 function loadFeeds() {
                                     var ct = document.getElementById('my-content-container');
                                     var content = '';
                                        var entries = Community.feed['entries'];
                                        for (var k = 0; k < entries.length; k++) {
                                          var entry = entries[k];
                                          content += '<div class="entry"';
                                                 content += '<div class="title"><a href="' + entry['link'] + '">' + entry['title'] + '</a> by ' + entry['author'] + '</div>';
                            
                                                var body = entry['body'].replace(/^\s+|\s+$/g, '');
                                          if ('' != body) content += '<div class="body">' + body + '</div>';
                                          content += '</div>';
                                     }
                                     content += '<div class="conclusion">';
                                     content += '... <a href="' + Community.feed['link'] + '">' + Community.feed['title'] + '</a>';
                                     content += '</div>';
                                     ct.innerHTML = content;
                                 }
                                    loadFeeds();
                            </script>
                            
                            

                             

                            I hope that helps,

                            Greg