Seth's Code and PC tutorials: head

Showing posts with label head. Show all posts

Sunday, January 20, 2013

Facebook Like Boxes

Did you know that you can show who liked you on Facebook with a simple widget called the "like box?" Unfortunately, this is only available for Facebook Pages, which really sucks. All you need to do is enter some data at http://developers.facebook.com/docs/reference/plugins/like-box/ and click get code. Make sure the FB Javascript SDK is included:

<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>
Then you have the code they generated for you:
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Fireburst/269394286467409?ref=hl" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Sunday, January 6, 2013

How to display reccomendations via Facebook

One of the easiest ways to get users to visit another page on your site is to recommend pages they will like. One of the easiest ways is to display a Recommendations box with Facebook. But, to add like buttons to other hosts is easy.
To add the recommendations box to your site, navigate to developers.facebook.com/docs/reference/plugins/recommendations/ and fill in the box. You can customize it easily. Put the Facebook Javascript SDK in your <head> tags;
<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>
Then paste the box code into the place where you want it to appear:

<div class="fb-recommendations" data-site="http://sethsdiscoveries.blogspot.com" data-width="300" data-height="300" data-header="false" data-font="trebuchet ms"></div>

Monday, December 31, 2012

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:


<div class="g-plusone" data-annotation="inline" data-width="300" data-href="URL to +1"></div>


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

Thursday, November 15, 2012

Make a webpage RSS feed

Most news sites have things called RSS feeds that you subscribe to and get updates using a feed-reader. It's actually easy to make an RSS feed, using basic XML. This code goes into notepad. Update whenever you have a new post you want to display in the feed
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0"><channel>
<title>New Feed One</title>
<link>http://site.com/newfeedone</link>
<description>Start text on articles</description>
<item>
<title>New Post Two</title>
<link>http://site.com/newposttwo</link>
<description>New post on New Post Two</description>
</item>
<item>
<title>New Post Three</title>
<link>http://www.site.com/newpostthree</link>
<description>description</description>
</item>
</channel>
</rss>
Save as "feed.xml" but you can change anything except .xml.

Add categories with this code:
<category>Web development</category>

Wednesday, November 7, 2012

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

Sunday, October 28, 2012

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.

Thursday, October 25, 2012

Links, part 3: Colors & CSS

In a previous post I explained the link. In this post I will go into how to change link colors, add hover effects and visited colors. The first will be changing the link colors by some basic HTML in the body. Insert this code between the <body> and </body> tags.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
body link is when the link is displayed on the page. #COCOCO is the blue you see everywhere. vlink is the visited color. #808080 is the purple you see on most pages when you revisit a page after clicking a link. #FF0000 is red, and alink is the hover color.

Link color in your CSS stylesheet

Its easy, and you can do even more, like making a link suddenly underline when hovered over. Here's the code:

a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
Multiple Link effects through CSS stylesheet
You can make "classes" of link effects in CSS that will make links in each class act differently. For example, you could make a class called nav for links in the body, and a class called foot for links in the footer. Here is the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }

a.foot:link {color: red; font-size: 14pt; font-weight: bold; }
a.foot:visited {color: green; font-weight: bold; }
a.foot:hover {text-decoration: underline; background-color: blue; }
a.foot:active {color: orange; }Using the classes
It's much simpler than individually changing every link that you want different from the settings you put.

For the class nav use this code: <a href="URL" class="nav">Link Text</a>

For the class foot use this code: <a href="URL" class="nav">Link Text</a>

Tuesday, October 23, 2012

How to tell users IE is incompatible

Internet Explorer is Microsoft's web browser. It's the second most popular in the world, but unfortunately, its web standard support is extremely limited. Fortunately, its easy to tell users to upgrade.
For IE6
IE 6 supports almost nothing, so don't be afraid to tell users to upgrade. It doesn't support Google CSE, or any advanced CSS. Here's how to tell users to upgrade IE 6. I know it says IE 7, but it won't do any warnings in IE 7. Insert this code between the <head> and </head> tags.



For All Versions of IE NOT RECOMMENDED.

Insert between the <head> and </head> tags

How to verify a Blogger blog with Bing Webmaster Tools

Bing webmaster tools gives you data about your site or blog's performance on Bing. However, verifying a Blogger blog with Bing can be tricky. Here's how.
1. Navigate to http://bing.com/webmaster and click sign in. Log in with your Microsoft of Windows Live account (you can sign up here).

Once you're signed in, enter the URL of your Blogger blog.

It will lead you to this page. Click "add" and don't bother with a sitemap. After all, its a blog.

You'll get something like this:

Now go to Blogger and navigate to the "Template" section.

Select "Edit HTML" and don't worry! When you see this click "proceed"

Scroll to the very bottom. You will see this:

At the very bottom, paste the code from Bing Webmaster Tools right before </html> tag.

Click "save template." Go back to Bing Webmaster Tools and click "verify." You're set. If it doesn't work , try a new post. Or figure out a way to upload a file that I don't know of.

Monday, October 22, 2012

CSS Stylesheets or Syncing Webpages Easily

Css was made to save time. If you have a site where you want all the background colors, links, text, link hover colors and stuff like that to be the same on all pages, CSS stylesheets are the quickest way to do that. In fact, CSS stands for Cascading Style Sheets.
1. Open notepad or any plain-text editor. Enter this code: Highlighted text is for you to change.

h3
{
color:black;
text-align:left;
font-size:8pt;
}

Now for the Background. Remember, multiple styles cascade into one style.

body {background-color:#FFFFFF;}

You could also use an image background. This is for positioning an image in the top right corner.:

body
{
background-image:url('image_URL');
background-repeat:no-repeat;
background-position:right top;
}

If you want the image to repeat the whole length of the page:

body
{
background-image:url('image_URL.png');
background-repeat:repeat-x;
}

Save as "Stylesheet.css"

2.Adding the style sheet to webpages. Insert this code between the <head> AND </HEAD> tags. This is where the <TITLE> tag is.

Wednesday, September 26, 2012

Creat a Favicon

Favicons are icons which show in the browser's tabs or address bar. They make your site look more professional and help make it stand out. An example would be the favicon of my blog shown at the beginning of the post. The picture next to the title is the favicon.
First, choose an image that you would want to be your favicon. It should be almost square or exactly square. Do not cram to many details in it for it will be put into a "very tight place." You could use Windows snipping tool to clip a peace of your logo. Go to http://convertico.com and select upload a file from computer. Choose your image and wait for it to be uploaded. Then download the finished icon. Now we get to the hard part. Upload the favicon.ico file to you server or website host. Then add this code to your homepage:

<link rel="Shortcut Icon" href="/favicon.ico">

Save it and you will be done.

Monday, September 24, 2012

Make Opera Compatable with any site

Sometimes, sites say that your Opera is not compatible. This means that you cannot use Opera to access that site. However, Opera offers a nifty way to get around this, for most sites support Opera 12 and up, even if they don't know it. And, with many Google services, you will see something like this:

So you right click on the site and it will display a menu. The second option from the bottom should be "edit site preferences". Click this and you should see something like this:

Click on "Network" and something like this should come up:

Click on the drop down menu where it says "identify as Opera and select Mask as Firefox. When you are finished you will see this:

Click "OK" and refresh the page. Do this to any page that says it is not compatible with Opera.