Subscribe:

Ads 468x60px

Tuesday, September 11, 2012

Get Print Buttons and Download as PDF in blog/website


Hi, Here I found a very useful/clean way of getting the Print Button in your website/Blog/WordPress which will give you options
1. Print the page cleanily (without Advertisment, side bars, and other unrequired stuffs)
2. Give you option to download the content of webpage as PDF with what you want to select and delete before downloading.
3. Change the formating of the text to be downloaded/Printed as PDF or in paper.

So, here I am using the APIs from "Print Friendly" which works on concept of saving environment and your pocket :)

For Websites

Paste the below given code to the place where you want to see your Print PDF button in website, like you see down this page.

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print Friendly and PDF"/></a>




For Blogger/Blogspot

Step.1) Open your Page Template in Edit HTML mode
Step.2) Click on option "Expand Widget Templates."
Step.3)Paste the code below into Template, after the 
<div class='post-footer'>
 tag
Save Template.
<!--- http://usefultechtalk.blogspot.com Print Friendly Starts-->
<b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style="margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><b:if cond='data:blog.pageType == "archive"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if></b:if>

<!--http://usefultechtalk.blogspot.com Print Friendly Ends-->










[Please like/share/comment if you find it useful !]

Sunday, September 9, 2012

Get Floating Sidebar for facebook, googleplus and other social media buttons


Hi,
I am writing precise and easiest way to understand Social media button on the sidebar, like you can see in the Right of you. As it has to appear in every page/post. So, you need to include the code in layout of your blogspot or css of your website. I am writing for blogspot now.
Step.1) Open your blog in design mode and go to Layout.
Step.2) Add a Gadget. as shown in pic below

Step.3.) copy the code below to the 
<!--SideBar Floating Share Buttons Code Start by http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;
-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;
-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;
-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js'
  type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="
http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html" target="blank"><font color="red">[Get this for your Blog/Site]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End by http://usefultechtalk.blogspot.com-->

Step.4.) Change the paramters highligted in Green to chagne alignment of plugin. Save the Code in the Add Gadget. and change URL in yellow to your blog/website. Otherwise everytime someone will like or share in your website. My URL get liked or shared :P.
Step.5.) That's it Done !!



{I have 2 suggestions for you: First, Drag the Gadget to the bottom, otherwise you will unnecessarily see a blank gadget in your top of page. Second, Preferably keep the alignment to left  because if you will keep it right, while someone will like/share/+1 to your post the popup will hide to further right that is outside monitor and somehow fit in pageview. that's look ugly.}
[Please like/share/comment if you find it useful !]

Thursday, September 6, 2012

How to write code in box for blog and websites

Already in earlier post I described ways for "How to write/display HTML/XML or any other markup language code" as it is in your website. That's very easy. Once done with that. What if you want to display the code in box with some light colour in background ??
It's also easy.
You need to include a small internal CSS (styling) that's it.
Step.1) Include in your html code this simple style(preferably inside Head tag.)

<style type="css/text">
.mybox
       {
  border: 2px solid green ;
  background-color: #AAAAAA;
       }
</style>


Step.2) Now whatever code you want to keep inside the box. Change it to HTML entities format by processing from www.simplebits.com.
Once processed. Paste the processed code inside

tag as shown:

<div class="mybox">
Your Processed Code HTML entities format
</div>

Step.3) That's it !! [Please like/share/comment if you find it useful !]

All about styling XML with internal and external CSS


           Embedding the CSS in XML for styling 

                      During one of my assignment I came across the requirement of styling XML with CSS, as styling was specific to the file only so, I found internal/embedded CSS better. During this development process, I documented the progress here about all possiblities, tricks and example.

We know that we can use CSS in HTML in 3 ways.
        1.) Internal CSS:
<head>
<style type="text/css">
hr {color:blue;}
p {margin-left:15px;}
body {background-image:url("_images/back_ground.jpg");}
</style>
</head>


    2.) External CSS:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


    3.) Inline CSS:
 <p style="color:blue;margin-left:15px">This is a paragraph.</p>


I tried to emulate internal/embedded styling in XML as like 2nd or 3rd point above.
First Point can be very easily done with xml-stylesheet tag in XML
For example:
We can have a xml like this , a CSS like this and include the CSS definition in XML in this way:


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
.
.
</CATALOG>


