Let’s look at how YouTube oEmbed works

1. First, send a request to YouTube’s Oembed API page with a video URL (must be urlencoded) as parameter and we also specified that we want it to be returned in json format.

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json

2. You will then see a long json-encoded string which contains all information about the video.

3. Next thing you need to do is just simply json-decode the string using your programming language, then you are free to use the information. We will see how to do that in PHP.

Using Oembed to Embed Youtube Videos in PHP

<?php
 
$videourl = 'http://www.youtube.com/watch?v=gB4nwqNM190';
 
$json = @file_get_contents('http://www.youtube.com/oembed?url='.urlencode($videourl).'&format=json');
$decode = json_decode($json, true);
 
if ($decode == null || !$decode) {
	$error = true;
	//error control here
} else {
	$thumb = $decode['thumbnail_url'];
	$html = $decode['html'];
}
 
?>

It’s pretty straightforward and self-explanatory:

• First, we send a url request to YouTube’s obembed API page using file_get_contents() function.
• Second, we decode the response using json_decode() function which convert json format to array.
• Third, if there is no error in decoding, we then assign $thumb and $html and use it in our website or program.

Extra: If you want to limit the embedded video’s width or height

You can specify the max height or max width by appending the maxwidth or maxheight parameters to the oembed URL. (Please note that this cannot resize a smaller video to bigger size)

For example, from our example above, to specify max width of 300 pixels:

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json&maxwidth=300

You should notice the video embedding code (iframe) is now limited to width of 300 pixels.

How do I embed videos from other video sites like Vimeo?

Most of the popular video sites has oEmbed support just like YouTube. For example, by googling “vimeo oembed” we found vimeo oembed documentation.

In vimeo, this is the URL we should send our request to:

http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/7100569

More details about oEmbed API page for other video sites will be covered in our next blog post (coming soon).

<?php
 
$query = mysql_query("SHOW TABLE STATUS WHERE name='your_table_name_here'");
if (mysql_num_rows($query)) {
	$result = mysql_fetch_assoc($query);
	echo $result['Auto_increment'];
} else {//error
	//error control here
}
 
?>

Just replace “your_table_name_here” with your mySQL table name.

As a Function

Furthermore, making it a PHP function would make the solution looks clean.

<?php
 
function get_next_value($tablename) {
	$query = mysql_query("SHOW TABLE STATUS WHERE name='".mysql_real_escape_string($tablename)."'");
	if (mysql_num_rows($query)) {
		$result = mysql_fetch_assoc($query);
		return $result['Auto_increment'];
	} else {//error
		return false;
	}
}
 
//usage
$nextval = get_next_value('your_table_name_here');
 
?>

Hope this helps.

PHP Smart Date Function

/*
Simple PHP Smart Date Function
by Zen (http://zenverse.net)
*/
function smartdate($timestamp) {
	$diff = time() - $timestamp;
 
	if ($diff <= 0) {
		return 'Now';
	}
	else if ($diff < 60) {
		return grammar_date(floor($diff), ' second(s) ago');
	}
	else if ($diff < 60*60) {
		return grammar_date(floor($diff/60), ' minute(s) ago');
	}
	else if ($diff < 60*60*24) {
		return grammar_date(floor($diff/(60*60)), ' hour(s) ago');
	}
	else if ($diff < 60*60*24*30) {
		return grammar_date(floor($diff/(60*60*24)), ' day(s) ago');
	}
	else if ($diff < 60*60*24*30*12) {
		return grammar_date(floor($diff/(60*60*24*30)), ' month(s) ago');
	}
	else {
		return grammar_date(floor($diff/(60*60*24*30*12)), ' year(s) ago');
	}
}
 
 
function grammar_date($val, $sentence) {
	if ($val > 1) {
		return $val.str_replace('(s)', 's', $sentence);
	} else {
		return $val.str_replace('(s)', '', $sentence);
	}
}

