How To Create Playlist In Blogger.com Using JW Player

Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can create playlist using JW Player. As I told in my last post that few readers asked me how they can create Playlist using JW Player and how they can host files of JW Player in Google code. So in last post I told you how you can host files in Google code and if you want to know how to use and earn from JW Player Click here.

To make a playlist using JW Player you need to have an XML file where you will put all the videos link of your playlist.
Here how you can create JW Player Playlist XML file
1.       Open notepad in your computer
2.       Copy the below code
<?xml version='1.0' encoding='UTF-8'?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<trackList>

   <track>
      <title>Video Name</title>
      <location>Video URL</location>
      <annotation>Video Description</annotation>
      <duration>Video Length (Time)</duration>
   </track>

</trackList>
</playlist>
Now copy the bold portion and paste it after </track> as much time you want (as much video will be in a playlist)
3.       Now change few things
i)        Video Name With the name of the video
ii)       Video URL with the URL of the video
iii)     Video Description With the video description
iv)     Video Length (Time) with the video length
Note: – Every time put different Name, URL, Description and Length
4.       After you made the playlist save that file
i)        Press Crtl+S (for save option)
ii)       Now change the Save as type: from Text Documents (*.txt) to All files (*.*)

iii)     An give the name of the file and after the name give .xml
iv)     Then click Save button
5.       Now upload this file to Google code hosting server or on your hosting server
To know how to upload file to Google code click here.
Here how you can make playlist using JW Player
1.       Go to Blogger.com –> Click on Design for the following blog –> Edit HTML
2.       Find the </head> tag
3.       Just before the end of head tag place the below code (if you haven’t place this code before for JW Player)
<script 
src="http://jajodiasaket.googlecode.com/files/swfobject.js"
type="text/javascript"/>

4.      Now place the below code where you want to
display your JW Player Playlist

<div name='jwppl1' id='jwppl1'>
<script type="text/javascript"> 
var so = new SWFObject
('https://player.longtailvideo.com/player.swf ','single'
,'600','320','8');
so.addParam('wmode','transparent');
so.addParam('allowScriptAccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('fullscreen','true');
so.addVariable('width','600');
so.addVariable('height','320');
so.addVariable('playlist','right');
so.addVariable('playlistsize','200');
so.addVariable('file','playlist.xml');
so.addVariable('image','image.jpg');
so.addVariable('plugins', 'ltas,gapro-1,googlytics-1,fbit-1');
so.addVariable('ltas.cc','AdSolution ID');
so.addVariable('gapro.accountid','Google Analytics ID');
so.write('jwppl1');
</script></div>
Change the following things before you place the code:
a)      Change The Longtail Video AdSolution ID
Change the AdSolution ID with your Longtail Video AdSolution ID and if you don’t have the AbSolution ID then you can sign up for free, to know how to signup Click Here . Or if you don’t want to show ads just remove this entire line ( so.addVariable('ltas.cc', 'AdSolution ID'); )
b)      Change the Google Analytics ID whit your ID (ID is something like UA-XXXXXXXX-XX)
c)       Change the playlist.xml with your Playlist XML file
d)      Change the image.jpg with your preview image URL (it it not necessary if you are using YouTube video URL)
There is a facebook share button plugin I have given if you want to remove it just remove the ,fbit-1 from this line so.addVariable(‘plugins’, ‘ltas,gapro-1,googlytics-1,fbit-1‘); .
Note: – If you want to add two player in one page then change the 1 in jwppl1 (in 1st line and in last 2nd line) with 2 in 2nd player, if you want to add three player then change it with 3 in 3rd player and so on.
Here is a demo of how JW Player Play will look like

If you are having problem in viewing the Demo Playlist Click here.

Hope it will help you in creating JW Player Playlist, if you have any question or problem let me know

How To Use LinkedIn Official Share Button On Your Website Or Blog

Hi! Everyone, hope you all are fine.
Today in this post I am going to tell you about how you can use LinkedIn share button on your website/blog. Today LinkedIn launched there new official share button. There are three types of share button same as we have for Twitter official Tweet button Continue reading How To Use LinkedIn Official Share Button On Your Website Or Blog

How To Use And Earn From JW Player In Your Blogger.com Blog

[This article was updated on 6th February, 2012]

