Turning notifications into a Twitter feed

Jeff Fuqua · Mar 25, 2013

I've been playing around with some code in an effort to have my notifications bar pull in a Twitter feed. I somewhat have something working but it messed up the quick reply box.

Since I am a novice with such things, I thought I might post this here and see if any of you CSS gurus had any suggestions as to what I may need to do to get things working properly.

I have a file called rotation.js and twitter_feed.js. This code I place in the html part of the notification:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
/* TWITTER LIST */
ul#twitter_update_list
{
    margin                    : 10px 10px 0px 10px;
    list-style                        : none;
}
ul#twitter_update_list li
{
    list-style                        : none;
        display                    : none; /* Prevents the entire feed list from showing momentarily on page load */
}
.twitter-feed span
{
    font-size                        : 14px;
    color                            : #65a5d1;
  display                            : block;
  line-height                        : 1.3em;
}
/* TWITTER FEED LINKS */
.twitter-feed span a
{
    color                    : #AAA;
    text-decoration            : none;
}
.twitter-feed span a:hover
{
    color                    : #777;
    text-decoration            : underline;
}
/* OTHER LINKS */
.twitter-feed a
{
    color                    : #AAA;
    text-decoration            : none;
}
.twitter-feed a:hover
{
    color                    : #777;
    text-decoration            : none;
}
</style>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!-- Tweet Rotator -->
<script src="http://www.gotitans.com/TwitterFeed/scripts/rotate.js" type="text/javascript"></script>
</head>
<body>
<div class="twitter-feed">     
<ul id="twitter_update_list" class="rotate"></ul>
</div>
<!-- Twitter Feed -->
<script src="http://www.gotitans.com/TwitterFeed/scripts/twitter-feed.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=gotitanscom&include_rts=true&count=4&callback=twitterCallback2" type="text/javascript"></script>
<!-- Twitter Feed end -->
</body>
</html>

This actually does work but it appears some of the CSS is somehow applying to areas outside the notifications block. Quoting got wonky. Other unusual things happened.

I have it turned off for now. Thanks if anyone sees something I should adjust.

Jake Bunce · Mar 27, 2013

Where exactly on the page is that code being inserted?

You are including the jquery library which should be redundant. Plus it's a different version than the one XenForo uses. Probably don't include jquery.

You are probably looking at javascript conflicts.

Jeff Fuqua · Mar 27, 2013

I put it in the body of a notification itself where html is allowed. Yes, it was causing all kinds of weirdness so shut it down.

I'm a coding novice but will continue to play with it. I'll start by removing the jquery reference and see what happens.

Thanks, Jake.

Jeff Fuqua · Mar 28, 2013

Removing the jquery fixed me right up. It's working fine so far. Still testing but happy to share with anyone who is interested in doing this for their forum.

SportainmentMG · Apr 5, 2013

Jeff Fuqua said:
Removing the jquery fixed me right up. It's working fine so far. Still testing but happy to share with anyone who is interested in doing this for their forum.

would like to try this out if possible

Jeff Fuqua · Apr 5, 2013

SportainmentMG said:
would like to try this out if possible

Sure.

Let me first throw out a disclaimer that I am a novice with css. I played around with this until I got it to work with my style but you may need to adjust. But this should, at least, get you started.

Adding a Twitter Feed to your Notifications

1. Under "Admin CP/Home/Notices/List Notices", create a new notice. I called mine "Twitter Feed" and turned on the "add default text styling" option. I set mine to only show to logged in members in a few selected nodes.

2. In the message area, I added the following:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
/* TWITTER LIST */
ul#twitter_update_list
{
    margin                    : 6px 10px 0px 0px;
    list-style                 : none;
}
ul#twitter_update_list li
{
    list-style                 : none;
    display                    : none; /* Prevents the entire feed list from showing momentarily on page load */
}
.twitter-feed span
{
    font-size                  : 14px;
    color                        : #65a5d1;
}
/* TWITTER FEED LINKS */
.twitter-feed span a
{
    color                        : #AAA;
    text-decoration      : none;
}
.twitter-feed span a:hover
{
    color                          : #777;
    text-decoration       : underline;
}
/* OTHER LINKS */
.twitter-feed a
{
    color                          : #AAA;
    text-decoration        : none;
}
.twitter-feed a:hover
{
    color                           : #777;
    text-decoration        : none;
}
</style>
<!-- Tweet Rotator -->
<script src="http://www.gotitans.com/TwitterFeed/scripts/rotate.js" type="text/javascript"></script>
</head>
<body>
<div class="twitter-feed">       
<ul id="twitter_update_list" class="rotate"></ul>
</div>
<!-- Twitter Feed -->
<script src="http://www.gotitans.com/TwitterFeed/scripts/twitter-feed.js" type="text/javascript"></script> 
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=gotitanscom&include_rts=true&count=4&callback=twitterCallback2" type="text/javascript"></script>
<!-- Twitter Feed end -->
</body>
</html>

3. Where the code references  and , adjust the path to those files on your server. I placed both in the same folder.

4. Also under , you will see the screen name reference. You'll want to change the "gotitanscom" to the feed you want. Also, you see the "count=4" which you can adjust to however many tweets you want to have in the rotation.

5. You can open up the rotate.js file and adjust the speed of the rotation if you wish. Line 8 is currently "pause: 10000," which seems to be working well for me.

Attached are the twitter-feed.js and rotate.js files. Good luck.

Turning notifications into a Twitter feed

Jeff Fuqua

Well-known member

Jake Bunce

Well-known member

Jeff Fuqua

Well-known member

Jeff Fuqua

Well-known member

SportainmentMG

Active member

Jeff Fuqua

Well-known member

Attachments

Similar threads

We value your privacy