Add your profile photo in search results

Google Authorship Markup: How to add your photo into SERPs

So you wanted to add your profile photo into the results page of major search sites like Google, Yahoo and Bing.

The short answer is by using Authorship Markup and it is called rich snippet. And in Google it is done without having to write a single code.

Why bother with Authorship Markup
Aside from the obvious that it is quite cool, it also standouts out among the other results. And if it stands out you get more attention, thus you get more advantage against the competition. It also gives the impression that that search result is more credible since Google has given you authorship on that particular subject or with the article.

Many believes that with the authorship, click through rates have increased for their site. I mean, just look at this result:

Here is what it looked without the Authorship Markup

An here is with Authorship Markup

And so how did they do it?

Here is how

• You need to have a Google+ account - If you don't have one yet or even if you don't intend on using it just create one since it will be used to link your site/content and your bio/profile. If you are on Blogger, I suggest that you take time to write your Tagline and Introduction.
• Link your profile to Google+
1. Go to your site and click your about or profile page, the one that contains your personal profile.
2. Copy the URL of that (profile) page from the address bar.
3. Go back to your Google+ profile and click on About.
4. Scroll down until you see the links box.
5. Click Edit and under Contributor to click Add custom link and on Label put something like +Your Name Blog. On URL put the copied profile address. Make sure that Current contributor is selected on the drop down menu.
6. If you don't see your site listed under Contributor to add it as well by following step 5.
• Note to Blogger users - To connect your blogs to Google+, go to your dashboard and click on Google+ then on the right side will be the Get Started button. From there, just follow the instructions or you can still manually do them by following step 5.
• Link Google+ profile to your site's content
1. Add the 'rel=author' on the link of your author box (the <a href="http://example.com/profile.html/" of written by Blog Author at the bottom of the page)
2. If you have a profile page, ad the 'rel=me' on the link.
3. For Blogger users (or even if you are not) you can link your Google+ profile directly by adding '?rel=author' at the end of the URL link like https://plus.google.com/14790572345602544?rel=author.
• Test and see the result using Google's Structured Data Testing Tool. Just type in your site URL and click on the PREVIEW button.

Back to CyberLiving home page

Other Posts
Meta tag generator
Put the Loading... text with animated dots

Read More

Put the Loading... text with animated dots

There are times where you navigate to a page and you see the "Loading..." text with moving three or so dots like this

Loading

and you wonder how they did it.

Here is how
Copy and paste the following code to where you wish for it to appear inside you page

<span id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

You may replace the value 300 (in red text) to a value you wish. 300 means 300 millisecond or 0.3 second interval between each appearance of the dot so naturally the higher value you put in, the longer it will take for each dot to appear and vice versa.

You may also wish to add some format to the text like making the font size 40px and color gray. You can put an inline CSS at the span tag like this:

<span style="color:gray;font-size:40px;" id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

And the result will be like this:

Loading

Back to CyberLiving home page

Other Posts
Add your profile photo in search results
Using Google Spreadsheet as a query-able table using Javascript

Read More

Using Google Spreadsheet as a query-able table using Javascript

Add more functionality (like sort, search string, limit result per page and page navigation) to your query using Javascript that a query in the data source URL would be tedious do.

In a previous post (Using Google Spreadsheet as a database for your site) it was shown that a Google Spreadsheet could function as a database and that it was possible to make queries as opposed to just publishing the entire content into one very long table (in a case where the table contains lots of data).

But in my desire to give more functionality (like searching a certain text, limiting to 10 result per page and a navigation button for the next or previous 10 results) to the page, I thought it would be much simpler to do the query in Javascript rather than to do it in the data source URL. Fortunately I found one in Google code playground.

Here is how
By using the setquery method to put your query string within the Javascript code. Here is what it would basically look like:

var query = new google.visualization.Query(DATA_SOURCE_URL);
query.setQuery('select A,B,C group by A order by B desc');
query.send(handleQueryResponse);

With the query in Javascript it turned my display result page from this:

into this:

The Javascript code for this is found just below. Feel free to use it. Just copy and paste the code into your page replacing the source spreadsheet and the query string as best fits your requirement.

