Author Topic: Twitter badge with jquery  (Read 23815 times)

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1190
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Twitter badge with jquery
« on: May 10, 2010, 09:23:26 PM »
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
...:: Bake the Unbakable ::...

erpe0812

  • Guest
Re: Twitter badge with jquery
« Reply #1 on: May 11, 2010, 09:08:59 AM »
Hi

i would like to try this.

rgds

erpe

erpe0812

  • Guest
Re: Twitter badge with jquery
« Reply #2 on: May 11, 2010, 09:45:34 AM »
I have finished the new plugin.   :-D

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

rgds

erpe

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1190
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: Twitter badge with jquery
« Reply #3 on: May 11, 2010, 11:25:39 AM »
That's quick! haha

Thnq!

Boudi
...:: Bake the Unbakable ::...

erpe0812

  • Guest
Re: Twitter badge with jquery
« Reply #4 on: May 11, 2010, 03:20:49 PM »
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

Offline CodeALot

  • Posts: 442
  • Gender: Male
Re: Twitter badge with jquery
« Reply #5 on: May 12, 2010, 10:07:50 AM »
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]
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]]
              

erpe0812

  • Guest
Re: Twitter badge with jquery
« Reply #6 on: May 12, 2010, 10:30:18 AM »
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

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #7 on: March 09, 2011, 02:16:33 PM »
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

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #8 on: March 09, 2011, 02:21:00 PM »
Do you get any JS Errors? Can we see the page for analyzing?

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #9 on: March 09, 2011, 02:26:05 PM »
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

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #10 on: March 09, 2011, 02:32:55 PM »
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 :P
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]
<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(&#39;H:i:s&#39;); ?>';
</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

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #11 on: March 09, 2011, 04:51:28 PM »
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.

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #12 on: March 09, 2011, 06:03:19 PM »
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 :P )

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]
<!-- 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>
« Last Edit: March 09, 2011, 06:13:06 PM by Damaverick »

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #13 on: March 09, 2011, 06:18:40 PM »
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!

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #14 on: March 09, 2011, 06:28:45 PM »
Ah! Didn't know that. (Don't know the plugin, anyway.) Nice to hear that you solved your problem. :)

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #15 on: March 09, 2011, 06:38:09 PM »
now it's working I have a new question :P

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.

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #16 on: March 09, 2011, 07:37:31 PM »
Hm, the timeline should already be sorted right.

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

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #17 on: March 09, 2011, 07:41:44 PM »
hmmm strange, not at my site... the newest are on the bottom, not on top :S

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #18 on: March 10, 2011, 01:30:09 AM »
I also fixed this problem.

in the file twitterbadge.jquery on line 24 I changed
Code: [Select]
.prependTo('#tweet') into
Code: [Select]
.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]
<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]
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.
« Last Edit: March 10, 2011, 01:33:08 AM by Damaverick »

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #19 on: March 10, 2011, 10:13:17 AM »
Sounds good. May you'd like to upload your fixed plugin? I can place it in the jQuery Showroom then.

Offline Damaverick

  • Posts: 58
Re: Twitter badge with jquery
« Reply #20 on: March 10, 2011, 12:19:34 PM »
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]

Offline BlackBird

  • Posts: 2573
Re: Twitter badge with jquery
« Reply #21 on: March 11, 2011, 01:12:11 PM »
Thank you! I will check it out and upload it to the Showroom later.

Offline Ehfex

  • Posts: 1
  • Gender: Male
    • Ehfex Media
Re: Twitter badge with jquery
« Reply #22 on: March 27, 2011, 01:47:31 AM »
I will have to try this as I am testing this WB out right now for the first time.

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1190
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: Twitter badge with jquery
« Reply #23 on: May 05, 2011, 04:17:11 PM »
Tested it. Does not seem to work under Firefox 4.
...:: Bake the Unbakable ::...

Offline maschmi

  • Posts: 67
  • Gender: Male
  • Forum Reader*****
Re: Twitter badge with jquery
« Reply #24 on: May 05, 2011, 04:32:56 PM »
Wischen ist Macht