BBCode for hosted RSS

[Stoker]

MOD Name: BBCode for hosted RSS
MOD Authors: BBCode created by Stoker & script from DynamicDrive
Demo: BBCode Database
Description: This BBcode gives You the opportunity to ad RSS Feeds to Your forum.
There is a various way to do this and the styling can be customized.

How to do the modifications:
Get Your own Google AJAX Feed API here: http://code.google.com/apis/ajaxfeeds/signup.html
Download the 2 files mentoined in Step 2: here: http://www.dynamicdrive.com/dynamicinde ... player.htm
(gfeedfetcher.js and indicator.gif)
Upload both files to Your root folder.



Prosilver:
Open styles/prosilver/template/overall_header.html
Find:

Code: Select all

</head>

Before add:

Code: Select all

<script type="text/javascript" src="http://www.google.com/jsapi?key=Your Google API Here">
</script>                                                                                                                                                           
<script type="text/javascript" src="gfeedfetcher.js">
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Attention!! Find this: Your Google API Here in the above code and insert Your Google API key instead.

Open styles/prosilver/theme/colours.css
At the bottom, on a newline, add:

Code: Select all

.labelfield{ /*CSS for label field in general*/
color: #AD2C2C;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color: #828282;
font-size: 90%;
}

#example1 a{ /*CSS specific to demo 3*/
text-decoration: underline;
font-weight: bold;
}

#example1 p{ /*CSS specific to demo 3*/
margin-bottom: 2px;
}

code{ /*CSS for insructions*/
color: red;
}

Subsilver2:
Open styles/subsilver2/template/overall_header.html
Find:

Code: Select all

</head>

Before add:

Code: Select all

<script type="text/javascript" src="http://www.google.com/jsapi?key=Your Google API Here">
</script>                                                                                                                                                           
<script type="text/javascript" src="gfeedfetcher.js">
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Attention!! Find this: Your Google API Here in the above code and insert Your Google API key instead.

Open styles/subsilver2/theme/stylesheet.css
Scroll down to the bottom and ad this code:

Code: Select all

.labelfield{ /*CSS for label field in general*/
color: #AD2C2C;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color: #828282;
font-size: 90%;
}

#example1 a{ /*CSS specific to demo 3*/
text-decoration: underline;
font-weight: bold;
}

#example1 p{ /*CSS specific to demo 3*/
margin-bottom: 2px;
}

code{ /*CSS for insructions*/
color: red;
}

Save and upload both files. Refresh templates and themes.



BBCode
Go to ACP and create the RSS BBCode.

BBCode:

Code: Select all

[rss][rss]{TEXT},{URL1},{NUMBER}[/rss]

HTML Code:

Code: Select all

<span style="font-size: 125%; line-height: 116%;"><span style="font-weight: bold;">{TEXT} News</span></span><br />
<script type="text/javascript">
var socialfeed=new gfeedfetcher("example1", "example1class", "_new")
socialfeed.addFeed("{TEXT}", "{URL1}") //Specify "label"
socialfeed.displayoptions("label datetime snippet")
socialfeed.setentrycontainer("div")
socialfeed.filterfeed({NUMBER}, "date")
socialfeed.init() //Always call this last
</script>

Helpline:

Code: Select all

RSS:  [rss]Name of RSS,RSS Url,Number of entries[/rss]

Example:

Code: Select all

[rss]CNN,http://rss.cnn.com/rss/cnn_latest.rss,10[/rss]

Remember!
You can only use one RSS per page.

Tested in Firefox, IE7 and Opera8



Addon:
If You also want to show RSS news on Your forum index, follow this install instructions:

Open styles/prosilver/template/index_body.html
Find:

Code: Select all

<!-- INCLUDE forumlist_body.html -->

After add:

Code: Select all

<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt>RSS News</dt>
                                             </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
         <li>
<div class="content" style="width: auto; height: auto; padding: 10px;">

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example1", "example1class", "_new")
socialfeed.addFeed("USATODAY", "http://rssfeeds.usatoday.com/usatoday-NewsTopStories")
socialfeed.addFeed("CNN", "http://rss.cnn.com/rss/cnn_latest.rss")
socialfeed.addFeed("ABC", "http://feeds.feedburner.com/AbcNews_TopStories")
socialfeed.displayoptions("label datetime snippet")
socialfeed.setentrycontainer("p")
socialfeed.filterfeed(15, "date")
socialfeed.init()
</script>
</div></li></ul>
      <span class="corners-bottom"><span></span></span></div></div>

Open styles/subsilver2/template/index_body.html
Find:

Code: Select all

<!-- INCLUDE forumlist_body.html -->

After add:

Code: Select all