Like HTML uses link tag to connect to external CSS, similarily XML uses xml-stylesheet as Processing Instructions to process external CSS, This Processing Instruction i.e. sml-stylesheet must be before the first tag of the XML document. That's important !!. And like you know, the type="text/css"  is not actually required, but it helps browser to understand that if Browser for some reason don't understand CSS or CSS file doesn't exist then browser should ignore and not download the CSS file. Like link tag, xml-stylesheet  can also be used any no. of time. Please note, that xml-stylesheet is not a tag, but a Processing Instruction. and unlike link tag it has to be used only in the starting of the XML document.

Now coming to the main point of:

Embedding the CSS in the XML 



<?xml-stylesheet href="#style" type="text/css"?>
<ROOT>
  <EXTRAS id="style">
    HEADLINE {font-size: x-large;  color: #AAAAAA;}
    AUTHOR, PARA {display: block;color: #DD00FF;}
    EXTRAS { display: none; }
  </EXTRAS>
<ARTICLE>
  <HEADLINE>India My Country</HEADLINE>
  <AUTHOR>Om Sao</AUTHOR>
  <PARA> India is a beautiful South Asian Country which is surrouned by Oceans in three sides. </PARA>
</ARTICLE>
</ROOT>




Output of the above embedded CSS in XML  is as expected: 


If you try opening the XML with embedded CSS in Google Chrome browser, it fails to render anything..
It's a known bug in Chrome. So, please check in Firefox or IE.

[Please like/share/comment if you find it useful !]

Tuesday, September 4, 2012

Size of Web Page through browser


These days, everyone wants to make their webpage/website as light as possible. The lightier the page is best it is considered to provide speedy download and fast in dynamics. These led to the era of javascript, jquery library and various AJAX triumphs. But how to know that what is the exact size of webpage that is coming from the server on request to browser.
Here are few ways to know Size of WebPage:
1. Using PHP and Curl:
curl_getinfo($page, CURLINFO_SIZE_DOWNLOAD)
By including this code:

   <?php
//<in place of http://usefultechtalk.blogspot.in enter your web URL>
$curl = curl_init('http://usefultechtalk.blogspot.in');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
curl_exec($curl);
//get the download size of page
print("Download size: " . curl_getinfo($curl, CURLINFO_SIZE_DOWNLOAD) .'<br>');
?>


2. If you are on Mozilla Firefox, Install Firebug addon. Once Installed in the Net Tab as shown below
One can get the Size of WebPage. You can see the No. of Request in GET form and time to fetch the request.



[Please like/share/comment if you find it useful !]

Monday, September 3, 2012

How to get Yahoo Wide Screen Effect in your website


Day Before yesterday I came across Yahoo Widescreen and was thinking, How we can achieve this with minimum APIs or code. 


After putting sometime, I realised that it's very much possible with Plain CSS only. Using the Selector, Property and Value correctly.

Selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.

Here for getting Yahoo Widescreen effect as shown in iFrame above. We need to set two things.

background-repeat: no-repeat; and  background-attachment: fixed;
So, a sample html code I have written below. Copy-Paste it to your local machine in .html format and open in browser to see the effect.

How to Track Monitor Network / Internet Usage

Many a times I wondered how can I track my Internet usage so, that I won't face issue of low bandwidth by crossing the limit.

Here I documented few tools using which you can monitor and get the catalogue of data usage  on it.
Tools
1.) Download NetStat Live  application from AnalogX. Install it. Rest is self explanatory. It gives you log of data usage and speed.

2.)Download and Install NetMeter to get the hourly, weekly and monthly data usage analysis.

3.) Download and Install ZDnet's Internet Access Monitor

4.) If you a Mac user, then you can download an awesome free utility SurplusMeter. SurplusMeter will keep track of download limit, Connection Type, mini-mode, Allowance or limit left, System Preferences and Account setting provides various good options to track/monitor internet speed, and data usage.

5.) For more details you can refer to this link



 


[Please like/share/comment if you find it useful !]

Friday, August 31, 2012

Useful Linux Commands

