Forums/Community/Community tips & tricks

RSS reader with jQuery (Zendesk Classic)

Skip Moore
posted this on June 07, 2010 22:48

If you want to pull in a RSS feed from either our forums or a outside source you can use a custom widget to display the feed in the sidebar. Create a custom widget by going to Account=>widgets and click add widget. Copy this code into it, changing the URL you want to pull from 

You can also get it from github.com

<div id="feedContent">
<div id="feedContent">
	
</div>
<script>
	 
$j(document).ready(function() {

truncate = function(text, length, ellipsis) {    

    // Set length and ellipsis to defaults if not defined
    if (typeof length == 'undefined') var length = 100;
    if (typeof ellipsis == 'undefined') var ellipsis = '...';

    // Return if the text is already lower than the cutoff
    if (text.length < length) return text;

    // Otherwise, check if the last character is a space.
    // If not, keep counting down from the last character
    // until we find a character that is a space
    for (var i = length-1; text.charAt(i) != ' '; i--) {
        length--;
    }

    // The for() loop ends when it finds a space, and the length var
    // has been updated so it doesn't cut in the middle of a word.
    return text.substr(0, length) + ellipsis;
}
	 

	//if pulling from a zendesk RSS remove the /proxy/direct?url=http:// and just use /forums/17747-it/posts.rss
$j.get('/proxy/direct?url=http://rss.slashdot.org/Slashdot/slashdot', function(d) { $j(d).find('item').each(function(index) { //name the current found item this for this particular loop run var $item = $j(this); // grab the post title var title = $item.children('title').text(); // grab the post's URL var link = $item.find('link').text(); // next, the description the second value sets the number of characters to display the 3rd value is what you want the ellipse to be
var fixedText = $j.trim($item.find('description').text().replace(/(<.*?>)/ig,"")); var description = truncate(fixedText, 200, '...'); //don't forget the pubdate var pubDate = $item.find('date').text(); // now create a var 'html' to store the markup we're using to output the feed to the browser window var html = "<div class=\"rssentry\"><h2 class=\"rsspostTitle\">" + title + "<\/h2>"; html += "<em class=\"rssdate\">" + pubDate + "</em>"; html += "<p class=\"rssdescription\">" + description + "</p>"; html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>"; //put that feed content on the screen! $j('#feedContent').append(html); // Set the number of items you want displayed remember the count starts at zero if(index > 1) {return false;} }); }); }); </script>

jquery-rss.png

 

 

Skip
Zendesk Support 

 

Comments

User photo
Skip Moore
Zendesk

Updated code to use $(document).ready to make it more friendly to IE 

June 09, 2010 20:37
User photo
Dylan

I'm having an issue in that I can only get this to display when a user is logged in.  I have set the Widget permissions to allow for "Anyone" to view, yet when I log out and view the home screen of my Zendesk where it should be displayed, it won't load.  As soon as I log in as agent or user, it is displayed.   Any ideas?  I do see the beginning of the widget but it doesn't appear to be loading the RSS information. 

July 07, 2010 22:21
User photo
Skip Moore
Zendesk

HI Dylan, 

If you are using the proxy  "/proxy/direct?url=" then the users have to be logged in. Only authenticated users can access the proxy.

Skip

July 08, 2010 07:02
User photo
Dylan

Hi Skip, thanks for the help.  So what can I use so that it can be viewed without being logged in?

July 08, 2010 22:15
User photo
Jay Goldman
rypple

I was just about to ask the same question as Dylan. I get a 200 error on the $j.get call for non-logged in users. Would really love a solution that works for everyone!

Also, a little tip for anyone who wants to pull in multiple RSS feeds: we adapted Skip's excellent code into a function in a Global Javascript widget that accepts a targetURL and a targetID. It will append the proxy to the URL if it starts with 'http' (otherwise we assume it's a Zendesk feed), and will insert the returned feed items into the element specified in targetID. We also added a little spinner image to the elements, which we take out when we've got returned code. Now you can make a really simple widget for each feed you want to pull and call the shared widget code.

 

Individual Feed Widget Code: http://www.pastie.org/1120485

Make as many of these as you'd like for each feed. Note that you should change the id of the <div> for each one and make sure to pass that into the getRSS function.

 

Global RSS CSS: http://www.pastie.org/1120501

 

Global Javascript Widget: http://www.pastie.org/1120509

 

Enjoy!

August 27, 2010 08:14
User photo
Skip Moore
Zendesk

@jay thanks for the improvements

For right now we just will not allow for anonymous access to the proxy.  Please submit it as a feature request

Skip

August 27, 2010 08:24
User photo
Jay Goldman
rypple

Thanks Skip!

Added a request at: https://support.zendesk.com/entries/248340-anonymous-access-to-prox.... Please go vote for it if you're reading this and would like to show your feeds to all users!

August 27, 2010 08:28
User photo
Tom Hutchinson

Hey Skip --

I'm struggling to display a Feedburner rss feed in the widget.  Standard fss feeds work great, but if the feed has been burned, it doesn't display.  Advice?

 

Thanks,

Tom

September 05, 2010 08:05
User photo
Skip Moore
Zendesk

@Tom what do you mean by "burned"?

October 20, 2010 09:25
User photo
Tom Hutchinson

A feedburner term for converting an RSS feed.  http://feedburner.google.com

October 20, 2010 09:35
User photo
Clay Johnston

The reason feedburner isn't working is because their XML format is a bit different.  I got it to work on everything except the link element.  Instead of the link element having the link within it, it puts the link within an attribute.  Like this:

<link rel="alternate" type="text/html" href="http://status.mosso.com/2010/11/cloud-sites-control-panel-degraded-..." />

How do we grab an attribute from an element with this script?

November 08, 2010 10:08
User photo
Grant Butler

Does anyone have experience using this widget to retrieve a feed protected by basic authentication? I don't believe the proxy can handle direction authentication requests in the form of "https://username:password@rss.url.com", so I'm curious if there's another way.

November 03, 2011 14:09
User photo
Skip Moore
Zendesk

If you were using this to pull a Slashdot feed it's been updated to pull the text instead of the adclick links 

December 05, 2011 15:04
User photo
Tom Hutchinson

Any update on Clay's question from over a year ago?

 

The reason feedburner isn't working is because their XML format is a bit different.  I got it to work on everything except the link element.  Instead of the link element having the link within it, it puts the link within an attribute.  Like this:

<link rel="alternate" type="text/html" href="http://status.mosso.com/2010/11/cloud-sites-control-panel-degraded-..." />

How do we grab an attribute from an element with this script?

December 06, 2011 11:13
User photo
Ctugangui

Am I able to use this to show a "Latest Post's" widget? I'm trying to have a widget show the 3-4 latest posts made in Announcements forum. 

February 17, 2012 11:45
User photo
Jim Restucci

I just posted Jay on your request.  I hope this is not a dead issue, because I see it of great importance to creating a connection between a company's main website and its support site.

April 15, 2012 00:00
User photo
Alex Bauman

I'm having trouble having this show the feed from a particular Ticket View.

The idea was to use email to quickly generate a ticket which would be placed in a view designed just to log notices for users, and these tickets would then be displayed as a feed.  This would also be used as a less-than-elegant solution to display a daily update for a different user-base as well.

Unfortunately the script doesn't work for this - looks like the email-generated tickets are created in a format that isn't jiving.

Any suggestions out there? 

August 16, 2012 13:21
User photo
Alex Bauman

I'm having trouble using this to create a widget displaying a ticket view's RSS feed.

Any ideas out there?

August 16, 2012 13:38
User photo
Adam
Zendesk

@Alex, what is your Zendesk subdomain?

August 23, 2012 09:48
User photo
Jonathan Semones
lucity

I've been trying to use the above script in our zendesk to pull in a feed from our blog.  In IE it looks great, but in Chrome some extra stuff gets added to the header and makes it look garbled.  It also runs off the side of the screen/widget sometimes

Is there a way to fix this?

FYI I also voted for this to work with un-authenticated users.

April 24, 2013 14:07
User photo
Skip Moore
Zendesk

@Jonahtan, Since the code uses our proxy we will always require the user to be logged in. I took a look at your site are you talking about the everything past the ! ?

April 25, 2013 15:24
User photo
Skip Moore
Zendesk

Hi Jonathan,

I have created a ticket for the RSS reader issue.

Cheers
Skip

Skip | Services | support@zendesk.com

April 25, 2013 15:25
User photo
Jonathan Semones
lucity

Thanks Skip,

Yes I was talking about everything after the !

Also I'm assuming since this script uses the Proxy that any RSS reader script would need to use the proxy, which would explain why all the other javascript rss readers I've tried to embed don't work.

April 26, 2013 05:17
User photo
Jonathan Semones
lucity

fyi when i try to attach a picture to this ticket it errors when I hit submit. I had a screenshot of exactly what it looked like.

April 26, 2013 05:18
User photo
Skip Moore
Zendesk

Hi Jonathan,

all the RSS readers need to use the proxy. I am going to copy the code on your site and see what is happening.

Cheers
Skip

Skip | Services | support@zendesk.com

April 29, 2013 10:07
User photo
Skip Moore
Zendesk

Hi Jonathan,

Figured out what was going on. Your feed has several nested media:title in the feed and because I used a simple find for title it grabbed them all and appended them together. I have fixed it on your site to only grab the top most title.

Cheers
Skip

Skip | Services | support@zendesk.com

April 29, 2013 10:49
User photo
Jonathan Semones
lucity

That looks great!  Thanks Skip

April 29, 2013 10:54
User photo
Skip Moore
Zendesk

@everybody I have updated the code and the link to the code. 

April 29, 2013 10:58
User photo
Matt Zaglin
tpco

Is there any update to the 'Feedburner' issue?  I would like to display http://feeds.feedburner.com/OfficialGmailBlog on our site.  Thanks!

May 08, 2013 07:01
User photo
Skip Moore
Zendesk

@MattZ what is the address of the rss XML located at?

Skip | Services | support@zendesk.com

May 09, 2013 09:15
User photo
Jonathan Semones
lucity

Did something get changed on Zendesks end?  When I implemented this last month it worked great in all browsers.  I haven't touched it since and now it won't work in IE anymore, while it still works in Chrome and Firefox.

I even disabled all of my other extensions to make sure I didn't accidentally affect it in some way.

May 23, 2013 13:19
User photo
Jim Restucci

Jonathan, I am sure you probably already check this; however, given that this just start happening, have you looked to see if you are running IE10?  Microsoft did push this out as an Important Update, which could have been installed without your knowledge.

May 23, 2013 13:25
User photo
Jonathan Semones
lucity

I didn't check that before, but I'm running IE 9.

May 23, 2013 13:35
User photo
Matt Zaglin
tpco

@Skip - it's an official Google/Gmail blog.  I don't know where they store the XML.

May 24, 2013 06:42
User photo
Alexander V.

Strange, this RSS reader only works when user log in. If i didn't do that RSS widget is empty.

Any ideas?

August 26, 2013 04:59
User photo
Alexander V.

Nvm, found that this is some kind of feature.

Voting +1 to allow to use it for non-authorized users.

August 26, 2013 05:01
User photo
Andrea Saez

@Alexander - This is a custom widget. For now, custom widgets only work when a user is logged in.

August 26, 2013 07:28