<br clear="all" />
<table class="tablebg" width="100%" cellspacing="1">
   <tr>
      <th>RSS Nyheder</th>
   </tr>
   <tr>
      <td class="row1">
                <div style="width: auto; height: auto; padding: 10px;">

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example1", "example1class", "_new")
socialfeed.addFeed("USATODAY", "http://rssfeeds.usatoday.com/usatoday-NewsTopStories")
socialfeed.addFeed("CNN", "http://rss.cnn.com/rss/cnn_latest.rss")
socialfeed.addFeed("ABC", "http://feeds.feedburner.com/AbcNews_TopStories")
socialfeed.displayoptions("label datetime snippet")
socialfeed.setentrycontainer("p")
socialfeed.filterfeed(10, "date")
socialfeed.init() //Always call this last

</script>
</div>
                </td>
   </tr>
   </table>
<br clear="all" />

Upload files and refresh templates.



Authors words

The gfeedfetcher.js script has a built in Alert function.
I find it quite annoying and unnecassary.
The thing is that You get a popup if the feed contains errors. You have to click OK before You can do anything.
You dont need a blocking popup to see if there is a feed error which often is a single entry. The rest of the feed is shown anyway.
To removes this alert do this.
Open gfeedfetcher.js script
Find ad delete:

Code: Select all

if (thisfeed=="") //if error has occured fetching feed
      alert("Google Feed API Error: "+result.error.message)

Explanation
How to configure the script?
This:

Code: Select all

socialfeed.addFeed("USATODAY", "http://rssfeeds.usatoday.com/usatoday-NewsTopStories")

tells the name and link to the feed
This:

Code: Select all

socialfeed.displayoptions("label datetime snippet")

Label tells where the feed is from. Datetime tells which date the entry is created and snippet is the text.
This:

Code: Select all

socialfeed.filterfeed(10, "date")

tells how many entrys is shown and how they are sorted.

Visit Dynamic Drive for more info.

[pawan Pawan]

great mod. But will it work for BF-VISTA.

[Stoker]

great mod. But will it work for BF-VISTA.

I see no reason why it shouldn't work on BF Vista. But it is not testet.

[pawan Pawan]

i asked because there you specified to make changes in subsilver css. So i thought then we have to make changes in BF-VISTA.

[Stoker]

Just put the subsilver2 css change in the BF Vista stylesheet.
This is the only filechange needed.

This BBCode should work on all kind of styles.
I have just used the standard styles in the description.
Try it out and tell me how it works.
If it doesn't work on BF Vista, I will install the style and make it work

[Monique Monique]

All I see after trying to use it is >>Update<< with a hyperlink I don't know this means:

Step 1: Insert the following code into the HEAD section of your page:

Do I put the code from google into the index.php at the top of the page? I think that where I have gone wrong is with this step of the process. But I don't understand what to edit, etc.

Thanks

[Stoker]

All I see after trying to use it is >>Update<< with a hyperlink I don't know this means:

Step 1: Insert the following code into the HEAD section of your page:

Do I put the code from google into the index.php at the top of the page? I think that where I have gone wrong is with this step of the process. But I don't understand what to edit, etc.

Thanks

Please give me a link to a thread using this BBCode.
If You dont want to post it in public, You can just send it by PM

It is a BBCode and can only be used in a post.

If You want it on the forum index page, open prosilver index_body.html and find this:

Code: Select all

<!-- INCLUDE forumlist_body.html -->

After add:

Code: Select all

<div class="forabg"><div class="inner"><span
class="corners-top"><span></span></span>
<ul class="topiclist">
            <li class="header">
                                            <dl class="icon">
                  <dt>Mixed News for Forumindex</dt>
                                              </dl>
            </li>
         </ul>
                        <ul class="topiclist forums">
         <li>
<div style="width: auto; height: auto; padding: 10px;">
<p style="text-align: right">» <a href="javascript:socialfeed.init()">Update</a> «</p>

<script type="text/javascript" src="http://www.google.com/jsapi?key=Put Your API key here">
</script>                                                                                                                                                           

<script type="text/javascript" src="gfeedfetcher.js">

/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
var socialfeed=new gfeedfetcher("example1", "example1class", "_new")
socialfeed.addFeed("USATODAY", "http://rssfeeds.usatoday.com/usatoday-NewsTopStories") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("CNN", "http://rss.cnn.com/rss/cnn_latest.rss") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("ABC", "http://feeds.feedburner.com/AbcNews_TopStories") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("p") //Display each entry as a DIV
socialfeed.filterfeed(20, "date") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>
</div><span></span></li>
         </ul>
<span class="corners-bottom"><span></span></span></div></div>

[Stoker]

Above post edited. There was an error

[Monique Monique]

http://www.uniquelyblue.com/careforums/ ... ?f=19&t=12

Believe me I did something wrong

[Stoker]

http://www.uniquelyblue.com/careforums/viewtopic.php?f=19&t=12

Believe me I did something wrong

Hi again

I think that You might have forgotten to create Your own API key:
Get Your own Google AJAX Feed API here: http://code.google.com/apis/ajaxfeeds/signup.html

That key is unique for Your website and is needed to collect the feeds.
The key should be inserted in the code piece here: <script type="text/javascript" src="http://www.google.com/jsapi?key=Put Your API key here">

Then it should work.