Customizing how pages appear in Google+ shares

Quite often, you will see the Google+ share button. But did you know Google gives us away to customize the way the link looks when its shared? In fact, it is very simple. The code is basic. Add it to the <head> tags.
<html itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="Title">
<meta itemprop="description" content="My Description">
<meta itemprop="image" content="image URL">
It is also easy to create a share button. Here's the code:

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plus action="share"></g:plus>
You can make the share button load without any additional loading time to your page with this code:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Of course, you can add a +1 button to your site and it will enable sharing:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300" data-href="URL to +1"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

You can do all sorts of things with the Google+ platform, and integrate your site very well with the plugin page. I recommend you check it out. 

Add Comments to your site using Facebook

Comments are used on blog posts and websites all over the web. They can be very useful for getting feedback from users. One of the most popular and easiest ways is by using Facebook for your commenting. First, navigate to http://developers.facebook.com/docs/reference/plugins/comments/ and enter the URL of the page you wish the comments to appear on. There are some basic customization options. Click "Get Code" and you will see two boxes of

code. The first you should copy and paste right after the <body> tag of your webpage. I got this code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
The other code is pasted where you want the comment box and comments to appear. You can moderate these comments. To do so simply paste this code into the <head> of your page. <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/> As you can see, its really very simple. And its a wonderful and useful way of communication. Facebook might not be the best social network, but it certainly provides one of the best ways to add comments to a page. Google+ fans, you can't help but admit that this is a very useful thing.

Tell robots not to index a page, part 1

Robots are little pieces of technology that find links for the search engines. This makes it so the pages discovered by the robots, (also called "spiders.") appear in the search engine's results. This is part one of how to keep Google, Yahoo, Bing, Gigablast, Fireburst and other search engines from indexing a single page or pages of a site. This is done by meta tags inserted between the <head> and </head> tags.
Keep a bot from indexing a page
To keep a "good" bot from adding a page to its index insert this meta tag in the head:

<meta name="robots" content="noindex" />

Keep bots from following links on a page
<meta name="robots" content="nofollow" />


Keep a bot from following a specific link

<a href="URL" rel="nofollow">link text</a>


Other bot restriction Tags

Keep bots from indexing images on your page:

<meta name="robots" content="noimageindex" />


Keep bots from archiving a copy of your page:

<meta name="robots" content="noarchive" />

Keep bots from translating the page in search result
<meta name="robots" content="notranslate" />

Site Title, Description & Tags in HTML

The title, description and tags are viable to SEO. Search engines use these to help match your site with searches. Most site builders offer completely customized title, description and tags but you need to add these manually in HTML, PHP, and other manually edited documents. The code is inserted into the <head> and </head> tags:
<TITLE>My Site's Title</TITLE> 

<meta name="keywords" content="Separate keywords with commas.">
<meta name="description" content="My site's description, two or three sentences.">

<meta name="author" content="Your Name">
A well formed head tag will follow this format:
<head>
<TITLE>My Site's Title</TITLE> 

<meta name="keywords" content="Separate keywords with commas.">
<meta name="description" content="My site's description, two or three sentences.">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<meta http-equiv="refresh" content="100">
<link rel="Shortcut Icon" href="/favicon.ico">  
</head>
For more <head> tags see all posts with the label head. You may omit the meta tags about keyword and description. You may omit any of these <head> tags. 

Links, Part 1: The basic link

Links are an almost irremovable part of a site or even a page. Links are used to lead to other pages, other sites, even emails.  Fortunately, links are very easy. In this post I will go over the hyperlink, the email link and the image link. The basic link code is <a href="http://sethstutorials.blogspot.com">Seth's Code & PC Tutorials</a> Replace with http://sethstutorials.blogspot.com  with the address of the site you want to link to. Replace Seth's Code & PC Tutorials with the text you want your links to display.

Email Link

The email link is simple. The code is:
<a href="mailto:sethsevenyoln@aol.com">Email Me</a>
Replace sethsevenyoln@aol.com with your email address, and Email Me with the text you want displayed.
Image Link

The image link is a bit more complicated. Still, its quite possible. The code is:
<a href="http://fireburst.webs.com"><img src="image.gif" border="0"></a>

Replace http://fireburst.webs.com with the URL of the site you want to link to, and image.gif with the URL of the image you want displayed. 

Opening a link in a new tab

If you want a link to be opened in a new tab, for the basic link use this code:


<a href="http://url" target="_blank">link text</a>

HTML Video: Part 2

I already wrote a post on HTML5 video. This expands on it and explains things like auto play. 
Master Code + controls = auto play, loop

To add loop, auto play and "poster" or image that's shown when the video first loads, use this code:
<video poster="thumbnail.png" autoplay loop controls tabindex="0">
  <source src="vide.webm" type="video/webm"; codecs="vp8, vorbis" />
  <source src="video.mp4" type="video/mp4"; codecs="theora, vorbis" />
</video>

Replace thumbnail.png with the URL of the pic you want to display when the video is first loaded, video.webm with the URL of the webm version of your video, video.mp4 with the URL of the mp4 version of your video. The autoplay and loop controls set what they sound like: autoplay making the video play upon loading and loop making the video repeat. More on HTML5 video is available at my former post.

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
HTML5 video	20.0	12.0	9.0	12.0	5.1

HTML text

Html is an old programming code used quite often in webpages. This post is to show you how to write rich text in HTML. HTML is supported by all browsers. This does not include color, however. 
1. Fonts
Fonts are the way the text looks. the most common fonts and their code are:
Times New Roman: <span style="font-family: Times, Times New Roman, serif;">
Arial: <span style="font-family: Arial, Helvetica, sans-serif;">
Verdana: <span style="font-family: Verdana, sans-serif;">
Helvectica: <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Georgia: <span style="font-family: Georgia, Times New Roman, serif;">
Courier New:<span style="font-family: Courier New, Courier, monospace;">
Trebuchet: <span style="font-family: Trebuchet MS, sans-serif;">
When you want a font to end and display the browser's defaut font, use this closing tag: </span> You can get many more fonts and their codes at the Google Web Fonts Directory'
2. Size
So how do you get your font size to change? Simple. The size tags. They are <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 
<h1> is the largest, and I do not know how far the fine print goes down. </h1> is the closing tag. 
3. Effects
The italics tag is <i>, while the closing tag is </i> example: This is Italics.
The bold tag is <b> with the closing tag of </b>
The underline tag is <u> while the closing tag is </u>
The strike through tag  is <strike> while the closing tag is </strike>
_{The Subscript  tag is _{and the closing tag is}
The ^Superscript tag is ^{while the closing tag is}
<marquee> makes the text roll.example </marquee> is the closing tag. example 
<blink> makes the text blink in Firefox. </blink> is the closing tag.}