Acid.RSS

Acid.RSS Setup, Installation and Help Topics

Acid.RSS is a complete all-in-one suite for RSS authoring, publishing and syndication for your website. It features seamless and fully localizable AJAX driven admin panel with WYSIWYG editor, item sorting via drag and drop and friendly system messages. And that's not all...

The public side of the component is fully customizable and comes with 12 cool looking Web 2.0 skins that will virtually fit any design. Despite of its rich functionality, Acid.RSS is extremely fast even with big feed files and is very small in footprint.

View online demo of Acid.RSS or download it straight away. Buy via PayPal.

Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.

Requirements

Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages.
Web-server (Apache, IIS).
PHP.

Supported Browsers

Installing and Running the Default Configuration of the Component

To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.

1. Copy the entire Acid.RSS/ directory in the root of the website that you are going to use it on. You can also add it as a child of another folder, for example "scripts", but then you will need to specify "scripts/" as value of the rootfoder property of the init() method of the component.

2. Add the following scripts in the <head>...</head> section, or before the closing </body> tag of the page:

<script type="text/javascript" src="Acid.RSS/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Acid.RSS/Scripts/Acid.RSS.js"></script>

3. Add the initialization method under the scripts from the previous step:

<script type="text/javascript">
acidrss.init({
	rootfolder: "",
	datafile: "RSS/news.xml",
	loadmethod: "pageload",
	mode: "public",
	display: ["title", "date", "guid", "description", "contacturl", "category"],
	labels: ["Click to expand / collapse the news box", "Comments", "Category: ", "Permanent Link: "],
	skin: "Vista",
	animationspeed: "fast",
	targetwindow: "_blank",
	width: 600,
	height: 180,
	itemstodisplay: "all",
	titleislink: true,
	roundedcorners: true,
	enableroundedcornersinie: false,
	collapsedboxes: true
});
</script>

4. At the place where Acid.RSS is expected to render, put an empty <div>...</div> tag and set acid-rss as its id attribute:

<div id="acid-rss"></div>

5. Reload the page. If steps 1-4 have been followed correctly, you will see Acid.RSS running with its default configuration.

Properties of the Initialization Method of the Control

rootfolder

Leave empty if the main Acid.RSS folder is the root of your website. If Acid.RSS folder is a child of another folder, set its name as value of this property, and do not forget the trailing slash, i.e:

rootfolder: "Scripts/"

If the Acid.RSS folder is a child of another folder, you will also have to set the correct filepaths in the <script /> tags from the previous topic.

datafile

This is the file that will be displayed by Acid.RSS. By default it is called news.xml, and is stored in the RSS/ folder included in the distribution of the control. The path you specify should be relative to the file.

loadmethod

Currently, Acid.RSS supports only pageload method, so keep this value intact.

mode

Acid.RSS operates in two modes - public and admin. The admin mode is set in the admin panel of Acid.RSS (Acid.RSS/Admin/index.php).

display

Here you can add or remove the items that will be shown on the public page. Each item is associated with a single news, and the possible values are pretty self-explanatory: "title", "date", "guid", "description", "contacturl", "category". "guid" stands for the permanent URL of the news item.

labels

The text labels and hints associated with the public side of Acid.RSS.

animationspeed

Possible values are "fast", "slow" or integer, representing the animation speed of box expand / collapse in milliseconds. If you want to turn animation off, just set the value to 0.

targetwindow

The default window target in which links will open. Possible values are "_self", "_blank", "_top" or "custom_window_name".

width

Width of the component in pixels. Do not add px, as units are added automatically by the script.

height

Height of the component in pixels. Do not add px, as units are added automatically by the script.

itemstodisplay

Default number of displayed items. Possible values are "all" if you wish to display all items in the feed or integer in which you define the number of displayed items. For example, if you want to display 5 items, set:

itemstodisplay: 5

titleislink

Boolean property - true or false. If you set it to false, the title of the single news item will render like text only. If set to true, the title will become a link that when clicked will open the URL associated with that particular news item.

roundedcorners

Boolean property - true or false. If you set it to false, the component will render without rounded corners.

enableroundedcornersinie

Boolean property - true or false. If you set it to true, Acid.RSS will use the excellent CSS3PIE CSS behavior to apply rounded corners and gradients in Internet Explorer. This may have negative implications to the appearance of the component if the parent of the <div id="acid-rss"></div> element has some CSS positioning different than static applied, but in general, such problems are very rare, and setting the property to true will make the component look really cool in Internet Explorer 7-8. Internet Explorer 9 will support the CSS3 styling of Acid.RSS natively.

collapsedboxes

Boolean property - true or false. If you set it to true, Acid.RSS will render only the headers of each news item, which when clicked will expand to display the entire news.

Setting Up the Admin Panel of Acid.RSS

The admin panel of Acid.RSS is located at Acid.RSS/Admin, and should be used to add, delete, modify, rearrange or delete the news in your feed file. Before going live, it is recommended that you set your own login credentials instead of using the default admin / admin. This can be done by editing the Acid.RSS/Admin/processlogin.php file:

$user_name = "admin";
$password = "admin";

