1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.

Displaying Tweets on custom pages

Discussion in 'Tips and Guides [Archive]' started by mrGTB, Nov 7, 2011.

  1. mrGTB

    mrGTB Well-Known Member

    I was reading this site earlier about adding tweets on your own site: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

    So after a few hours messing around I now have a custom page showing tweets, test the code out for yourself below and if you can improve upon it. Fire away with your tips! That site above does list other variables that can be used to expand this further pulling in more information with tweets e.t.c.

    Create a page and use this below:
    Replace mrgtbtweeting in 2 places with your twitter username.

    You can: see it working here.

    Code:
    <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    getTwitters('tweet', {
      id: 'mrgtbtweeting',
      count: 10,
      enableLinks: true,
      ignoreReplies: true,
      clearContents: true,
      template: '<div class="primaryContent">%text%<br /><a href="http://twitter.com/%mrgtbtweeting%/statuses/%id_str%/">%time%</a></div>'
    });
    </script>
     
    <div class="section sectionMain">
        <div class="heading">
        Twitter Feeds
        </div>
        <div class="subHeading">
        Read last 10 tweets made.
        </div>
        <div id="tweet">
        <a href="http://twitter.com/mrgtbtweeting"></a>
        </div>
    </div>
     
    <xen:sidebar>
    <div class="section">
        <div class="secondaryContent">
            <h3>Custom Block</h3>
        Custom Block
        </div>
    </div>
     
    <div class="section">
        <div class="secondaryContent">
            <h3>Custom Block</h3>
        Custom Block
        </div>
    </div>
     
    <div class="section">
        <div class="secondaryContent">
            <h3>Custom Block</h3>
        Custom Block
        </div>
    </div>
     
    <div class="section">
        <div class="secondaryContent">
            <h3>Custom Block</h3>
        Custom Block
        </div>
    </div>
    </xen:sidebar>
     
    Fuhrmann and Trombones13 like this.
  2. Trombones13

    Trombones13 Well-Known Member

    Looks nice! I have some plans to pull in a few feeds of things from Twitter onto a page--I'll let you know how this works and if I tweak anything. :)
     
  3. mrGTB

    mrGTB Well-Known Member

    No problem, have a play around see what can be improved.
     
  4. mrGTB

    mrGTB Well-Known Member

    Just an update on te Twitter code section I posted above. If you use this instead it will grab your avatar and display more detailed time details (replace mrgtbtweeting in two places).

    Code:
    <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    getTwitters('tweet', {
      id: 'mrgtbtweeting',
      count: 15,
      enableLinks: true,
      ignoreReplies: true,
      clearContents: true,
      template: '<img src="%user_profile_image_url%" width="48" height="48" style="float:left; margin-top:2px; margin-right:6px;" alt="%user_screen_name%" title="%user_screen_name%" /> <div class="primaryContent">%text%<br /><a href="http://twitter.com/%mrgtbtweeting%/statuses/%id_str%/">%created_at%</a></div>'
    });
    </script>
     

Share This Page