1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Turning notifications into a Twitter feed

Discussion in 'Styling and Customization Questions' started by Jeff Fuqua, Mar 25, 2013.

  1. 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.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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 likes this.
  3. Jeff Fuqua

    Jeff Fuqua Well-Known Member

    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.
     
  4. Jeff Fuqua

    Jeff Fuqua Well-Known Member

    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 likes this.
  5. SportainmentMG

    SportainmentMG Active Member

    would like to try this out if possible
     
  6. Jeff Fuqua

    Jeff Fuqua Well-Known Member

    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.
     

    Attached Files:

    Brandon Sheley likes this.

Share This Page