1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Add Twitter to Sidebar

Discussion in 'Template Modifications [Archive]' started by Travis, Dec 11, 2010.

  1. Travis

    Travis Active Member

    Using Trombones13's Guide to adding Custom Sidebar Blocks , I thought I would have a go at adding Twitter Feeds to the Sidebar.

    Style One:Twitter Feed

    1. First,go to http://twitter.com/about/resources/widgets/widget_profile and input your username and design it to your satisfaction. For best results,the dimensions should be set to width:225,height:300.When you have finished designing it,click "Finish & Grab code".Copy the code to your clipboard.
    2. Go to your Admin CP >> Appearance >> Templates >> Create New Template. Name the template whatever you want. For this example,I am calling it "twitter_feed".
    3. Paste the following into your template.
    Code:
    <div class="section">
    
    <div class="secondaryContent">YOUR TWITTER CODE HERE </div>
    </div>
    *Remember to replace "YOUR TWITTER CODE HERE" with the code you have copied from the twitter page.
    EXAMPLE CODE:
    Code:
    <div class="section">
        <div class="secondaryContent">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 4,
      interval: 6000,
      width: 225,
      height: 300,
      theme: {
        shell: {
          background: '#333333',
          color: '#ffffff'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#4aed05'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('TravisM661').start();
    </script>
        </div>
    </div>
    
    4. Save and Exit Template​
    5. Open "PAGE_CONTAINER" and find {xen:raw $sidebar}. ´╗┐Paste <xen:include template="name_of_your_custom_template" />.Immediately after it,Like this:​
    Code:
    <!-- sidebar -->
                    <aside>
                        <div class="sidebar">
                            <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                            {xen:raw $sidebar}
    <xen:include template="twitter_feed" />
                       </div>
                    </aside>
                </xen:if>
     

    Attached Files:

  2. Travis

    Travis Active Member

    Style Two:Follow Me/Us on Twitter
    1. Go to http://twitter.com/about/resources/buttons# and follow the instructions
    2. Follow Step 2 as above.
    3. Paste into the template:
    Code:
    <div class="section">
    <div class="secondaryContent">
    YOUR TWITTER CODE HERE
    </div>
    </div>
    
    Example:
    Code:
    <div class="section">
    
    4. Follow Steps 4 & 5 as above
     

    Attached Files:

    Chimpie, arabic, PoLiZe and 1 other person like this.
  3. Travis

    Travis Active Member

    Reserved
     
  4. Peggy

    Peggy Well-Known Member

    Awesome Travis! Did you put this on your site? If so, do you have a screenshot?
     
  5. Travis

    Travis Active Member

    Opps. Knew I forgot something! Screenshots Up in 2 Secs!
     
  6. Travis

    Travis Active Member

  7. Peggy

    Peggy Well-Known Member

    VERY nice! Thanks for posting the screenies. I'll add this to my site once it's up and going.
     
  8. PoLiZe

    PoLiZe Well-Known Member

    nice! Thanks for post that :)
     
  9. Trombones13

    Trombones13 Well-Known Member

    One other thing--don't forget to add the xen:include template line to one of your templates, using the guide posted here. :)
     
  10. Travis

    Travis Active Member

    Thanks. First post updated. I had put it in,but the formatting was all messed up and it was mixed within the example code. :)
     
    Trombones13 likes this.
  11. Kaiser

    Kaiser Well-Known Member

    Very cool, there should be a mod for this.
     
  12. Peggy

    Peggy Well-Known Member

    It warms my heart to see coders working together.
     
    Trombones13 likes this.
  13. Trombones13

    Trombones13 Well-Known Member

    No problem. :)
    Isn't that what this is? o_O
     
    Peggy likes this.
  14. Peggy

    Peggy Well-Known Member

    This is a mod. :)
     
  15. Travis

    Travis Active Member

    I think he means an add-on that doesn't require manual template edits :)
     
  16. Kaiser

    Kaiser Well-Known Member

    Well like a actual plugin, not a template edit :) But its cool im going to use it when I get twiiter for my site.
     
  17. Peggy

    Peggy Well-Known Member

    Actually it would be wonderful if all of these template edits could be made into plugins, so we don't have to re-do all the edits on upgrade.
     
  18. Eliteoomph

    Eliteoomph Member

    looks great on my site! TY
     

Share This Page