<style>
.post h3 {display:none !important;}
</style>


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 
    <title>
      Google Visualization API Sample
    </title>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

    var isFirstTime = true;
    var data;
    var queryInput;
    var credits = '<br /><p style="font-size: 8px;">Courtesy of <a href="http://cyberliving.blogspot.com">http://cyberliving.blogspot.com</a></p>';
     
    var query = new google.visualization.Query(
        'https://spreadsheets.google.com/tq?key=YOUR_SPREADSHEET_ID_HERE');
 
    function sendAndDraw() {
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
 
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('querytable'));
      table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0});
      if (isFirstTime) {
      init();
      }
    }
 
    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }
 
 

    google.setOnLoadCallback(sendAndDraw);

    function init() {
      isFirstTime = false;
      queryInput = document.getElementById('display-query');
    }

    function setQueryFromUser() {
      var queryInput1 = "Select * where C contains " + "'" + queryInput.value + "'" + " or D contains " + "'" + queryInput.value + "'" + " or E contains " + "'" + queryInput.value + "'" + " or F contains " + "'" + queryInput.value + "'" + " or G contains " + "'" + queryInput.value + "'"
      setQuery(queryInput1);
    }
 
    </script>
  </head>
<body style="border: 0 none; font-family: Arial;">
<div style="background-color: buttonface; border: 1px solid gray; margin-bottom: 10px; padding: 5px;">
<span> Refine your search</span>
<form action="">
<table style="font-size: 12px;">
<tr>
    <td>Select Category</td>
    <td><select id="query-1" onchange="setQuery(this.value)">
      <option value="">None</option>
      <option value="where B = 'Real Estate'">Real Estate</option>
      <option value="where B = 'Automobile/Vehicle'">Automobile/Vehicle</option>
      <option value="where B = 'Computers/Electronics'">Computers/Consumer Electronics</option>
      <option value="where B = 'Job Opportunity'">Job Opportunity</option>
      <option value="where B = 'Others'">Others</option>
    </select></td>
    <td>Search iSari-Sari Store</td>
    <td><input id="display-query" type="text" />
      <input onclick="setQueryFromUser()" type="button" value="Search" />
    </td>
</tr>
</table>
</form>
</div>
<br />
<div id="querytable">Loading...</div>
  <script>document.write(credits);</script>
</body></html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The following things you need to do after pasting the code in your page:

1. Replace the YOUR_SPREADSHEET_ID_HERE with the correct ID.
2. There are also other red texts in the handleQueryResponse function. Edit it as you wish or you may remove an option:
• 'allowHtml': true this is to allow some formatting from the table to be carried out in the query output.
• 'alternatingRowStyle': true when set to true alternating rows will get different tone (gray for odd rows and white for evenrows).
• 'page': 'enable' when set to enable, paging is turned on meaning you can set the maximum result to be displayed per page by using the pageSize option.
• 'pageSize': 10 the number is the maximum limit of displayed result per page. A navigation button (previous and next buttons) is placed at the buttom of the result table.
• 'sort': 'enable' seems self-explanatory. When enabled, you can sort any column.
• 'sortAscending': false when set to true, data is sorted in ascending manner. When false, data are sorted in descending manner.
• 'sortColumn': 0 Tells the query language which column to sort automatically before publishing the result on the page. 0 is for column A, 1 for B and so on.
3. The blue and purple texts makes up the "Refine your search" user interface. The blue texts is for the drop down menu while the purple makes the search input field.

Back to CyberLiving home page

Other Posts
Put the Loading... text with animated dots
Make your static page look cleaner by removing the page title

Read More

Make your static page look cleaner by removing the page title

How to remove the page title on your blog pages?

There are times when you wanted to remove the page title on your blog's static pages just to make it cleaner and appear more professional.

I mean look at the sample screen capture of a form page below:

An Ad submit page with the page title.

Examine the photo above and you will see the redundancy. Submit your Ad is the page title (encircled in red). You will see, however just above is the navigation bar showing the current page selection (pointed by the red arrow) which says exactly the same as the page title.

Removing Submit your Ad on the navigation bar is not advisable since it is used to navigate to the form. The one appearing on the actual page, however, is not necessary so it should be removed.

Here is how
The solution is quite simple, by placing a 3 line code at the top of your page's code.

• Edit your page in HTML
1. In your dashboard, click pages.
2. Select the page and click on edit.
3. On the edit/compose window, click on HTML so you can edit the html code of the page.
• Copy and Paste the following code at the top of your page's code

<style>
.post h3 {display:none !important;}
</style>

• Publish the page
1. Click on the Upate button.
2. Check the page you just edited and it should no longer be showing the page title on the page.

Done!

Back to CyberLiving home page

Other Posts
Using Google Spreadsheet as a query-able table using Javascript
Using Google Spreadsheet as a database for your site

Read More

Using Google Spreadsheet as a database for your site

