Twitter badge with jquery

[Boudi]

Thnx mate!

Ruud pointed me a while ago on your link. Works great!

[badknight]

try http://tweet.seaofclouds.com/ ?

[Boudi]

Update: Twitterbadge is NOT working any more since Twitter has changed their API in 09-2012 and most of the external Tweet snippets became useless.

Boudi

[deekodesk]

I have followed each step as mentioned but i got error:

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

[Boudi]

Strange. Reinstalled it again for the 3rd time  and now it works.

Thnx anyway

[maschmi]

No problem with FF 4.01

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

[Boudi]

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

[Ehfex]

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

[BlackBird]

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

[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.

[gelöscht durch Administrator]

[BlackBird]

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

[Damaverick]

I also fixed this problem.

in the file twitterbadge.jquery on line 24 I changed

Code Select Expand

.prependTo('#tweet') into

Code Select Expand

.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 Select Expand

<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 Select Expand

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.

[Damaverick]

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

[BlackBird]

Hm, the timeline should already be sorted right.

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

[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]

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

[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!

[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 Select Expand

<!-- 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>

[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]

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 Select Expand

<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

[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

[BlackBird]

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

[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

[erpe0812]

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

[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 Select Expand

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]]