Twitter badge with jquery

[Boudi]

Hi there,

I'm working on a new website with a twitter badge on it (show the tweets on the website)
Twitter delivers a basic javascript which shows the tweets.

The problem is is that it slows down the website a LOT!

After doing some search I found this url: http://www.sitepoint.com/blogs/2009/04/21/make-your-own-web-site-badges-with-jquery-and-json/

In this url there's explained how you can show the tweets on your website with jquery. That way it loads superfast. The code is there too.

Now I'm a n00b with jquery but I think this code could be very handy for wb websites with twitter feeds on it because of the loading time.

Is it possible to create a jquery plugin for wb? So we all can use it?

Boudi

[erpe]

Hi

i would like to try this.

rgds

erpe

[erpe]

I have finished the new plugin.   

But I am looking for a way to give it some more usubality.

rgds

erpe

[Boudi]

That's quick! haha

Thnq!

Boudi

[erpe]

Hi Boudi

finsihed it now. Hope it is as easy to use as the other plugins
http://www.websitebakers.com/pages/posts/new-plugin-twitterbadge-192.php

rgds

erpe

[CodeALot]

Why are step 4 and 5 in your "readme"? Is the naming in all examples correct? (You use "twitter" and "twitterbadge", which one is right?)

Code:

4  Add the following code to a wysiwyg section on your page
Example:

<p>[[jQueryInclude?preset=twitter]]</p>
<div id="tweet">
<p><a href="http://twitter.com/yourdomain" target="_blank"><img alt="" border="0" src="http://domain.tld/modules/jqueryadmin/plugins/twitterbadge/img/twitter.png" /></a></p>
</div>

5 Include the following code in your template or a code section or a wsiwyg section on your page:

               [[jQueryInclude?preset=twitterbadge]]
              

[erpe]

yes you are right, only one of the names is ok, depending on what you called your preset.
I will correct this and delete item no 5.

rgds

erpe

[Damaverick]

Hello,

I can't get this plugin workin on my site

1. I've installed the module jQueryAdmin V2.x
2. In jQueryAdmin I installed the pluging Twitterbadge
3. According to the little help in Twitterbadge I changed de default values to my own values
4. I configured Twitterbadge as a preset in the jQueryAdmin folder with the name twitterbadge
5. I configured a WYSIWYG page with the following code: <p>[[jQueryInclude?preset=twitterbadge]]</p>

But somehow I can't get it working.

Kind regards

[BlackBird]

Do you get any JS Errors? Can we see the page for analyzing?

[Damaverick]

Do you get any JS Errors? Can we see the page for analyzing?

No JS Errors

URL: http://houston.active-web.nl/heldcreaties

username: test
pw: test

[Damaverick]

Do you get any JS Errors? Can we see the page for analyzing?

No JS Errors

URL: http://houston.active-web.nl/heldcreaties

username: test
pw: test

No errors is not completely true I see now
Because I tested with some stuff I found on the forum here to get jQuery working, I get an error on that .js

code in that js is:

Code:

<script language="JavaScript" type="text/javascript">
var URL = '<?php echo WB_URL ?>';
var WB_URL = '<?php echo WB_URL ?>';
var TEMPLATE_DIR = '<?php echo TEMPLATE_DIR; ?>';
var UTC_TIME = '<?php echo gmdate('H:i:s'); ?>';
</script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-ui-min.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-insert.js" type="text/javascript"></script>

But before I called this .js, the plugin also didn't worked and I didn't got any JS errors

[BlackBird]

Firebug says "Fehler: missing ; before statement
Quelldatei: http://houston.active-web.nl/heldcreaties/templates/Held_Creaties/jquery_api.js
Zeile: 7, Spalte: 1

The content of that file is HTML, not JS, so remove it or put the contents into the head directly.

There are also 2 jQuery Core files loaded - 1 by jQueryAdmin, 1 from the include's folder. Remove the second one.

And least, I cannot find the twitterbadge.js in the header. (Only the css.) So check the preset file you created.

[Damaverick]

Firebug says "Fehler: missing ; before statement
Quelldatei: http://houston.active-web.nl/heldcreaties/templates/Held_Creaties/jquery_api.js
Zeile: 7, Spalte: 1

The content of that file is HTML, not JS, so remove it or put the contents into the head directly.