Few days back one of my reader asked me how I use JW Player in my blog as he also wanted add JW Player to play videos in his blog, then I thought to write an article on it so everyone can learn about it. LongTail Video is a leading company behind the JW Player Continue reading How To Use And Earn From JW Player In Your Blogger.com Blog

Add YouTube Subscribe Button On Your Website/Blog

Hi! Everyone, hope you all are fine.
In this post I will tell you how you can add YouTube Subscribe button on your website(s)/blog(s). Few days back YouTube rolled out a new subscribe button to celebrate YouTube one billion subscriptions for their user’s to put on their website(s)/blog(s). The new YouTube subscribe button for website let your users subscribe to your YouTube page directly without leaving your site.


Image credit: throwboy

Here how you can add a simple subscribe button.

1.       Copy the below code
2.       Paste it where you want to add your YouTube Subscribe button.

<iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=JajodiaSaket" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

3.       Now change the JajodiaSaket from the above code with your YouTube username.

Here’s how YouTube Subscribe button looks like.

Let us know what you think about YouTube new Subscribe button for website.

Create And View Your Own Twitter API

Hi! Everyone, hope you all are fine.
Today in this post I will help you in creating new and viewing existing Twitter API key. By creating Twitter API you will able adds some twitter features in your blog/website (like: hover card, tweet box, follow me button and many more). Here is few simple steps to get your Twitter API key.

For New Twitter user:-
1.       Login to your Twitter account using twitter.com
2.       Search and click on the Developers (see at footer of right side panel) or Click here

3.       Click on the 2nd option (Register an app)

4.       Now fill the form accordingly
5.       After filling the form click on Register application
6.       Read the TWITTER API TERMS OF SERVICE careful
7.       If you agree with their click on I Accept
8.       And if you don’t then you won’t get the Twitter API
9.       After clicking on I Accept you will redirect to a page where you will able to see all the details and your API key.

For Old Twitter user:-
1.       Login to your Twitter account using twitter.com
2.       Search and click on the API (see at bottom of the page) or Click here

3.       Click on the 2nd option (Register an app)

4.       Now fill the form accordingly
5.       After filling the form click on Register application
6.       Read the TWITTER API TERMS OF SERVICE careful
7.       If you agree with their click on I Accept
8.       And if you don’t then you won’t get the Twitter API
9.       After clicking on I Accept you will redirect to a page where you will able to see all the details and your API key.

View Your Existing API
1.       Follow the 1st and 2nd step from the above following
2.       Now see at the top of the page
3.       You will see its written Your apps click on it

4.       Now you can see all your apps you have created

How To Use Like Button In Your Blogger.com Blog

Hi! Everyone, hope you all are fine.
In this post I will tell you how you can use Facebook Like Button in your Blogger.com blog. Few people asked me how they can use Facebook like button on their blogger blog so here it is. If you don’t have a blog in Blogger then you can create it now.

1.       Go to your Blogger Dashboard –> Design –> Edit HTML –> now tick the Expand Widget Templates for the following blog in which you want to use Facebook Like Button.
2.       Search for the following code (to bring the browser search box press Ctrl + F or F3)
a)       If you want to use it before post and after title
<p class='post-header-line-1'>
b)       If you want to use it after post ends
<data:post.body/>
3.       Now place the following code just after any of the above code
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:70px;'/>
</b:if>
a)      Things you might need to change
(1)    layout=standard
You can change standard to button_count if you only want to show the button with no. of likes
(2)    show_faces=true
You can change true to false if you don’t want to show the face
(3)    action=Like
You can change Like to Recommend if you want to show recommend instead of like
(4)    font=arial
You can change arial to
(a)    lucida+grande
(b)   segoe+ui
(c)    tahoma
(d)   trebuchet+ms
(e)   verdana
Use anyone of follow font you like
(5)    colorscheme=light
You can change light to dark depending on your template color
(6)    change the width:450px and height:70px depending on your template
(7)    If you want to show Like Button in home page also then remove the following codes
<b:if cond='data:blog.pageType == "item"'>
</b:if>
4.       Now click on SAVE TEMPLATE, now check your blog everything is working fine
5.       Now everything is fine now again come to Edit HTML page for the same blog
6.       Now find opening head tag you will get it at the top of the page.
<head>
7.       Paste it just below the head tag
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/> 
<meta content='Your Profile ID' property='fb:admins'/> 
<meta content='Category of your Blog' property='og:type'/>
i)        Things you need to change
(1)    Your Profile ID change it with your profile ID (If you want then you can remove the Profile ID line)
(2)    Category of your Blog choose the category of your blog from Facebook open graph page to go to Facebook open graph page Click here.
Note:- Before editing your Blogger template take the backup of your template by going to Blogger Dashboard –> Design –> Edit HTML –> now click on Download Full Template for the safe side.