Turn Google spreadsheet into a query able database that you can publish on your web page.

In a previous post (Create your own form and display all response real time using Google Drive) I have mentioned that you can post the results of your Google Form that updates real time. It is good because it is an active result by that I mean it updates data real time.

But the output result will also include everything like the menu bar and tool bars which is basically anything when you open a spreadsheet in Google Drive. It therefore looks and feel more like a work space than a web page. Refer to below image for the output.

Output on your website using the link share address of the spreadsheet.

But what if you wanted a better output without the distracting menu and tool bars, column and row headings and just wanted it to look like any other table you see around the internet?

Use the Data Source URL instead of the link share address
Fortunately, there is a better way of showing your response table and that is using the data source URL. It looks like this:

https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE

To find your spreadsheet ID, open your spreadsheet in Google Drive and on the address bar should look like this:

https://docs.google.com/spreadsheet/ccc?key=SPREADSHEET_ID#gid=0

Just copy the spreadsheet ID and paste it on your data source URL. To post this in your website, use the iframe tag just like when you made the link share address. It therefore should look something like:

<iframe frameborder="0" height="1100" marginheight="0" marginwidth="0" width="1000" src="https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE"></iframe>

Please note also that I have highlighted in bold and blue the text tqx=out:html that is because there are three possible output in using the data source URL (json, html and csv). Without specifying the output, it will automatically assume a json output (default). The tqx=out:html text will ensure that it gives an html output which is more readable to us common folk. Using csv will download the table to your hard drive.

Supposing your iframe options were set properly, you will not see any evidence of the iframe on your page and should look like this:

Using the data source URL gives a cleaner look.

Add Query on your data source URL for better interactivity with your table
Now looking better! How about if you wanted some interactivity with the table like showing responses only on a certain category. Like this:

Sort by:
Real Estate                     Automobile or Vehicle
Job Opportunity              Computers and Electronics
Others

From the above table, you can see that you can sort the data by clicking on any of the choices on how to sort it.

To do this include a query in the data source URL. The query has the following syntax:

&tq=QUERY_STRING_HERE

The entire data source URL then would look like this:

https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE&tq=QUERY_STRING_HERE

Replace that into your iframe source and it will display any data that meets the query requirement.

But what to put on the query string? Instead of discussing the details, I will give you the code for the above example as it is beyond the scope of this article to discuss in detail about the query language.

Here is the code. Feel free to use it. Just copy and paste it to a blank page and it should work fine.