- Removed it, I was trying something out with that js to get it to work, but aperently it didn't and generated this error

There are also 2 jQuery Core files loaded - 1 by jQueryAdmin, 1 from the include's folder. Remove the second one.

- 1 (the one in the includes folder) I was using for the captionslider, but after installing jQueryAdmin, it became unnecessary, so I removed the second one (and caption slider still worked )

And least, I cannot find the twitterbadge.js in the header. (Only the css.) So check the preset file you created.

The reason for this one is because, there isn't one... I already downloaded the plugin again, but also in the plugin installzip there isn't a .js file present.
al the JS code is in the jquery file that I call on the page.

This is the code within the twitterbadge.jquery file:

Code:

<!-- position: head -->
<link rel="stylesheet" type="text/css" href="{WB_URL}/modules/jqueryadmin/plugins/twitterbadge/twitterbadge.css" media="screen" />

<!-- please edit these vars: -->
<script type="text/javascript">
var twitterdomain = 'http://www.twitter.com/heldcreaties';
var num = '5';
</script>


<!-- position: body -->
<!-- settings below -->
<script type="text/javascript">

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/user_timeline/"+twitterdomain+".json?count="+num+"&callback=?";
  $.getJSON(tweeturl, function(data){
    $.each(data, function(i, item) {
      var txt = item.text
     .replace(/(https?:\/\/[-a-z0-9._~:\/?#@!$&\'()*+,;=%]+)/ig,'<a href="$1">$1</a>')
     .replace(/@+([_A-Za-z0-9-]+)/ig, '<a href="http://twitter.com/$1">@$1</a>')
     .replace(/#+([_A-Za-z0-9-]+)/ig, '<a href="http://search.twitter.com/search?q=$1">#$1</a>');
   $('<p></p>').addClass(i%2 ? 'even' : 'odd').html(txt).prependTo('#tweet');
 });
  });
});
</script>

[Damaverick]

I solved my problem...

Instead of using the whole URL for "var twitterdomain" I have to use only my twitter ID.

Now it works... thnx for the help!

[BlackBird]

Ah! Didn't know that. (Don't know the plugin, anyway.) Nice to hear that you solved your problem.

[Damaverick]

now it's working I have a new question

If you see the code from twitterbadge.jquery I posted.
How can I sort them to get the newest on top?
I tried to sort the array "txt" with method sort, but how can I get this the right way.

[BlackBird]

Hm, the timeline should already be sorted right.

http://dev.twitter.com/doc/get/statuses/user_timeline

[Damaverick]

hmmm strange, not at my site... the newest are on the bottom, not on top :S

[Damaverick]

I also fixed this problem.

in the file twitterbadge.jquery on line 24 I changed

Code:

.prependTo('#tweet')

into

Code:

.appendTo('#tweet')

The only disadvantage this gave is that the image came also ontop (above the twitter messages).
I solved this by deleting the rule

Code:

<p><a target="_blank" href="http://twitter.com/twitterID">
<img border="0" alt="" src="{WB_URL}/modules/jqueryadmin/plugins/twitterbadge/img/Twitter_Button_10.png" />
</a></p>

and placed this rule into the javascipt in the file twitterbadge.jquery as:

Code:

document.getElementById('image').innerHTML =
'<p><a target="_blank" href="http://twitter.com/heldcreaties">
<img border="0" alt="" src="{WB_URL}/modules/jqueryadmin/plugins/twitterbadge/img/Twitter_Button_10.png" />
</a></p>';

and called this element in a div tag with ID image on the page.

The image was placed below the twitter messages but also outside the border created with the css.
To play around with an extra div around the other 2 divs en give this div a border I also fixed this.

[BlackBird]

Sounds good. May you'd like to upload your fixed plugin? I can place it in the jQuery Showroom then.

[Damaverick]

Here's the fixed plugin... Maybe you could test it just to be sure...
I'm not at home so I quickly copy-pasted the settings from my backend.

I placed a readme.txt in the zip file with the explanation.

[BlackBird]

Thank you! I will check it out and upload it to the Showroom later.

[Ehfex]

I will have to try this as I am testing this WB out right now for the first time.

[Boudi]

Tested it. Does not seem to work under Firefox 4.

[maschmi]

No problem with FF 4.01

http://jquery.websitebakers.com/plugins/others/twitterbadge.php