Turning notifications into a Twitter feed

Jeff Fuqua

Jeff Fuqua

Well-known member
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.
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
SportainmentMG said:
would like to try this out if possible
Click to expand...
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 <!-- Tweet Rotator --> and <!-- Twitter Feed -->, adjust the path to those files on your server. I placed both in the same folder.

4. Also under <!-- Twitter Feed -->, 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.
 

Attachments

Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom