JavaScript sidebar widget plugin for WordPress : uses source

This is a very simple sidebar widget which places JavaScript code in the widget. In this plugin, you need to provide the url of the JavaScript and this plugin will use that js file as it's source.

Download the plugin here

I will go through all the JavaScript codes we use generally in our websites or blogs and will update compatibility list here.

Usage:

• BidVertiser Ads
  

  BidVertiser Ads codes provide an URL of JavaScript code, which you need to include as the source in a JavaScript block. Get the url from the code generated from BidVertiser and provide while editing the widget values and you can see the ads in this sidebar widget.

  
  

Snapshots will be provided soon

If you want to put any JavaScript code inside the <script> tag, then try my JavaScript Block Widget plugin (Download).

Update
You can also able to add JavaScript codes in text widget in sidebar. So you don't need this plugin.

JavaScript sidebar widget plugin for WordPress

I created my first plugin for WordPress. Well it's not a hi-fi complex plugin and never does any great work. It simply puts the JavaScript code (need to be provided while editing the widget). You can put any JavaScript code.

Download the plugin here

I will go through all the JavaScript codes we use generally in our websites or blogs and will update compatibility list here.

Snapshots will be provided soon.

If you want to include JS from a file, then I have crated Include JavaScript Widget plugin, which I will upload soon.

Update
You can also able to add JavaScript codes in text widget in sidebar. So you don't need this plugin.

Copyright and HTML

Now I am going to explain how copyright is related with HTML.

If you write the following code in html:
Code:

<a href="http://farm4.static.flickr.com/3475/3362464113_c8a721e308.jpg">Copyrighted photo</a>

Preview
Copyrighted photo

The above code is not infringement of copyright of the owner.

Just make a little modification to the above html code. Replace a by img, replace href, also remove the text in between the html tags. For XHTML validation, you can remove the img inside the closing tag and replace the code &rt;< by a blank space or white space. (You can even just delete it). Now the code becomes:
Code:

<img src="http://farm4.static.flickr.com/3475/3362464113_c8a721e308.jpg"/>

Preview
Please excuse me; I can't show you the preview here, it may infringement of copyright of the owner. However you can try it yourself :P

Well, now using the above code can be a infringement of copyright of the owner.

Manage Twitter and Identica together

I was at OSI Tech Days and heard about Identica - a microblogging service (like twitter), which runs Laconica - The Open Microblogging Tool. Thought to have a trial and found it cool. I registered myself using an OpenId and got started. I found some features are really cool at Identica.

It provides you a service URL Auto-shortening, with an option of 8 services to choose from. It also included none, if you don't like to shorten any url.

A label at Identica Automatically subscribe to whoever subscribes to me (best for non-humans) is humorous and also a fact. This auto follow is never a behavior of any human. I found difficulty while choosing my timezone. I think timezone need to be sorted according to difference from GMT and should have difference mentioned there.

How to Manage Twitter and Identica together?
Now let me come to the this point as the title suggests. I will tell you about some features of Identica and some other tools, the way I discovered this way.

There is a settings option for your twitter account (Wow! it shows twitter's popularity), where you can provide your twitter account. By providing your twitter account, it automatically sends your notices to Twitter, and subscribe to Twitter friends already here. Something really funny happens here. If your reply someone at Identica, after updating this at Twitter (automatically), the reply may refer to other guy with similar id at twitter. I may cause some embarrassing situations. I got lucky, I have similar id at both places. However this option enables you to update Identica and twitter at a time.

Let's think about any third party tool for Identica, we have loads of option for twitter. I have not spend any time for searching such tools for Identica. But there is an IM Settings option, where you can set your Jabber/Gtalk id and post and receive updates. I found this feature cool and started using it. I update using my Gtalk client and it updates Identica, and Identica updates twitter.

Again I found a third party tool: Ping.fm, which has many applications on it's network list. I selected twitter, Identica and my Gtalk status to be updated via Ping.fm. Not feeling good to come to the web interface to post my updates. And found that, I can use Gtalk to update Ping.fm, similarly I used for Identica (However, they style of operation is bit different). Now if I want to update both twitter and Identica, I can just update to Pingbot via Gtalk. I am using Ping.fm as it also updates my Gtalk status (however fails sometimes to update my gtalk status), else I have another option to update Identica from my Gtalk.

One important thing is that, when I use Ping.fm, it updates both Identica and tweeter and at this case Identica does not to twitter, so it prevents duplicate posts at twitter. I think, Identica tries to update twitter, but twitter refuses as the duplicate content of most recent post. You can turn off the twitter settings at Identica, if you are using any third party tool to update both at a same time.

You can follow me on identi.ca also.

Update 15 March
Now I am using Twhirl. It runs on Adobe Air. I am able to update either twitter or Identica with Ping.fm (you can set your ping.fm account to update with any of these account: twitter or Identica). So if you are updating twitter, Ping.fm will update Identica. Similarly if you are updating Identica, Ping.fm will update twitter.

To reduce unnecessary wastage of requests, I did some changing in Connect settings of Identica. Now my Identica is not sending any message to Gtalk and not updating twitter also.

How to Use Syntax Highlighter in Blogger

You can use this tutorial not only with Blogger, but also in your other websites and blogs.

What is Syntax Highlighter?
SyntaxHighlighter is a combination of some JavaScript, CSS (and of course, a flash (.swf) file for copy to clip board function), which we can use in any of our websites, to give an illustrative look to any code example.
As in this blog, I mostly talk about technology, which also includes some codding part (I need to give some example codes), I decided to use this here.

Where to get SyntaxHighlighter?
SyntaxHighlighter is a donationware. This means you need to donate to get latest release. However little old but good version is available for free. I am using Version 1.5.1 here.

I downloaded those files, now what to do?
I hope you have extracted the files already. Now you can see there 3 folders: Scripts, Styles and Uncompressed. Scripts contains JavaScript and Flash file, Styles contains CSS files and Uncompressed contains uncompressed JavaScript which you can have a look and modify, if you need. Now you need to upload the files in Scripts and Styles folders to your server. If you are using blogger, then you need to host files somewhere else on the Internet, I would recommend to use XtreemHost.

For non Blogger websites and blogs
Now if you have a website/blog other than blogger, then the following code at the bottom of the web page. I would recommend to place this code just before closing body element.

<link href='[RELATIVE PATH TO THIS FILE]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shCore.js' type='text/javascript'/>    
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCpp.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCSharp.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCss.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushJava.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushJScript.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushSql.js' type='text/javascript'/> 
<script src='[RELATIVE PATH TO THIS FILE]/shBrushXml.js' type='text/javascript'/>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '[RELATIVE PATH TO THIS FILE]/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Remember to replace the code [RELATIVE PATH TO THIS FILE] with the actual relative path.

How to place code blocks or code examples?
This is the part, which going to be displayed as your code examples with SyntaxHighlighter. You can write your code either inside a <pre> tag or <textarea> tag. If you are using pre tag, then you need to replace < with &lt; inside the code block. In case textarea no need to care this. You have to Set name attribute to code and class attribute to one of the language aliases you wish to use. See example below:

<pre name="code" class="html">
... some code here ...
</pre>

For Blogger will be Updated Soon