When you are done with this, log into the admin, and open Acid.RSS/Admin/index.php page, scroll to the bottom of the page, and take a look at the init() method:

acidrss.init({
	datafile: "../../RSS/news.xml",
	loadmethod: "pageload",
	mode: "admin",
	rootfolder: "../../"
});

If you have already modified the roofolder property in the public page of the component, make sure you do this here as well. Also - do not forget to modify the src attribues of the following <script /> JavaScript files:

../Scripts/jquery.min.js
../Scripts/jquery-ui.min.js
../Scripts/Acid.RSS.js

And finally, the value of the datafile property should be set correctly if you do not use the default configuration of the component:

datafile: "../../RSS/news.xml",

Localizing the Admin of Acid.RSS

The default language of the admin is English, but if you prefer using your own language, you have to:

1. Edit the labels and text strings in the HTML of Acid.RSS/Admin/login.php and Acid.RSS/Admin/index.php, just make sure you do not change the id attribute values of any elements, otherwise the admin will stop to operate correctly.

2. Modify acidrss.settings in Acid.RSS/Admin/index.php with your own values:

acidrss.localization = {
	newstitlelabel: "Title",
	datelabel: "Date",
	clicktoedithint: "Click to open item in editor to modify",
	descriptionlabel: "News text (Click to edit)",
	commentslabel: "Comments page",
	categorylabel: "Categories",
	guidlabel: "Permanent Link",
	headerhint: "Drag to rearrange news item in the list. Doubleclick to open and edit news item.",
	removeitembuttonhint: "Click to remove this news item",
	expandnewsboxhint: "Click to expand / collapse news item",
	editorcommands: "cut copy paste | bold italic underline strikethrough | bullets numbering | link unlink | image",
	feedtitlelabel: "Feed title",
	feeddescriptionlabel: "Feed description",
	websiteurl: "Site URL",
	feedcategory: "Feed category",
	feedlanguage: "Feed language",
	feedlastbuilddate: "Last build date",
	feedpublishingdate: "Feed publishing date",
	feedgenerator: "Feed generator",
	linklabel: "URL",
	confirmfeedsave: "Are you sure you want to save the feed? Changes on your website will be immediate. Click OK to continue or Cancel to return and review the feed.",
	feedsavedmessage: "The latest modifications to your RSS feed have been successfully saved are are now live on your website.",
	confirmitemremove: "Are you sure you want to remove this news item? If you press the save feed button after, the item will be lost.",
	testurlbuttonhint: "Test URL",
	insertitemdefaulttext: "Click to edit text...",
	insertitemdefaulttitle: "New Item",
	insertnewitemdefaultcommentsurl: "http://mysite.com/comments/",
	insertnewiteminfo: "The new feed item has been added at the top of your feed list, and you can start editing it.",
	guidispermalink: false
};

2. In acidrss.settings you can also add, remove of rearrange the toolbar buttons of the WYSIWYG editor of the component. For more information on the excellent CLEditor, please, visit this page. If you are not sure what guid is, leave the value of guidispermalink as it is - false.

3. Use dialogsjsacidrss.pageload to set your own values to the OK and Cancel buttons of the dialog boxes:

dialogsjsacidrss.pageload({
	width: 350,
	height: 170,
	buttonwidth: 100,
	confirmbuttontext: "OK",
	cancelbuttontext: "Cancel"
});

More information about the dialog boxes can be found on this page, and this is the help page for Dialogs.JS.

Setting the Feed File to Writable

In order to be able to use the admin of Acid.RSS on a live server, you have to set the correct read-write rights to the your feed file (for example RSS/news.xml). Please, keep in mind that certain systems may also require that you set CHMOD to the parent folder of the feed file and to Acid.RSS/Admin/Server.Runtime/save.php, but such cases are very rare. Setting incorrect CHMOD values or forgetting to set any will prevent the admin from being able to write your news data.

If you are not acquainted with FTP and CHMOD, please, refer to the following pages:

If you do not have a FTP program, you may use FileZilla for free.

Difference Between the Trial and the Full Version

The trial version of Acid.RSS is fully functional, but there are feature limitations:

Public Page Limitations

Only 1 skin instead of 12 is included.
Only 2 items can be shown on the public page.

Admin Limitations

Nag screen every 15 seconds.
Only 2 items can be edited in the admin.

If you wish to have these limitations removed and to be able to use the control on a live website, you may purchase it for USD30. Purchase link is provided at the top of this page.

If you consider purchasing more than one Acid.JS component you may create and order a custom Creative Web 2.0 Bundle and save money. More information about the Creative Web 2.0 Bundle program is available on my blog.

Upgrade to the Full Version after Purchase

After getting the full version you will notice that it contains only certain files, not the entire distribution required to run the script - the rest of the skins and JavaScript. You have to replace the files in the trial version distribution with the ones that you have received after having purchased the full version manually. After this, the control should work without trial notices and the emails sent by it will not contain trial strings.

Acid.JS Web 2.0 Components Help Topics

Components

Search the Site

Social

Links

Subscribe

Blog

Acid.JS Help QR Barcode