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

Boudi · « **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

erpe0812 · « **Reply #1 on:** May 11, 2010, 09:08:59 AM »

Hi

i would like to try this.

rgds

erpe

erpe0812 · « **Reply #2 on:** May 11, 2010, 09:45:34 AM »

I have finished the new plugin.

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

rgds

erpe

Boudi · « **Reply #3 on:** May 11, 2010, 11:25:39 AM »

That's quick! haha

Thnq!

Boudi

erpe0812 · « **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

CodeALot · « **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 · « **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

Damaverick · « **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

BlackBird · « **Reply #8 on:** March 09, 2011, 02:21:00 PM »

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

Damaverick · « **Reply #9 on:** March 09, 2011, 02:26:05 PM »

Quote from: BlackBird on March 09, 2011, 02:21:00 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

Damaverick · « **Reply #10 on:** March 09, 2011, 02:32:55 PM »

Quote from: Damaverick on March 09, 2011, 02:26:05 PM

Quote from: BlackBird on March 09, 2011, 02:21:00 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

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

BlackBird · « **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.

Damaverick · « **Reply #12 on:** March 09, 2011, 06:03:19 PM »

Quote from: BlackBird 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.

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

Quote from: BlackBird on March 09, 2011, 04:51:28 PM

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

)

Quote from: BlackBird on March 09, 2011, 04:51:28 PM

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>

Damaverick · « **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!

BlackBird · « **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.

Damaverick · « **Reply #15 on:** March 09, 2011, 06:38:09 PM »

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 · « **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

Damaverick · « **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

Damaverick · « **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.

BlackBird · « **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.

Damaverick · « **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]

BlackBird · « **Reply #21 on:** March 11, 2011, 01:12:11 PM »

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

Ehfex · « **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.

Boudi · « **Reply #23 on:** May 05, 2011, 04:17:11 PM »

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

maschmi · « **Reply #24 on:** May 05, 2011, 04:32:56 PM »

No problem with FF 4.01

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

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

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

erpe0812

erpe0812

erpe0812

erpe0812

Ehfex

maschmi