treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Issue With Twitter Feed in Wordpress

  • Hi, Guys

    So I got my Twitter feed working in Wordpress but it isn't very reliable and I don't know why. So when I say this I mean when you refresh the page the tweet won't show up any more. I'm not sure if my code is wrong or not.

    My Template is http://www.karbondesigns.com

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\" <?php language_attributes(); ?>>

    <head profile=\"http://gmpg.org/xfn/11\">
    <meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name=\"generator\" content=\"WordPress <?php bloginfo('version'); ?>\" /> <!-- leave this for stats -->

    <link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text/css\" media=\"screen\" />
    <!--[if IE 6]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"<?php bloginfo('stylesheet_directory'); ?>/style-ie6.css\" />
    <![endif]-->


    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"<?php bloginfo('name'); ?> RSS Feed\" href=\"<?php bloginfo('rss2_url'); ?>\" />
    <link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />

    <script src=\"http://karbondesigns.com/js/jquery-1.2.6.min.js\" type=\"text/javascript\"></script>

    <script type=\"text/javascript\">
    //<![CDATA[
    $(function(){

    $.getJSON('http://twitter.com/status/user_timeline/joelcummings.json?count=1&callback=?', function(data){
    $.each(data, function(index, item){
    $('.twitter .inside').append('<div class=\"tweet\"><p>' + item.text + '</p></div>');
    });
    });

    $.getJSON(\"\", function(data){
    $.each(data.items, function(index, item){
    $(\"<img/>\").attr(\"src\", item.media.m).addClass(\"thumb\").appendTo(\".flickr .inside\").wrap(\"<a href='\" + item.link + \"'></a>\").wrap(\"<div class='flickr-thumb' />\");
    });
    });

    });
    //]]>

    </script>

    <?php wp_head(); ?>
    </head>

    <?php
    $page = $_SERVER['REQUEST_URI'];
    $page = str_replace(\"/\",\"\",$page);
    $page = str_replace(\".php\",\"\",$page);
    $page = $page ? $page : 'default'
    ?>

    <body id=\"<?php echo $page ?>\">

    <div id=\"page-wrap\">

    <div id=\"top-bar\">

    <h1 id=\"logo\"><a href=\"<?php echo get_option('home'); ?>/\"><?php bloginfo('name'); ?></a></h1>

    <p><?php bloginfo('description'); ?></p>

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <div class=\"clear\"></div>
    </div>

    <div id=\"menu-bar\">

    <ul id=\"main-nav\">
    <li class=\"home\"><a href=\"/\">Home</a></li>
    <li class=\"about\"><a href=\"/about/\">About</a></li>
    <li class=\"contact\"><a href=\"/contact/\">Contact</a></li>
    </ul>

    <ul id=\"extra-nav\">
    <li class=\"portfolio\"><a href=\"/portfolio/\">Portfolio</a></li>
    <li class=\"resume\"><a href=\"/resume/\">Resume</a></li>
    </ul>

    <div class=\"clear\"></div>

    </div>


    Here's my Sidebar

    <div id=\"socialsidebar\">

    <div class=\"widget twitter\">
    <div class=\"inside\">
    <h4>Twitter</h4>
    </div>

    <a href=\"http://twitter.com/joelcummings\"><img src=\"<?php bloginfo('stylesheet_directory'); ?>/images/twitterbird.jpg\" alt=\"Twitter\" style=\"margin: 0 0 10px 10px; display: block;\" /></a>
    </div>

    <div class=\"widget\">
    <div class=\"inside\">
    <h4>Track Me!</h4>

    <ul>
    <li><p>Facebook</p></li>
    <li><p><a href=\"www.twitter.com/joelcummings\">Twitter</a></p></li>
    <li><p>Flickr</p></li>
    <li><p>Pownce</p></li>
    </ul>
    </div>
    </div>


    </div>
  • Anyone? I just Thoughr I'd add it hasn't worked today but was working Yesterday! I'm confused as to why this is happening.
  • Your link to the jQuery library seems to be broken:

    http://karbondesigns.com/js/jquery-1.2.6.min.js
  • I changed the Link to my JQuery to somewhere I know it works still no go.

    Any Other Ideas
  • Now I'm seeing what you originally saw. I got it to load once or twice the rest of the time it was erroring.

    Here is the error I am seeing:
    http://skitch.com/chriscoyier/hwmq/karbondesigns.com

    It's something in the jquery library itself that is erroring, which is super weird if you ask me. And you can see below that that part of your tweet is making it in. I'm afraid I don't know what to tell you. I'd maybe try linking to the Google-hosted copy of jQuery.
  • Still No go!

    Here's my New Code Social Sidebar Remains the Same. I don't think it's the problem though.

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\" <?php language_attributes(); ?>>

    <head profile=\"http://gmpg.org/xfn/11\">
    <meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name=\"generator\" content=\"WordPress <?php bloginfo('version'); ?>\" /> <!-- leave this for stats -->

    <link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text/css\" media=\"screen\" />
    <!--[if IE 6]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"<?php bloginfo('stylesheet_directory'); ?>/style-ie6.css\" />
    <![endif]-->


    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"<?php bloginfo('name'); ?> RSS Feed\" href=\"<?php bloginfo('rss2_url'); ?>\" />
    <link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />

    <script src=\"http://designia.freehostia.com/js/jquery-1.2.6.js\" type=\"text/javascript\"></script>

    <script type=\"text/javascript\">
    //<![CDATA[
    $(function(){

    $.getJSON('http://twitter.com/status/user_timeline/joelcummings.json?count=1&callback=?', function(data){
    $.each(data, function(index, item){
    $('.twitter .inside').append('<div class=\"tweet\"><p>' + item.text + '</p></div>');
    });
    });

    $.getJSON(\"\", function(data){
    $.each(data.items, function(index, item){
    $(\"<img/>\").attr(\"src\", item.media.m).addClass(\"thumb\").appendTo(\".flickr .inside\").wrap(\"<a href='\" + item.link + \"'></a>\").wrap(\"<div class='flickr-thumb' />\");
    });
    });

    });
    //]]>

    </script>

    <?php wp_head(); ?>
    </head>

    <?php
    $page = $_SERVER['REQUEST_URI'];
    $page = str_replace(\"/\",\"\",$page);
    $page = str_replace(\".php\",\"\",$page);
    $page = $page ? $page : 'default'
    ?>

    <body id=\"<?php echo $page ?>\">

    <div id=\"page-wrap\">

    <div id=\"top-bar\">

    <h1 id=\"logo\"><a href=\"<?php echo get_option('home'); ?>/\"><?php bloginfo('name'); ?></a></h1>

    <p><?php bloginfo('description'); ?></p>

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <div class=\"clear\"></div>
    </div>

    <div id=\"menu-bar\">

    <ul id=\"main-nav\">
    <li class=\"home\"><a href=\"/\">Home</a></li>
    <li class=\"about\"><a href=\"/about/\">About</a></li>
    <li class=\"contact\"><a href=\"/contact/\">Contact</a></li>
    </ul>

    <ul id=\"extra-nav\">
    <li class=\"portfolio\"><a href=\"/portfolio/\">Portfolio</a></li>
    <li class=\"resume\"><a href=\"/resume/\">Resume</a></li>
    </ul>

    <div class=\"clear\"></div>

    </div>