{"id":785,"date":"2012-04-24T19:57:33","date_gmt":"2012-04-24T17:57:33","guid":{"rendered":"http:\/\/www.kavdesign.net\/blog\/?p=785"},"modified":"2012-04-24T21:04:23","modified_gmt":"2012-04-24T19:04:23","slug":"create-a-simple-ticker-in-this-case-showing-latest-twits-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.kavdesign.net\/blog\/coding\/create-a-simple-ticker-in-this-case-showing-latest-twits-in-wordpress\/","title":{"rendered":"Create a simple ticker in this case showing latest tweets in WordPress"},"content":{"rendered":"

First lets install some plugin to show the latest tweets in wordpress. The plugin that I used is this one: http:\/\/wordpress.org\/extend\/plugins\/twitter-for-wordpress\/<\/p>\n

You can use any plugin.<\/p>\n

Install and put the widget in some position.<\/p>\n

Here is an example of the output needed for the jQuery to work correctly:<\/p>\n

<div>\r\n\u00a0\u00a0\u00a0 <p>A tweet is here<\/p>\r\n\u00a0\u00a0\u00a0 <p>Another tweet here<\/p>\r\n\u00a0\u00a0\u00a0 <!-- cont... -->\r\n<\/div><\/pre>\n

\nSo we need to make a small change in the latest tweets plugin output to match this.<\/p>\n
The just add this java script to the site:<\/p>\n
jQuery(function($) {\r\n\u00a0\u00a0 \u00a0var opts = {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0el: '.twitter-stream',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0items: new Array(),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0count: 0,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0total: -1,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0delay: 6000,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0animate: true\r\n\u00a0\u00a0 \u00a0};\r\n\r\n\u00a0\u00a0 \u00a0$(opts.el+' p').each(function(i) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0opts.items[i] = $(this).html();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0opts.total++;\r\n\u00a0\u00a0 \u00a0}).hide();\r\n\r\n\u00a0\u00a0 \u00a0runTweeter();\r\n\r\n\u00a0\u00a0 \u00a0function runTweeter() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(opts.animate == true) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if($(opts.el+' p').length > 0) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(opts.el).children('p').fadeOut(500, function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).parent(0).empty().append('<p style=\"display: none;\">'+opts.items[opts.count]+'<\/p>').children('p').fadeIn(500);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(opts.el).empty().append('<p style=\"display: none;\">'+opts.items[opts.count]+'<\/p>').children('p').fadeIn(750);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(opts.el).empty().append('<p>'+opts.items[opts.count]+'<\/p>');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0setTimeout(function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(opts.count == opts.total) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0opts.count = 0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0opts.count++;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0runTweeter();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, opts.delay);\r\n\u00a0\u00a0 \u00a0}\r\n});<\/pre>\n
Then you can adjust the CSS to make it look better.<\/p>\n","protected":false},"excerpt":{"rendered":"
First lets install some plugin to show the latest tweets in wordpress. The plugin that I used is this one: http:\/\/wordpress.org\/extend\/plugins\/twitter-for-wordpress\/ You can use any<\/p>\n
Continue readingCreate a simple ticker in this case showing latest tweets in WordPress<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[9,82],"tags":[244,249,247,248,418],"class_list":["post-785","post","type-post","status-publish","format-standard","hentry","category-coding","category-wordpress","tag-ticker","tag-tweet","tag-tweeter","tag-tweets","tag-wordpress","entry"],"_links":{"self":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/comments?post=785"}],"version-history":[{"count":7,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/785\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/785\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/media?parent=785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/categories?post=785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/tags?post=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}