Twitter Tweet Button For Your Blog, Website And Browser

Hi! Everyone, hope you all are fine.
In this post I am going to tell you how you can use Twitter’s new twit button in your blog or website. You might have show many retweets button from 3rd party service (like: tweetmeme). But twitter have official bought there retweet button in 3 sizes (Vertical count: 55x62 px, Horizontal count: 110x20 px and No count: 55x20 px).

You can use this retweet button in 3 different ways.
1.       By using JavaScript

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a>

2.       By using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

                               
3.       By customizing your own retweet button

<a href="http://twitter.com/share">Tweet</a>

For WordPress.com Users
In Word Press you can only use tweet button in Horizontal size (110×20 px)
1.       Login to your wordpress.com (wp) account
2.       Go to the following blog in which you want to place your tweet button
3.       Now go to Appearance –> Extras
4.       There you will see few tick box option
5.       In that you will see its written Show a Twitter “Tweet Button” on my posts.
6.       Tick that box then click on Update Extras »

7.       And it’s done
8.       Now you will see the tweet button in the bottom of your wp blog post
For Blogger Users
1)      Login to your Blogger.com account
2)      Go to Design –> Edit HTML –> then click on Expand Widget Templates for the following blog in which you want to use tweet button
3)      Search for the following code (to bring the browser search box press Ctrl + F or F3)
a)      If you want to use it before post and after title

<p class='post-header-line-1'>

b)      If you want to use it after post ends

<data:post.body/>

4)      Place the code just after the above code

<b:if cond='data:blog.pageType == "item"'>
  <div style='float:right; padding:10px;'>
    <a class='twitter-share-button' data-count='vertical' data-related=Jajodia_Saket:Tecko Blog...' data-via='SaketJajodia' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  </div>
</b:if>

5)      Things you might need to change
a)      If you want to show this tweet button in home page then remove the following codes

<b:if cond='data:blog.pageType == "item"'>
</b:if>

b)      Change or remove as per your suitability

style='float:right; margin-left:10px;'

If you want to change it then
In style change right to center or left
In padding change 10 to any number as you feel suitable with your template
c)       If you want to change the size
data-count=’ data-count=’vertical‘ ‘
Change vertical to horizontal or none as you feel suitable
d)      Change SaketJajodia with your twitter username
6)      Here is one more plain and simple tweet button you can use

<style media='screen' type='text/css'>
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a0.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id='custom-tweet-button'>
  <a rel='nofollow' expr:href='"http://twitter.com/share?text=" + data:post.title + " &via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog... "' target='_blank'>Tweet</a>
</div>

Change the SaketJajodia with your twitter username
Note: Before editing your template, 1st backup your template for safe side, by clicking on Download Full Template in Edit HTML page
To add in self hosted website
To add in self hosted website
1)      Go to the page where you can have access to edit you website HTML
2)      Now find the place where you want add tweet button
3)      Now place the following code as per your suitability
a)      Using JavaScript

<a rel='nofollow' href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SaketJajodia" data-related="Jajodia_Saket:Tecko Blog">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

i)        To add the Horizontal count: 110×20 px
Change vertical to horizontal
ii)       To add the No count: 55×20 px
Change vertical to none
b)      To add the plain and simple tweet button

<style type="text/css" media="screen">
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a4.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id="custom-tweet-button">
  <a href="http://twitter.com/share?text=&via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog..." rel='nofollow' target="_blank">Tweet</a>
</div>

c)       Using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

4)      Change the SaketJajodia with your twitter username
To customize your own tweet button
You can customize your own tweet button using this link http://twitter.com/share
For more info Click here
For Chrome users
To use tweet button in your Google Chrome browser, you can use a Chrome extension by Shareaholic. It works as the Twitter tweet button works and it also shows how many tweets have been done in the following page.

If you have anything to tell about Twitter new tweet button please let us know. Even if you have customize your own tweet button.