Here I am documenting few useful linux terminal command:


  1. Command to report system disk space usage:
    [osao@slc01nga ~]df
    Filesystem           1K-blocks      Used Available Use% Mounted on
    /dev/xvda2           195592588 177362320   8294652  96% /
    tmpfs                  3931448       368   3931080   1% /dev/shm
    /dev/xvda1             1007896    124588    832108  14% /boot
    slcnas411:/export/home1/osao
                         16106127360 8378327360 7727800000  53% /home/osao
    10.246.4.40:/vol/ade_infra/prod/LINUX.X64
                         100663296   5784768  94878528   6% /usr/dev_infra/platform
    10.246.4.37:/vol/ade_infra/prod/GENERIC
                         100663296   5784768  94878528   6% /usr/dev_infra/generic
    slc1001nap:/vol/local/x86_64/redhat/60_prod/packages
                         1132462080 1087278784  45183296  97% /usr/local/remote/packages
    slc1001nap:/vol/local/linux/redhat/packages
                         1132462080 1087278784  45183296  97% /usr/local/redhat/packages
    Command to see these in summarised short form
    [osao@slc01nga ~]df -lhk
  2. Command for knowing all services running on a machine
    [osao@slc01nga ~] nmap localhost     (in place of localhost you can give other live machine also in your intranet)

  3. Command for knowing a port number for service running and Process ID (pid)
    [osao@slc01nga ~]netstat -anp | grep 9000  (it will search a service running on port no. 9000)
    The following two command will also do the same:
    [osao@slc01nga ~] lsof -w -n -i tcp:8080
    [osao@slc01nga ~]  fuser -n tcp 8080
  4. Command for knowing Directory/File size
    [osao@slc01nga ~]du -hs
  5. Command for searching particular string in particular files in regular expression form
    For ex. here we are searching in all files whose name end contains .jspx or .jsff and file contains text "encoding"
    [osao@slc01nga ~]grep -H -r -n -i --color "encoding" . --include='*.[j][s][fp][xf]'
  6. Perl Command to replace all occurences of string to other string
    the format is
    [osao@slc01nga ~]/usr/bin/perl -p -i -e "s/string1/string2/g"  
    For Ex. for converting all occurences of "ReSult" to "" We will invoke the command
      [osao@slc01nga ~] /usr/bin/perl -p -i -e "s/ReSuLt/$Result_Count<\\/font>/g"






Thursday, August 30, 2012

All about File System and Pendrive formatting


For long time, I have been delaying the proper understanding about all types of filesystems we see while formatting disk-drives/pendrives. But today I decided to drill down, investigate and better document it one place taking some 1/2 an hour. So, here it is.

How to format disk-drive/pen-drive in windows/linux

It's almost same in both OS, right click on the drive -> Format->Start->Ok
But in between we come across 4 options for Filetypes . In Windows-XP/windows7 (FAT, FAT32, NTFS and exFAT) and in Linux(FAT, ext2, ext4 and encrypted FAT). We will not see FAT and FAT32 if our drive memory is > 32 GB. So what is the difference between these file systems and which one should we choose? Let’s look at the advantages of each.

Various Filetypes

Advantages of NTFS  over FAT & FAT32:

  • read/write files > 4 GB and up to maximum partition size. (So, if your jump drive stores oftenly HD movies or big setup file > 4GB. NTFS is best suited.)
  • In NTFS partition memory created are > 32GB.
  • Better file compression filesystem used, hence better space management.
  • better space management = less fragmentation.
  • allows more clusters on larger drives = less wasted space.
  • add user permissions to individual files and folders (Windows Professional).
  • on-the-fly file encryption using EFS (Encrypting File System in Windows XP and 7).

Advantages of FAT & FAT32 over NTFS:

  • compatible with virtually all operating systems.
  • takes up less space on USB drive.
  • less disk writing operations = faster and less memory usage.

exFAT Compared To FAT & FAT32:

  • read/write files larger than 4 GB.
  • create drive partitions larger than 32 GB.
  • better space management = less fragmentation.

Wednesday, August 8, 2012

List of Comments in all Programming/Scripting language