Basically I defined 2 functions above:
smartdate – calculates the difference between given timestamp and current time, then returns the correct sentence
grammar_date – modifies the returned sentence to plural form or singular form

Usage

The usage is simple and straightforward.

<?php
 
//example 1
echo smartdate($yourtimestamp);
 
//example 2
echo 'Posted on '.smartdate($yourtimestamp); 
 
?>

By default, this function returns the floor() value, i.e: instead of returning “1.7 years ago”, it returns “1 year ago”. Anyway, the function can be easily modified to suit your specific needs.

Give users the choice to view the full date

1 disadvantage of smart date is of course, it reduces the level of detail and granularity of the date information. For example, dates of 13 months ago or 19 months ago will both be displayed as “1 year ago”.

The most common way to let user view the full date is to add a “title” attribute with full date as the attribute value. Now, when user mouseover your smart date, they can see the full date popping up as tooltip. Facebook uses this approach.

<?php
 
//from example 2 above
echo 'Posted on <span title="' . $originalfulldate . '">' . smartdate($yourtimestamp) . '</span>'; 
 
?>

Hope this helps.

NOTE:
This is not XAMPP / apache issue
This is not browser-specific issue

In fact, this is a simple problem with simple solution. However, this problem occurs when I am getting frustrated with the Facebook integration problem (after 12 hours of debugging). Therefore, I missed some simple but important steps to solve this problem. Here I list them down below:

1. Ping Localhost

For Mac OS users, open up your Terminal. For windows users, open up your command prompt.

• Type the “ping localhost” and press enter.
• You should get error messages like “unknown host” since you are having this problem.

• Next, type “ping 127.0.0.1″ and press enter.
• If you saw something like this, the ping is successful:
  ^?View Code CMD

  PING 127.0.0.1 (127.0.0.1): 56 data bytes 64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.118 ms 64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.171 ms 64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.167 ms

• If you get “unknown host error”, please check whether you have started your local server service.

2. Clear your browser cache

Modern browsers cache a lot of stuff, including DNS cache. They may have cached the erroneous DNS setting in etc/hosts, so you might want to clear your browsers cache and try loading localhost again. Clearing cache alone would already be sufficient, you can skip clearing cookies, saved session, etc.

If it still doesn’t work, try #3 below.

3. Did you just flushed the DNS cache?

I ran this command in terminal (Mac) to flush my cache before I get into this mess: “dscacheutil -flushcache”
For some reason, after I flushed the cache, the DNS setting is not being rebuilt – I cannot ping localhost but I can ping 127.0.0.1

After restarting my laptop (to rebuild the DNS settings & cache) and clearing all browser cache once again, I finally get my localhost displayed again.

Now I hope this helps some of you.

Here are the complete codes for all sizes of Facebook share button for those who are interested:

Box Count

Share  *count will only visible when there is at least 1 share

Codes:

<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>

Button Count

Share *count will only visible when there is at least 1 share

Codes:

<a name="fb_share" type="button_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>

Button only

Share

Codes:

<a name="fb_share" type="button" 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>

Small Icon only

Share

Codes:

<a name="fb_share" type="icon" 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>

Custom URL?

All codes above “shares” the current page. If you want to share another page or a specific page, you need to add a “share_url” attribute to the <a> tag. You need this too when you have multiple share buttons in a single page.

Example below shares our main website http://zenverse.net instead of this page.

Share

Here’s how:

<a name="fb_share" type="button_count" share_url="http://zenverse.net" 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>

Multiple Share Buttons

If you have multiple share buttons in a single page, you just need to include the <script> element once.

Hope this helps.

Awesome Screenshot: Capture & Annotate

As the name suggests, this awesome extension can do more than just screenshot. At a glance, it provide 3 ways to capture screenshots: visible area, entire page or selected area. Furthermore, it allows us to crop, annotate the screenshot with shapes and texts as well as blur sensitive info. Most importantly, it comes with undo feature.

