del.icio.us links via feeddigest

delicious through feeddigest to browser

Using del.icio.us for your bookmarking is not only an excellent way to organise your bookmarks and keep them safely backed up – it can also add a collection of links – which remains current and up to date – to any webpage you design . Using services like Feeddigest – you can customise your feeds, such as any chosen del.icio.us tag/s or collections – and add them dynamically to yoru chosen webpage. While you add any selected links to your delicious page, adding your set tag – allows those bookmarks to be fed through to your site, keeping the link collection displayed fresh and updated frequently.
(If you haven’t heard about del.icio.us yet – you should definitely have a look – read my previous post for more info)




The following steps will take you through the set up of this feature:


  1. delicious
    choose a suitable tag from your delicious bookmarks – or create a new one specifically to collect suitable links for your site.
    You can simply click ‘edit’ next to your chosen links and type out a new tag – or work with an existing tag of your choice. If you are making useo fthis technique on any client or commercial site – it will be important to plan this and keep the links regularly updated. You will need to make this function very clear to your client – most likely create a delicious account and instruct those responsible for the site how to use it best in relation to the website links.
    Once you have the delicious tag has been added to the preferred links – you will be able to display these on your web page.


  2. feedigest
    go to feeddigest.com and sign up for a new account if you don’t have one already.
    There are other services such as this available online – if you are new to this – you might want to have a look around and check out the options. I personally have found Feeddigest to be excellent – very easy to use – with great control over the appearance of the feeds on the site.
    Once you have created and activated your account – log in to create your first Digest. After login you will be take to your control panel where you can create and edit your feeds.
    add feed screenshot

  3. Open up a new window – leaving the Feeddigest window open for further edits – and go to your delicious bookmarks page. Click onto your new tag to display your only the relevant bookmarks and you will see it shown in the title of the page as shown below:
    page of delicious bookmrks for set category

    rss
    go to the very bottom of this page and click on the link to the RSS feed. You will then see the feed displayed in the browser – the appearance of this page will depend on the feed set up of the page as well as the browser you are using. To carry on – you will only need the URL. Copy the URL and return to your Feeddigest page.

  4. Back on your Feeddigest page – paste the URL into the box provided:
    add feed screenshot
    click ‘Next’ to edit the settings for this feed digest.

  5. you will be taken to your control panel – specifially the control panel for your new feed. There are 4 main sections to this control panel page, allowing you to add more feeds to the digest, to edit the settings of the actual feed and how it will be displaying the links, to edit the display template and save your settings, see more details below each screenshot.
    feeddigest screenshot - control panel - digest source options
    DIGEST SOURCES > showing the current source/s for the digest and giving the option of adding additional feeds
    feeddigest screenshot - control panel - digest options
    DIGEST OPTIONS >

    • Digest Name – used in your main control panel to uniquely identify each digest
    • Order Items By – Item Date, Original Order, Item Title, Source Feed, Random, displayed ascending or descending. Which option to choose here will very much depend on the nature of content of the links and their final display within your site. If the links are to articles, for example, it will best to show the links by date to keep the link collection up to date, ideally including the time and date of writing.
    • Max Items to Show – the allowed amount will vary, depending on which account option you have with Feeddigest. Before choosing how many links you want to show – look at your chosen webpage and where you are planning links to be displayed. Keep your final layout in mind and choose an appropriate number. Be careful with higher numbers as showing too many links can have quite an impact your page length.
    • Output Encoding – choose your preferred encoding, the most comonly used standard would be UTF8-International
    • Language – displaying details of the links such as time details
    • Search Query – you can use this setting to filter your links by certain keywords if appropriate
    • Show Only Live Items & Dupe Filter – giving you the option of showing only live feeds as well as filtering out duplicate links

    feeddigest screenshot - control panel - layout/template
    DIGEST LAYOUT / TEMPLATE > you can choose from the preset templates, edit those to suit your needs – or create an entirely new template for your links. The last option is perfect if you want to tie the link display into your overall design – giving you access to the template’s code and control over any DIV tags used.
    feeddigest screenshot - control panel - save button
    SAVE DIGEST > finally, save all changes and your digest is set up and ready to be used.


  6. in your main control panel page – you will now see your new digest and its details displayed:
    feeddigest screenshot - control panel
    click on ‘get code’ to view the different outputs’ source code

  7. you will get several options of different code – I always use the simple and straight forward php include:
    (REMEMBER that any page including php will need to have the file extension ‘.php’)
    screenshot of code using php includes
    NOTE !!!!
    one thing to keep in mind is your final web page’s character encoding – in order for the feed to show up as intended – both your feed digest and your html document will need to use the same character encoding !
    snapshot of feeddigest’s character encoding sample and tip

  8. copy your chosen code snippet and open the webpage you would like your links to appear on – paste the code into the appropriate location within your HTML code and preview the page. You can, of course, setup a new DIV to hold your links – this and your digest’s template tags can then be targeted with your CSS. Remember that the digest’s code will retrieve the information of your feed, live online. So you will need to be online to view the links – when viewed offline – you will see nothing or even an error show up in its place.

  9. the result :)
    please have a look at the right side column on my graphiceyedea.info site for an example use of a delicious feed display via FeedDigest. As you can see the template tag has been edited to show only the link title and description and no other additional tags.
    view a typical page → graphiceyedea.info: student gallery pages

15/03/2007 blog,handcoding

Leave a Reply

graphiceyedea prisca schmarsow – portfolio

portfolio