I always find it difficult to remember the syntax of different programming/scripting languages I learnt/know. And most common syntax is Comments in various programming/scripting language. So, here I am documenting them all.
Comments are used to embed/put programmer/human-readable comments/tips/suggestion/annotations in the source code of a computer program. Those comments are generally significant to programmers but typically ignorable to compilers and interpreters.

  1. Java
    1. One liner:  // comments
    2. Multi liner: /*  first line
                           second line
                           third line
                      */

  2. Ada
    1. One liner:  -- comments
    2. Multi liner: -- first line
                       -- second line

  3. C#
    1. One liner:  // comments
    2. Multi liner: /*  first line
                           second line
                           third line
                      */

  4. C++
    1. One liner: // comments
    2. Multi liner: /* first line
                           second line
                           third line
                       */

Monday, August 6, 2012

How to find IP Address and Geographical Location of Website

Yes, it's very much possible.
There are 2 methods for finding IP Address of website.

Method 1:
Go to Command Terminal. Invoke command "ping "
for ex. I passed command "ping www.google.com"

 
Whenever we ping the domain name of any website, the ping packet goes to the website and returns the acknowledgement packet with the IP Address of the website. Many famous/giant Web sites do not return replies(acknowledgement) to ping commands because lot's of ppl keep trying for this(like I tried in example "ping www.google.com"). So to avoid unnecessary traffic, they write a bot, not to reply back to pings,  but the site IP address can usually still be obtained. This "ping" technique will fail if the website is not-hosted/blocked/temporarily down/unavailable or if the server/computer used to perform the ping is not connected to the Internet.
You can also try typing only the IP Address in URL address bar of browser, it will work ! because it makes interface with DNS in between.

Saturday, August 4, 2012

How to take complete webpage screenshot in Chrome and Firefox


How to take complete webpage screenshot in Chrome, Firefox and Explorer


Conventional Methods

  • Pressing Fn+Prnt Scrn  keys together will give you complete screenshot of what is visible in monitor (and not the complete website )
  • Pressing Alt+Prnt Scrn keys together will give you screenshot of Current window and not the taskbar, battery status, time, volume like things in up/down of the control window

For Complete webpage screenshot

Source Code Formatter for bloggers blogspot websites

This is the free Source code formatter you can use, Paste your HTML/XHTML/XML code into textbox and click "Format Source Code" button. The obtained Formatted Source Code you can paste in your website/blog as it is, to see it in Previewed form as shown below. (Just in case if this UI in some browser doesn't work, please get it done at http://usefultechtalk.blogspot.in/2012/08/how-to-add-html-posts-in-website-or.html)
Paste Here Your Source Code
Source Code Formatting Options
1) Convert Tab into Space :
2) Need Line Code Numbering :
3) Remove blank lines :
4) Embeded styles / Stylesheet :
5) Code Block Width :
6) Code Block Height :
7) Alternative Background :
Copy Formatted Source Code
 
Preview Of Formatted Code
[Please like/share/comment if you find it useful !!]

How to add HTML Code in Website or Blogs



How to add HTML Code in Website or Blogs

Long back, I came across a doubt about how to add html/xhtml or other markup tags as it is in any blog or website. because web browser by default interpret it as normal tag and render it as normal html form(we want in text form). There are few methods.

Method 1)

Go to this free website Simplebits.com
In the "Enter Markup" textbox enter the html code which you want to see as it is in text form in your website/blog. Click Process. You will find in "Cut n Paste" textbox similar code (with converstion of  < as "& lt;"  > as "& gt;" new-line as <br/>). Paste this in your blog/website.



That's Done ! 

Symbolic Link for htdocs in Linux XAMPP


Creating Symbolic Link for htdocs in Linux XAMPP

As we know, the http://localhost in the web browser maps to the content of htdocs directory of /opt/lampp/htdocs and this htdocs directory doesn't have read/write permission(only limited to root). Many people(I also) tried to change the permission by invoking in terminal as root:
chmod -R 755 /opt/lampp/
but it creates issues:
 you will be stuck at splash.php (the language selection screen) when navigating to localhost!
and also it's troublesome to keep changing permissions in /opt/lampp/htdocs directory for various .html and .php files for testing. 
So, how to get rid of this ???
One popular solution is, to create symbolic link of htdocs to another directory at desirable place and change it's permission.
Essentially this means that your projects will technically exist in this new folder which will reside in your Home folder, but XAMPP will treat it as if it were located within htdocs.

Step 1.) Make a directory at any desirable location.
mkdir ~/test
Step 2.)Create symbolic/soft link
sudo ln -s ~/test /opt/lampp/htdocs



Enter root's password (if root password is not set, then set it using command "sudo passwd root")

How to add Share,Like or Recommend buttons in Blogs or Website

How to add Share Like Recommend Buttons in Blogs or Website


Social networking has became important these days and if you are a blogger, website developer then it becomes penultimate to give your blog/website a social plugin touch to enhance page and hit counts.Adding this facebook share button will show a neat count of how many times your post has been shared and will also allow your readers to share it.
I went through plenty of blogs/tutorials to add buttons of facebook but at last found that they are all old and problematic, the best method is to use iframe tag of html.

First, what's an iframe tag ?
An iframe is used to display a web page within a web page. For ex. the following html code will render the below shown frame
 <!DOCTYPE html>  
 <html>  
 <body>  
 <iframe src="http://www.usefultechtalk.blogspot.in" width="600" height="400">  
  <p>Your browser does not support iframes.</p>  
 </iframe>  
 </body>  
 </html>  
Please note the widht and height


Here is small and crisp tutorial for how to add Like/Share/Recommend buttons in different forms

Log in to Blogger, go to Design / Layout > Edit HTML or if you are planning to implement in our website then open the .html page in any editor

Now you have options to add different social plugin tools as follows:



Like Button:

Step 1: Go to Facebook's Like Button plugin page:

Step 2: Post the complete URL of page in which you want to add Like button in "URL to Like"   textbox. for ex. if I paste the link of this blog there. http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html and Press "Get Code".


Step 3: Please note that the first part of Javascript SDK "Plugin Code" (as show in below pic) will remain same for all plugins (Like, Share, Recommend, Comments etc). So, you just need to add it at the starting of your html page or blog open in HTML editing format.

Step 4: Add the second part of "Plugin Code" where ever you like to see the Like button. For ex. I added first part of "Plugin Code" at starting of these page and second part of "Plugin Code" here. Try to Click on Like Button.



Send Button: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Send Button plugin page:

Step 2: Post the complete URL of page in which you want to add Like button in "URL to Send"   textbox. for ex. if I paste the link of this blog there. http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html and Press "Get Code".

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)

Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try it !



Subscribe Button: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Subscribe Button plugin page:

Step 2: The Subscribe button lets a user subscribe to your public updates on Facebook.There are two Subscribe button implementations: XFBML and Iframe. In the "Profile URL" textbox enter the Facebook profile link of yours or person who you want to subscribe (for example facebook profile URL for Mark Zuckerberg is http://www.facebook.com/zuck)  and Press "Get Code".

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)

Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try it !



Comments Button: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Comments Button plugin page:

Step 2: Post the complete URL of page in which you want to add Comments button in "URL to Comment on"   textbox. for ex. if I paste the link of this blog there. http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html, Increase the "Number of Posts Visible" and Width as per your requirements and Press "Get Code".

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)

Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try Comment Hi/Hello !


Activity Feeds: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Activity Feeds plugin page:

Step 2: The Activity Feed plugin displays the most interesting recent activity taking place on your site. Since the content is hosted by Facebook, the plugin can display personalized content whether or not the user has logged into your site. The activity feed displays stories when users interact with content on your site, such as like, watch, read, play or any custom action. Activity is also displayed when users share content from your site in Facebook or if they comment on a page on your site in theComments box. The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. In order to use the authentication methods, your app must be configured with an App Domain.

Step 3: Activity Plugin is only for the websites which are registered to/authorised by facebook. You need to send request for your website to facebook. Once you have App-Id you can use it in the Get Code box of the Activity Feeds plugin and "Get Code"

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc). You can get appId for popular websites like yahoo articles, stackoverflow etc. Here in the example you can see, I used Domain = "www.facebook.com" and AppID as 113869198637480 and "Get Code"


Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence and this is what you see based on your login(I see the same activity as shown in pic above :) ).


Recommend Button: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Recommend Button plugin page:

Step 2: It is again same as Activity Feeds where you will be needing AppID for the website/blog which you want visitors to recommend to others. For AppID you need to request to facebook as explained abvoe.




Like Box: (Very Attractive and Similar to Like Button implementation)

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:
  • See how many users already like this Page, and which of their friends like it too
  • Read recent posts from the Page
  • Like the Page with one click, without needing to visit the Page
So, first you need to make a page in facebook(like fans page, followers etc) corresponding to your website/blogs
Step 1: Go to Facebook's Like-Box plugin page:

Step 2: Post the complete URL of page in which you want to add Like-Box button in "URL to Send"   textbox. for ex. if I paste the link http://www.facebook.com/imdb and Press "Get Code".

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)

Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Like-Box for the page.
For ex. I added the second part of "Plugin Code" corresponding to the imdb facebook page just after this sentence. It will show you how many of your friends have liked that page(you need to be logged in in fb in current browser)


Login button: (Very Similar to Like Button implementation)

Step 1: Go to Facebook's Login Button plugin page:

Step 2: Select options "Show Faces", Rows and Width. Get Code

Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=123050457758183";
and update the bold part, it's the appId of the facebook page.

Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Log-in Button.
For ex. I added the second part just after this sentence. 


Registration button: 


The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simple iframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with their Facebook information where appropriate.

The registration plugin gives you the flexibility to ask for additional information which is not available through the Facebook API (e.g. favorite movie).

This eliminates the need to provide two separate login experiences.
Step 1: The Registration button can be implemented best using iframe tag

Step 2: Copy the code below to your blog/webpage in html format to see register button.
--------------------------------------------------------------------------------------------------------
<iframe src="https://www.facebook.com/plugins/registration?
             client_id=113869198637480&
             redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F&
             fields=name,birthday,gender,location,email"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>

--------------------------------------------------------------------------------------------------------

Step 3: Please not various attributes like width, heigth, stle, fraemborder and userinfo fields. You can change it. (For more details See Documentation Page )
For ex. I added the second part just after this sentence. 



Facepile Button: (Very useful and attractive for websites involving login options for user)

The Facepile plugin displays the Facebook profile pictures of users who have connected with your page via a global or custom action, or can also be configured to display users that have signed up for your site. The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site. For this you need AppId of your page/website generated by Facebook.

Step 1: For more details Go to Facebook's Documentation Page for Facepile




Friday, August 3, 2012

Complete XAMPP setup in Windows





Complete Setup Steps for Linux Boxes (Please refer to previous post)
XAMPP= (X-Cross Platform, A-Apache, M-Mysql, P-PHP and P-Perl)

Here is step by step guide to install XAMPP in Windows environment from Scratch.
1. Downlaod  latest version of XAMPP from here. 
Downlaod


2. I am using Installer version(.exe file) of XAMPP to install it to windows.It will be easy for Newbies to install with installer version of XAMPP.Once downloaded click on installer.you get following screen. select the language and click on OK.

Complete XAMPP setup in Linux



What is XAMPP ?
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start.

This guide will provide you step by step to process to setup XAMPP in your Linux machine and configure it to run a website on localhost environment.

Step 1.) Download appropriate Xampp release (preferably latest).
 (Attention: If you download these files on a Windows system and you're running McAfee virus scanner you may get a false positive virus warning. This is a problem with McAfee and gzip-compressed files, it should be ignored.)

Step 2.) After downloading simply type in the following commands:
      (For installing any application at linux you need to Root access of the computer. In Ubuntu by default the root       account is not enabled.If you are installing it on ubuntu then you need to ebable Root access for it by following command. Open your terminal and type following and invoke sudo passwd root)
  1. Go to a Linux shell and login as the system administrator root:
    osao@osao-laptop:~$ su

  2. Extract the downloaded archive file to /opt: root@osao-laptop:/home/osao# tar xvfz xampp-linux-1.8.0.tar.gz -C /opt
    Warning 1: Please use only this command to install XAMPP. DON'T use any Microsoft Windows tools to extract the archive, it won't work.
    Warning 2: already installed XAMPP versions get overwritten by this command.
That's all. XAMPP is now installed below the /opt/lampp directory.