<b>Sort by:</b><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * where (B='Real Estate' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Real Estate</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * where (B='Automobile/Vehicle' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Automobile or Vehicle</a><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Job Opportunity' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Job Opportunity</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Computers/Electronics' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Computers and Electronics</a><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Others' or B='Category') order by A desc&amp;key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Others</a>
<br />
<iframe frameborder="0" height="900" marginheight="0" marginwidth="0" name="pakita" src="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * order by A desc&key=YOUR_SPREADSHEET_ID_HERE" width="1000"></iframe><br /><p style="font-size: 8px;">Courtesy of <a href="http://cyberliving.blogspot.com">http://cyberliving.blogspot.com</a></p>

A little explanation for the code
In order to make an interaction with the table, I made use of an achor text (<a href="source URL>) in order to make the query using the data source URL then targeted the frame (iframe) as my output.

You might have also noticed the blue and red texts. These are what composed the query string, except for the key=YOUR_SPREADSHEET_ID_HERE which we have already explained earlier. The blue texts are called clauses while the red texts are the conditions you set for each clause.

For the select I gave it the * to mean select all columns in the table. You may also select only certain columns. Do it by specifying its column letter. Ex. select A,B,C or select A,C,D,E or select B,E,F

The where clause tells your query which among the data is to be displayed. In my example I used where (B='Real Estate' or B='Category') on my first anchor text (Real Estate) because I just wanted to display all responses under the category Real Estate. I included or B='Category' so that it will still display the column title. Without it, the displayed data will not have any column title.

Then there is the order by A desc. This serves to arrange the data according to the content of column A. Since I wanted it to display the data from the latest entry from the form down to the earliest I choose column a to sort because it contains the time stamp data as to when each data has been created and since I wanted the latest entry to be on top I choose "desc" for descending order.

That is it. I hope I helped you solved your problem. If you wish for any clarification, leave your comments below.

Back to CyberLiving home page

Other Posts
Turn blogger blog into a static web page
Make your static page look cleaner by removing the page title

Read More

Turn blogger blog into a static web page

Written by Julius Emman on Thursday July 4th 2013

Create a static web page in blogger.

Tired of looking at your blog and wanted a static web page but do not want to work hard into setting-up one? Or you just wanted a more professional look for your page and not look like a blog?

Let us face it, a lot of us find it a bit difficult to set-up a page or just do not have much time to learn it while here is Google offering us Blogger where in just several steps you can have your own page (albeit a blog) not to mention that it is free.

Now, you can have both a static as well as a blog page in Blogger.


Here is how
Note: If you just wanted to convert your existing blog into a static page skip the first step.

1. Create a blog following the normal process.
• You can choose any template you wish but in my case I prefer getting the simple template.
• For the Layout, I choose only a single column with no side bar this way I can have free range in styling it later.
• I also adjusted the width to fit the entire blog area, I have only 1 column any way and no side bars.
2. Make a static landing page
• First thing is to create a page. Log-in to blogger then go to your blog's dashboard. Under Pages, click New Page then Blank page. Name this Home Page (under Page title). Publish the page.
• Create a custom redirect. Let us create a redirect to the static page you just created so that it will effectively become the landing page of your site instead of the blog page. Click Settings on the dashboard then click Search preferences. Scroll down until you see Custom Redirect under Errors and redirections. Click Custom Redirects and on the From input field, input "/" (forward slash, without the quotes). On the To field, input "/p/home-page.html. Lastly, click on the Permanent check box to check it. Click on save then Save changes.
• Hide the default Home blog page. After creating the custom redirect, when you go to your blog, it will automatically redirect you to the blank static page and no longer at the blog page. But notice your navigation bar that both Home and Home Page is present. Home is the default blog home page while the Home Page is the static one you have created. Notice also that it is the Home Page that is selected (meaning active) and not Home. We need then to hide Home as it is redundant and it does not hold much purpose. Click Layout on your dashboard then click edit under Pages gadget. On the pop-up window, uncheck Home under Pages to show. This action hides Home.
• Rename Home Page to Home. After hiding Home, you are now left with just the Home Page on the navigation bar. But for me, Home Page do not sound too nice so I will rename it to just Home. Click back on Pages in the dashboard. Notice that Home is now under Hidden. Click Edit under Home Page and edit the Page title to whatever name you wish to name this page. For me I called it Home because it basically is now the effective home page of this site.
• Bring back blog page. If you wish to still have the blog page (but just not as a landing page), create another page by clicking on New page (in Pages) but instead of a blank page, click Web address. Input any desired Page title, ex. Blog Posts. Under Web address (URL) input your blog URL and add the following texts "/index.html" without the quotes, ex. http://yourblog.blogspot.com/index.html. This page will have the same content as the original blog's home page including its formatting.
3. Create content for your new static landing page. Congratulations! You have just reformatted you blog into a static site. Next step is to put content into the blank page. Format it as you wish.

Back to CyberLiving home page

Other Posts
Using Google Spreadsheet as a database for your site
Is facebook down?

Read More

something

Time	Host Name	Ping Result		DNS Server Resolution Time		Total Delay
		Smart Bro	Google Public DNS	Smart Bro	Google Public DNS	Smart Bro	Google Public DNS
Day1 @ 1am	www.google.com	312 ms	479 ms	1110 ms	1130 ms	1422 ms	1609 ms
	www.facebook.com	447 ms	290 ms	1140 ms	1050 ms	1587 ms	1340 ms
	cyberliving.blogspot.com	518 ms	446 ms	1160 ms	2170 ms	1678 ms	2616 ms
Day1 @ 9am	www.google.com	331 ms	512 ms	1290 ms	1120 ms	1621 ms	1632 ms
	www.facebook.com	433 ms	474 ms	1080 ms	1140 ms	1513 ms	1614 ms
	cyberliving.blogspot.com	486 ms	507 ms	1380 ms	1130 ms	1866 ms	1637 ms
Day1 @ 4pm	www.google.com	411 ms	318 ms	1020 ms	700 ms	1431 ms	1018 ms
	www.facebook.com	358 ms	283 ms	880 ms	640 ms	1238 ms	923 ms
	cyberliving.blogspot.com	420 ms	303 ms	1090 ms	700 ms	1510 ms	1003 ms
Day1 @ 9pm	www.google.com	509 ms	438 ms	1140 ms	900 ms	1649 ms	1338 ms
	www.facebook.com	399 ms	330 ms	1020 ms	870 ms	1419 ms	1200 ms
	cyberliving.blogspot.com	510 ms	447 ms	6390 ms	940 ms	6900 ms	1387 ms
Day2 @ 12am	www.google.com	344 ms	298 ms	700 ms	550 ms	1044 ms	848 ms
	www.facebook.com	288 ms	255 ms	710 ms	430 ms	998 ms	685 ms
	cyberliving.blogspot.com	302 ms	325 ms	670 ms	640 ms	972 ms	965 ms
Day2 @ 10am	www.google.com	645 ms	349 ms	1670 ms	750 ms	2315 ms	1099 ms
	www.facebook.com	505 ms	288 ms	1450 ms	720 ms	1955 ms	1008 ms
	cyberliving.blogspot.com	566 ms	300 ms	1650 ms	720 ms	2216 ms	1020 ms
Day2 @ 7pm	www.google.com	378 ms	330 ms	840 ms	570 ms	1218 ms	900 ms
	www.facebook.com	428 ms	303 ms	740 ms	560 ms	1139 ms	863 ms
	cyberliving.blogspot.com	305 ms	349 ms	810 ms	820 ms	1115 ms	1169 ms

Read More

Is facebook down?

I tried to open facebook just now (June 21, 2013 @9:00p.m.GMT+8) with my Android tablet but I am getting a "A secure connection could not be established" error.

It has been more than 30 minutes since I have tried opening it but as of this writing, I still could not get connected.

Back to CyberLiving home page

Other Posts
Turn blogger blog into a static web page
Disabling Google+ Comments after reverting back to the original Blogger Profile

Read More

Disabling Google+ Comments after reverting back to the original Blogger Profile

You have enabled Google+ then enabled Google+ Comments but you decided to ditch Google+ Comments, for whatever reason, by changing back to Blogger Profile thinking that all will be restored.

To your horror, your blogger profile now looks different because now you can't find Comments anywhere but Google+ is put in place. To make matters worse, your blog comments are not restored and Google+ Comments is still in effect on your blog. You want to take it out but you don't seem to find where to disable it anymore since you are back in Blogger Profile and no longer in Google+ Profile.

Take out Google+ Comments on your blog and bring back all previous comments

Every forum and sites only tell you to uncheck the "Use Google+ Comments on this blog" check box on your Google+ settings. But since you are back in Blogger Profile, there are no Google+ settings anymore.

Solution is very simple:

• Go back again to Google+ Profile - Switch back to Google+ Profile again the same way you did the first time or simply click on the Get Started button in Google+ settings.
• Disable Google+ Comments - Once Google+ is enabled, go to Google+ settins (click Google+ on the left side) and then you can uncheck the "Use Google+ Comments on this blog" box.
• Change back to Blogger Profile - On your Blogger Dashboard, click the settings button (gear icon on the upper-right) and click on "Revert to Blogger profile" from the drop down menu.

Side note
The main reason I took down Google+ Comments on my blog is because it is very limited. By that I mean only people with Google+ accounts could comment on my blog as opposed to the usual where virtually everybody can comment with a variety of options the way they want to appear in my comments including anonymous.

One indicator that a site is active is through visitors comments plus the fact that I like reading other people's comments. And if I miss out on those because of Google+ Comments, no matter how fancy it may be, I'd rather go back to my original comments box.

Back to CyberLiving home page

Other Posts
Is facebook down?
Kaspersky uses too much memory

Read More

Kaspersky uses too much memory

From a previous post I have written about how you can monitor which of your programs running in the background is making your computer to run slow.

In this post I am going to give an example.

By sorting the list of processes in Task Manager by handles, I saw that avp.exe has the highest handles. Although it has not the highest memory usage, its memory usage is still considerably large. So with this new info, I went to search for answers and found out that avp.exe is the process name for Kaspersky Internet Security.

I have also learned that Kaspersky do scan system memory, start-up objects and system partition while the computer is idle. It also checks for Automatic updates of anti-virus databases and application modules. Both this are resource intensive tasks that can cause CPU as well as memory usage to go extra high when it is started causing your computer to slow down.

Fortunately, there is a way to disable it. Just open KIS then click Settings (gear icon), and go to General Scan Settings (click magnifying glass icon). Uncheck the Perform Idle Scan and Perform regular rootkit scan radio buttons.

After disabling both, I now see a decline in my handles as well as the memory usage and I don't see much CPU spikes anymore.

Back to CyberLiving home page

Other Posts
Disabling Google+ Comments after reverting back to the original Blogger Profile
New virus for Android found

Read More