Pendule

This is an essential extension for web developers. Below are some key features of Pendule I find it useful:

• View all css and javascript codes with syntax highlighting
• Reload css without refreshing the page.
• One-click disable or enable external/inline CSS
• One click hide all images / background images
• Color picker and ruler to measure an element in pixels
• Links to validate html / css / feed
• Added “View Selection Source” feature (when you right click a highlighted area), just like in Mozilla Firefox.

Resolution Test

This allows web developers to test their website in all common screen resolutions, as well as user-defined size. With this extension, we do not have to update our screen resolution manually anymore. All common screen size can be applied and tested with only one click, Google Chrome will then changed its windows size, without changing the screen resolution.

SEO for Chrome

This extension can display information such as page rank, number of backlinks, social media stats, traffic stats and more within seconds. It can also show all nofollow links, if enabled, by highlighting them with border. The keyword research tool sounds useful too, although I can’t seems to use it at the moment.

If you know other good extension, feel free to share with us in the comment section.

As far as I understand, this has nothing to do with FTP settings. This problem occurs because the Apache HTTP service was being run as “nobody” while your Mac user name is a different name. Thus, it has no permission to add/edit your server files so WordPress attempted to use FTP to perform its job.

Editing httpd.conf as Admin

First of all, editing this file is not as easy as using a text editor program and edit it because this read-only file can only be changed by root or superuser, not even administrator. There are 2 or more methods that you use to edit such file:

1. Edit using vi editor in sudo mode using Terminal
2. Run Mac OS TextEditor in sudo mode using Terminal and edit the file

- Terminal is a command line tool just like Window’s CMD.
- Sudo mode refers to running the file as superuser or root.
- Vi editor is a command line editor that is very not user-friendly to use, edit and save (at least for beginner)

Thus we will use Method 2 to perform this task.

1. Run Mac OS TextEditor application in sudo mode using Terminal and edit the file

First of all, open up your Terminal by typing “Terminal” in your Spotlight search box (upper right corner)

Once the terminal is loaded, type this in: (copy and paste if possible)

sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /Applications/XAMPP/etc/httpd.conf

- sudo command will run the TextEdit application as root
- Seperated by a space after the application path, is the path of httpd.conf (the file to edit)

Press enter, a TextEdit window should pop up and you can then freely edit the file as root.

2. Change the user name and group name

Now, look for these 2 lines:

User nobody
Group admin

Change them to:

User your-mac-username
Group staff

- Staff is the non-admin user group in Mac.
- If you are not sure about your mac username, open Finder > go to Macintosh HD > Users > Look for your folder’s name.

Now restart your XAMPP apache server and it should be working perfectly.

Use RewriteCond

We were used to use RewriteRule to match a URL, and then rewrite it. However, RewriteRule will always ignore your query string (GET data) so we need to use RewriteCond to capture the values in the query string.

This is the syntax:

RewriteCond %{QUERY_STRING} ^(.*)$

• %{QUERY_STRING} captures the matched query string into % variable.
• %1 will carry the matched content of the first group of brackets.
• The second part ^(.*)$ is the pattern you want to match.
• ^ means “start with”
• $ means “end”
• Like regular expressions, the dot in (.*) matches any characters.
• The asterisk * inside the brackets is a quantifier that match 0 occurence to infinite occurences.
• Therefore, combining them, (.*) matches any characters
• So, clearly, in this example, it matches the whole query string part.

Some common ways of capturing query strings

Case 1

This case is for you if you’ve rewrote your url this way, for example:
FROM site.com/show.php?id=seo TO site.com/show/seo/

And you WANT to pass or append some GET data using the rewritten URL, like:
site.com/show/seo/?lang=en&source=firefox you want it to append like site.com/show.php?id=seo&lang=en&source=firefox

This is the htaccess rules:

RewriteEngine On
RewriteCond %{QUERY_STRING} ^(.*)$
RewriteRule ^show/(.*)/$ show.php?id=$1&%1

