{"authorId":"1","title":"Fixing a Twitter WordPress Plugin with jQuery","slug":"fixing-a-twitter-wordpress-plugin-with-jquery","postDate":1234400272,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I use the fantastic <a href=\"http:\/\/wordpress.org\/extend\/plugins\/twitter-for-wordpress\/\">Twitter for WordPress plugin<\/a> on my website. Sometimes though, <a href=\"http:\/\/twitter.com\">Twitter<\/a> decides that it doesn&rsquo;t want to make my tweets available. The plugin has accounted for this, and it displays <strong>No public Twitter messages<\/strong> when this happens. That kinda sucks though.<\/p>\n<!--more-->\n<p>It&rsquo;s definitely nice that the plugin doesn&rsquo;t throw an error, but I really don&rsquo;t want that message displayed on my site. So what&rsquo;s the solution? <strong>jQuery of course<\/strong>.<\/p>\n\n<h2>When the Tweet Comes Through<\/h2>\n<p>Here is the markup that is displayed on my site when a tweet comes through successfully:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;div&nbsp;id=\"twitterContainer\"&gt;<br \/>&nbsp;&lt;a&nbsp;class=\"twitter-link\"&nbsp;href=\"http:\/\/twitter.com\/davist11\/status\/1200405534\"&gt;<br \/>&nbsp;&nbsp;I&nbsp;feel&nbsp;like&nbsp;I'm&nbsp;in&nbsp;an&nbsp;episode&nbsp;of&nbsp;Seinfeld&nbsp;right&nbsp;now.<br \/>&nbsp;&lt;\/a&gt;<br \/>&lt;\/div&gt;&nbsp;\n\n<\/code><\/div>\n\n<h2>When the Tweet Doesn&rsquo;t Come Through<\/h2>\n<p>This is what you end up with:<\/p>\n<div class=\"codeblock\"><code>\n&lt;div&nbsp;id=\"twitterContainer\"&gt;<br \/>&nbsp;No&nbsp;public&nbsp;Twitter&nbsp;messages.<br \/>&lt;\/div&gt;&nbsp;\n\n<\/code><\/div>\n\n<h2>The jQuery<\/h2>\n<p>My thinking is that I will check the contents of <strong>div#twitterContainer<\/strong> to see if it is <strong>No public Twitter messages<\/strong>. If it is, I think it would be useful to replace that text with a link to <a href=\"http:\/\/twitter.com\/davist11\">my Twitter account<\/a> with a message telling people to follow me.<\/p>\n\n<p>So first, let&rsquo;s execute the jQuery code when the document is loaded:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, we are going to check and see <strong>if the contents of div#twitterContainer is No public Twitter messages<\/strong>:\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;&lt;strong&gt;if(jQuery.trim($('div#twitterContainer').text())&nbsp;==&nbsp;'No&nbsp;public&nbsp;Twitter&nbsp;messages.')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&#125;&lt;\/strong&gt;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Finally, let&rsquo;s just replace this text with a link to my Twitter feed:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;if(jQuery.trim($('div#twitterContainer').text())&nbsp;==&nbsp;'No&nbsp;public&nbsp;Twitter&nbsp;messages.')&nbsp;&#123;<br \/>&nbsp;&nbsp;&lt;strong&gt;$('div#twitterContainer').html('&lt;a&nbsp;href=\"http:\/\/twitter.com\/davist11\"&nbsp;class=\"twitter-link\"&gt;Follow&nbsp;Me&nbsp;on&nbsp;Twitter&lt;\/a&gt;');&lt;\/strong&gt;&nbsp;&nbsp;<br \/>&nbsp;&#125;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<div class=\"clearfix\">\n<p><img src=\"http:\/\/trevordavis.net\/images\/content\/2009\/02\/twitter-plugin-fixed.jpg\" alt=\"Screenshot of fixed Twitter plugin\" class=\"rightSide frame\" height=\"164\" width=\"150\" \/><strong>That&rsquo;s it<\/strong>. This is just <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/improving-a-flickr-plugin-with-jquery\/\">another example of how I have used jQuery to improve a WordPress plugin on my site<\/a>.<\/p>\n\n<p>You can see this in action on my site, or <a href=\"http:\/\/trevordavis.net\/play\/fixing-twitter-plugin\/\">take a look at the demo<\/a>.\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/fixing-twitter-plugin\/\" class=\"more-link\">See Demo<\/a><\/p>\n<\/div>","14":{"old_id":{}}}}