How I can add this News Ticker in my website and gets a feedback from my facebook page?

StackOverflow https://stackoverflow.com/questions/21512406

Question

I need to add a News Ticker to my website : http://www.lgeekweek.com/

This is the News Ticker that I want : http://www.jquerynewsticker.com/

The probleme is I tried to follow the instructions, but it didn't work !! Indeed, I have an RSS link to my facebook page, soo my facebook page's posts will be shown in the News Ticker, but I can't figure it where I can add the RSS link; I'm in loss!

This is my Index.html code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>L'Geek Week :: Coming Soon</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">     </script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/jcarousellite1.0.1_min.js"></script>
<!-- jquery countdown-->
<script type="text/javascript">
$(function () {
var austDay = new Date("March 15, 2014 08:00:00");
$('#defaultCountdown').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl}, {mn}   {ml}, and {sn} {sl}'});
$('#year').text(austDay.getFullYear());
});
</script>

<!-- jquery slider -->
<script type="text/javascript">

$(function() {
$("#slidertext").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev"
});
});

</script>

<!--script for IE6-image transparency recover-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
 /* EXAMPLE */
 DD_belatedPNG.fix('#logo  img,#main,.counter,.twitter,.flickr,.facebook,.youtube,.skype,.stumbleupon, #submit,.prev  img,.next img,#email');

</script>
<![endif]--> 

</head>

<body>


<div class="container">

<div id="header">

    <div id="logo">
        <center><img src="images/logo.png" alt="logo"/></center>
    </div><!--end logo-->

    <div id="contact_details">
        <p><a href="#"></a></p>
        <p><a href="#"></a></p>
    </div><!--end contact details-->     

</div><!--end header-->
          <div style="clear:both"></div> 

<div id="main">

     <div id="content">

          <div class="text">
          <h2>Du <mark>15</mark> Mars au <mark>12</mark> Avril <mark>2014</mark></h2>
          </div><!--end text-->

          <div class="counter">
          <h3>Il reste avant le lancement :</h3>
          <div id="defaultCountdown"></div>

     </div><!--end counter-->
<div class="details">
          <!--slider prev button-->    
        <a class="prev" href="#"><img src="images/prev.png" alt="" /> 
        </a>

              <div id="sliderwrap">
                    <div id="slidertext"><!-- The slider -->

                            <ul>
                                 <li>
                                    <h3>Entrez votre email pour recevoir notre actualités!</h3>
                                    <form method="post" id="subscribeform" action="emailform.php">
                                        <div id="email_input">
                                            <input name="email" type="text" size="30" value="Entrer Votre E-mail" onfocus="if(this.value=='Entrer Votre E-mail'){this.value=''};"   onblur="if(this.value==''){this.value='Entrer Votre E-mail'};" id="email" /> 
                                            <input type="submit" id="submit" value="SUBMIT" size="80" />
                                        </div>
                                    </form>
                                </li><!-- Slider item -->
<li>
                                     <h3>Vous pouvez nous trouver ci-dessous :</h3>
                                     <div class="social">
                                     <a href="https://www.facebook.com/lgeekweek" target="_blank" class="facebook">Aimez nous sur Facebook</a>
                                     <a href="http://instagram.com/mediasoft_aiae" target="_blank" class="instagram">Suivez nous sur Instagram</a>
                                     </div>
                                 </li><!-- Slider item -->

                                <li>
                                     <h3>A propos du Geek Week</h3>
                                     <p>Malheureusement, la sensibilisation des acteurs associatifs dans les écoles de commerce et de gestion au pouvoir de l’Informatique demeure très faible, l’étudiant cherche toujours à apprendre par cœur les cours pour valider les 10 semestres, et prendre le diplôme, sans avoir la chance d’améliorer son savoir-faire en matière d’outils informatiques. Pour ces raisons, l’association Mediasoft a pris l’initiative d’organiser le ‘Geek Week’</p>


                                 </li><!-- Slider item -->

                            </ul>

             </div><!-- End of slidertext -->

          </div><!-- End of sliderwrap -->

                <!--slider next button-->
            <a class="next" href="#"><img src="images/next.png" alt=""/></a>


              </div><!--end details-->  
            </div><!--end content-->
        <p class="copyright">Copyright &copy; L'Geek Week. All rights reserved</p>
</div><!--end main-->

</div><!--end class container-->

</body>

</html>

Pleaase help me !!!! Any help would be highly appreciated.

Was it helpful?

Solution

According to the documentation, you need to add this:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            htmlFeed: false,
            ajaxFeed: true,
            feedUrl: 'PUT THE URL OF THE RSS FEED HERE - e.g. http://example.com/rss.xml',
            feedType: 'xml'
        });
    });
</script>

Also, keep in mind your RSS feed MUST be on the same domain as your site. Here are all the options of the plugin:

$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // The speed of the reveal
        ajaxFeed: false,       // Populate jQuery News Ticker via a feed
        feedUrl: false,        // The URL of the feed
                           // MUST BE ON THE SAME DOMAIN AS THE TICKER
        feedType: 'xml',       // Currently only XML
        htmlFeed: true,        // Populate jQuery News Ticker via HTML
        debugMode: true,       // Show some helpful errors in the console or as alerts
                           // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
        controls: true,        // Whether or not to show the jQuery News Ticker controls
        titleText: 'Latest',   // To remove the title set this to an empty String
        displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // The pause on a news item before being replaced
        fadeInSpeed: 600,      // Speed of fade in animation
        fadeOutSpeed: 300      // Speed of fade out animation
    );
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top