• This RewriteCond captures whole query string (first bracket) into %1
• In this case, the captured string %1 is “lang=en&source=firefox”
• We then do our normal URL rewriting and append the %1 to the URL after a ampersand (&)

Case 2

This case is for you if you know specifically or want to control what query string you are going to use.

For example, you only want to match lang=xxx and NOTHING ELSE, for example:
site.com/show/seo/?lang=en&more=1 you want it to append like site.com/show.php?id=seo&lang=en, ignoring other unknown query string.

RewriteEngine On
RewriteCond %{QUERY_STRING} ^lang=(\w+)$
RewriteRule ^show/(.*)/$ show.php?id=$1&lang=%1

• This RewriteCond captures lang‘s GET data (first bracket) into %1
• \w matches word characters
• The plus + means one occurrence or more
• In this case, the captured string %1 is “en”

Case 3

Similar as Case 2, but tis case we have more query to match.

For example, you only want to match lang=xxx and time=000, for example:
site.com/show/seo/?lang=en&time=100 you want it to append like site.com/show.php?id=seo&lang=en&time=100

RewriteEngine On
RewriteCond %{QUERY_STRING} ^lang=(\w+)&time=(\d+)$
RewriteRule ^show/(.*)/$ show.php?id=$1&lang=%1&time=%2

• This RewriteCond captures lang‘s GET data (first bracket) into %1
• This RewriteCond also captures time‘s GET data (second bracket) into %2
• \w matches word characters
• \d matches decimals
• The plus + means one occurrence or more
• In this case, the captured string %1 is “en” , %2 is “100″

Useful Link

Mod Rewrite : Rewritecond Documentation

The Random Missing Characters – My Case

It seems that everytime you view source of any pages. Google Chrome would miss out some characters, mostly one of these: < or >

In my case, two examples were shown below:

Notice the <a> tag after <p>

<p>a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=zenverse"><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></p>

Notice the last </li> tag

<li><a href='http://zenverse.net/2009/12/' title='December 2009'>December 2009</a>&nbsp;(6)</li> 
<li><a href='http://zenverse.net/2009/11/' title='November 2009'>November 2009</a>&nbsp;(10)/li>

Reproducing the error

Using Google Chrome, you can try to load any validated site’s source code, preferably websites with long source codes. You can try it with our site. Next, go to the W3C Validator and paste them into the textarea and validate. You might notice some error.

Do the same thing again using Firefox.

What is wrong with Google Chrome recently? Last week we just discovered a bug that causes the browser to load very slowly or not to load at all, and now we discovered another new bug here.

This feature can be turned off though, if you don’t like this. You can go to Google Account Settings > Under “+1 on non-Google sites” > Click “Edit” > Select “Disable”.

Integrate Google +1 Button into WordPress Theme

First of all, Google has its own code generator for the button located at here. Now. decide the style and size then come back to here again.

Loading The Required Javascript

Open your theme’s header.php, paste this or similar codes from the generator, ONCE ONLY, into <head> tag:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Adding The Button To Single Post / Page

If you want your button to appear in single post or page, first open single.php or page.php, identify The Loop. More information about The Loop at here. Next, paste this button render codes or the codes generated by google, after

<g:plusone></g:plusone>

The code above should make the button nicely, your page URL will be auto detected so nothing we need to change here.

Adding The Button To Blog Index

If you want your button to appear in blog index for every post, first open index.php, identify The Loop and paste this button render codes or the codes generated by google, after or

We need to include a href=”" attribute here because every post has their own URL. like this:

<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

In other words, no matter how your generated render codes looks like, just add the following href attribute into the plusone tag.

href="<?php the_permalink(); ?>"

Google Plus One Button, Live

This is how my Google +1 Button for this page looks like:

Useful Links

More Info about Google +1 Button
Google +1 Button Code Generator
Google +1 Button API for developer