Rooturaj's Blog

Have you ever wondered about those special links that let you activate your Instant Messenger when you click a link on some website and let you talk to their customer support or Sales guy? Ever wanted to include the same on your own blog or website? Here is my one stop guide to all special messenger links.

Popular Messengers - Using them on your Website.

You don’t always need to use those free chat integrations on your website that eat up your bandwidth and are not much user friendly as well. Moreover they bug your visitors with adds if you are using free versions. Almost everyone will has and knows how to use a messenger software so it could be a bit more comfortable for the users.

I am adding code snippets for the three most popular messengers on the planet – Yahoo, Gtalk, Skype
Remember these links only work if you have the respective messenger installed on your system.

Yahoo Messenger Links for your Website

<a href="ymsgr:sendIM?userid">Open an Instant Message Window</a>
<a href="ymsgr:sendIM?userid&m=add your message here">Opens yahoo IM window with a default message</a>
<a href="ymsgr:addfriend?userid">Adds the user to your buddy list</a>
<a href="ymsgr:chat?CHATROOMNAME">Starts a chat room.</a>

Gtalk Messenger (Chat and Call Links for your website / Blog)

gtalk:ACTION?jid=to-email-id&from_jid=from-email-id

Now Google Talk has one simplified global version. You can use ‘chat’ or ‘call’ (without the quotes) in place of action start a chat window or make a voice call which ever you like. The to-email-id field will carry the emailid of  the user who receives the chat or call and the from-email-id is for the sender. The latter is an optional field. You need that in case you have multiple google account to choose form.

Skype Messenger Chat and Call links

skype:USERNAME?ACTION

The Action parameter could be either ‘chat’ or ‘call’ as per your requirement. You could configure it smartly on your websites with a little bit of programming. There should be an admin page where the support guy or you can control your status and depending on the inputs the chat and call links will change sitewide.

Hola webmaster… since you are here I assume you are looking for a solutions to redirect duplicate looking and sounding pages on your website to a global format. In the next 3 minutes you are going to do exactly that. Read on…

By the way did you know search engines see www.domain.com , domain.com and domain.com/index.php as three separate pages. So when the search engine arrives on the site it get confused.

SE Bot: What the hell? Which one is the right URL? Ok let me pick one which ever i think is good.

What you should do? You need to 301 redirect all the versions to one global version.

Ok enough Rambling Mr Pattanaik, tell me how to do it.

Well yeah. I use the htaccess method in apache servers. Here is how to do it for your website using htaccess.
Step 1: Create an HTACCESS file. Open notepad save the file as .htaccess …thats it.
Step 2: Add this code to the file in editor.

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteCond %{HTTP_HOST} ^yourdomain.com
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]

RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ http://www.yourdomain.com/$1 [R=301,L]

Step 3: Thats all. Upload the file to your root directory of the domain. Dont worry its not a virus or spam bot I am asking you to upload.

Now Share this post if you find it helpful.

We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.

See the layering flash content problem definition here.

Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.

See the solved situation where we have content over flash.

What you need to do to achieve this?

Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)

Here is the css for them all. There is also the javascript code for the effect call on button click. (see solved example link above.

<style type="text/css">
#flasho{z-index:0;}
#boxo{top:200px;left:400px;border:1px double #600;width:532px;height:210px;margin:0px;z-index:100;position:absolute;display:none;background:#FFFFFF;}
#transo{background:#000000;height:400px;;width:100%;-moz-opacity:.80;top:0px;left:0px; filter:alpha(opacity=80); opacity:.80;display:none;position:absolute;z-index:99;}
</style>
<script type="text/javascript">
function addthiseffect()
{
document.getElementById('transo').style.display="block";
document.getElementById('boxo').style.display="block";
}
</script>

Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.

<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;">

<OBJECT

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent"

NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

</div>

I guess the thesis theme is among the most popular wordpress themes among professional bloggers. The best part about the theme is its ability to support custom functions and styles. So virtually everything is possible.

After I tried my hands at Thesis theme for WordPress I added some plugins. I need not explain to you the merits of social media sharing buttons. The hottest in this section are Twitter, Facebook and Digg. Especially the share buttons with the counter are must haves for any blog. You get the code to add these buttons from the official portals. There are plugins to achieve the same. But it’s hard to get all three of them or two of them next to each other using different plugins. The example is right on this post.

If you need to have some thing like this on your blog, then follow this simple guide. I have put in screenshots to help you in process. We will be tinkering around with the coding. So some hands on experience with PHP and HTML is welcome. Else you can follow the coding exactly as it is and hope for the best.

Most popular and accurate Re-Tweet button with count comes from tweetmeme. They have a wordpress plugin for that. I am going to add official Facebook and digg share buttons with share count display to the tweetmeme plugin. In this example I am messing with Thesis wordpress theme. You can do the same to any theme you want. It only changes the code of the plugin so – a theme independent solution.

Browsing to the Tweetmeme.php file in wordpress

I believe you have a self hosted wordpress blog.

>>So navigate to the wp-content folder.

>> >>Find the plugins folder. Enter

>> >> >>Find the TweetMeme folder. Enter

>> >> >> >> locate this file tweetmeme.php

Now we tinker with the code. To do so, download the file to local system and open is with some standard text editor. I am using dreamweaver. Now look for this function in the code ‘tm_generate_button()’. Use the find feature in your text editor (ctrl +f ) to find this function. The code is rather long so might be hard to do it manually.

Editing the code

The red bordered area is where we do the actual change. You will have something different in the original file. Now add this code to the $button variable so that the final code looks like above.

<br><br><script>var fbShare = {size: \’large\’,google_analytics: \’true\’}</script><script src=”http://widgets.fbshare.me/files/fbshare.js”></script>
<br><br>
<script type=”text/javascript”>
digg_url = \”.$url.’\';digg_title = “TITLE”;

</script>
<script src=”http://digg.com/tools/diggthis.js” type=”text/javascript”></script> </div>

Replace the file and enjoy. Download this php file right here if it is too much for you.

You can do your own modifications to suit your purpose. Replace the <br> with spaces to get a horizontal effect. Feel free to comment.