Seth's Code and PC tutorials

Monday, January 21, 2013

Syncing Opera

Opera on first run.

Almost everyone owns multiple devices today: phones, tablets and computers all have their specific purposes. And we all use the Internet for almost everything. Which makes it nice for us to be able to sync our bookmarks, history, notes and whatnot. Chrome, Firefox, Opera and most other browsers offer methods of syncing all your devices. I will go through syncing my Joli computer with my other computers. I customize my browser allot. I need my search engines synced.

Go to the computer which has the customized opera. Click on the Opera logo in the upper left corner and select "Synchronize Opera," then "enable synchronization". Log into My Opera or creat an account. Next, you need to do the same thing in the Opera browser you just installed. Click "I already Have an account and log in. Then you will see a screen asking you what you want to sync. Check everything you wish to be synced between your different browsers, and click "finish." Your web browsing experience will be the same on all devices. Unfortunately, Opera does not sync themes or extensions, so you will have to do that manually. However, Opera Link is very handy.

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>

Thursday, January 3, 2013

How to create .ICO fils

One of the hardest things about web development and CC in general is icon files: its hard to make them. In a simple Duck Duck Go search I found the easiest way ever: ConvertIco. I have used it many times, and lots of other people use it to. Well, basically, you select whether you want to convert a file from your computer or the web, and click "go."

Wednesday, January 2, 2013

Make a Maping Application

Have you ever wondered if you could make a mapping app? Its easy: just looking at the source for Fireburst Maps give you the complete code. Just paste this where you want the maps to appear:
<div id="I30_html"><table width="98%" align=center cellpadding=4 cellspacing=0 bgcolor="#eeeeee" class=shadetabs1><tr><td><font face=arial size=3 class=fontsize2><img src="http://20searchengines.com/images/directions.gif" height=16 width=16 border=0 align=absmiddle></font></td><td valign=middle width="99%"><font face=arial size=3 class=fontsize2><B>Driving Directions</B></font></td><td align=right nowrap><font face=arial size=1 class=fontsize1>Powered By <a href="http://fireburstmaps.yolasite.com">Fireburst Maps</a></font></td></tr></table><table width="85%" bgcolor="#FFFFFF" align=center border=0 cellpadding=6 cellspacing=6><tr><td align=center><form action="http://www.20searchengines.com/texis/open/asb3" target="_blank"><table bgcolor="#FFFFFF" width="100%" border=0 cellpadding=1 cellspacing=1 class=shadetabs3><tr><td colspan=2 align=center><table width="100%" border=0 cellpadding=4 cellspacing=0 bgcolor="#EEEEEE" class=shadetabs4><tr><td align=left><font face=arial size=3 class=fontsize2><B> Departure / Start Address:</B></font></td></tr></table></td></tr><tr><td colspan=2><table bgcolor="#FFFFFF" width="50%" border=0 cellpadding=3 cellspacing=0><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>Street:</font></td><td align=left><input type="text" size="35" name="street1" value="" maxlength="60" class=tool></td></tr><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>City:</font></td><td align=left><input type="text" size="35" name="city1" value="" maxlength="60" class=tool></td></tr><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>State/Province:</font></td><td align=left><select name=state1 size=1 class=tool>
<option value="">Select a State:</option>
<option value="al">Alabama </option>
<option value="ak">Alaska</option>
<option value="az">Arizona </option>
<option value="ar">Arkansas </option>
<option value="ca">California </option>
<option value="co">Colorado </option>
<option value="ct">Connecticut </option>
<option value="de">Delaware </option>
<option value="dc">District of Columbia </option>
<option value="fl">Florida </option>
<option value="ga">Georgia </option>
<option value="hi">Hawaii </option>
<option value="id">Idaho </option>
<option value="il">Illinois </option>
<option value="in">Indiana </option>
<option value="ia">Iowa </option>
<option value="ks">Kansas </option>
<option value="ky">Kentucky </option>
<option value="la">Louisiana </option>
<option value="me">Maine </option>
<option value="md">Maryland </option>
<option value="ma">Massachusetts </option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota </option>
<option value="ms">Mississippi </option>
<option value="mo">Missouri </option>
<option value="mt">Montana </option>
<option value="ne">Nebraska </option>
<option value="nv">Nevada </option>
<option value="nh">New Hampshire </option>
<option value="nj">New Jersey </option>
<option value="nm">New Mexico </option>
<option value="ny">New York </option>
<option value="nc">North Carolina </option>
<option value="nd">North Dakota </option>
<option value="oh">Ohio </option>
<option value="ok">Oklahoma </option>
<option value="or">Oregon </option>
<option value="pa">Pennsylvania </option>
<option value="ri">Rhode Island </option>
<option value="sc">South Carolina </option>
<option value="sd">South Dakota </option>
<option value="tn">Tennessee </option>
<option value="tx">Texas </option>
<option value="ut">Utah </option>
<option value="vt">Vermont </option>
<option value="va">Virginia </option>
<option value="wa">Washington </option>
<option value="wv">West Virginia </option>
<option value="wi">Wisconsin </option>
<option value="wy">Wyoming</option>
</select></td></tr><tr><td align=left valign=middle nowrap><font face=arial size=3 class=fontsize2>ZIP/Postal Code:</font></td><td align=left><input type="text" size="5" name="zip1" value="" maxlength="10" class=tool></td></tr></table></td></tr><tr><td colspan=2 align=center><table width="100%" border=0 cellpadding=4 cellspacing=0 bgcolor="#EEEEEE" class=shadetabs4><tr><td align=left><font face=arial size=3 class=fontsize2><B> Destination / End Address:</B></font></td></tr></table></td></tr><tr><td colspan=2><table bgcolor="#FFFFFF" width="50%" border=0 cellpadding=3 cellspacing=0><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>Street:</font></td><td align=left><input type="text" size="35" name="street2" value="" maxlength="60" class=tool></td></tr><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>City:</font></td><td align=left><input type="text" size="35" name="city2" value="" maxlength="60" class=tool></td></tr><tr><td align=left valign=middle><font face=arial size=3 class=fontsize2>State/Province:</font></td><td align=left><select name=state2 size=1 class=tool>
<option value="">Select a State:</option>
<option value="al">Alabama </option>
<option value="ak">Alaska</option>
<option value="az">Arizona </option>
<option value="ar">Arkansas </option>
<option value="ca">California </option>
<option value="co">Colorado </option>
<option value="ct">Connecticut </option>
<option value="de">Delaware </option>
<option value="dc">District of Columbia </option>
<option value="fl">Florida </option>
<option value="ga">Georgia </option>
<option value="hi">Hawaii </option>
<option value="id">Idaho </option>
<option value="il">Illinois </option>
<option value="in">Indiana </option>
<option value="ia">Iowa </option>
<option value="ks">Kansas </option>
<option value="ky">Kentucky </option>
<option value="la">Louisiana </option>
<option value="me">Maine </option>
<option value="md">Maryland </option>
<option value="ma">Massachusetts </option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota </option>
<option value="ms">Mississippi </option>
<option value="mo">Missouri </option>
<option value="mt">Montana </option>
<option value="ne">Nebraska </option>
<option value="nv">Nevada </option>
<option value="nh">New Hampshire </option>
<option value="nj">New Jersey </option>
<option value="nm">New Mexico </option>
<option value="ny">New York </option>
<option value="nc">North Carolina </option>
<option value="nd">North Dakota </option>
<option value="oh">Ohio </option>
<option value="ok">Oklahoma </option>
<option value="or">Oregon </option>
<option value="pa">Pennsylvania </option>
<option value="ri">Rhode Island </option>
<option value="sc">South Carolina </option>
<option value="sd">South Dakota </option>
<option value="tn">Tennessee </option>
<option value="tx">Texas </option>
<option value="ut">Utah </option>
<option value="vt">Vermont </option>
<option value="va">Virginia </option>
<option value="wa">Washington </option>
<option value="wv">West Virginia </option>
<option value="wi">Wisconsin </option>
<option value="wy">Wyoming</option>
</select></td></tr><tr><td align=left valign=middle nowrap><font face=arial size=3 class=fontsize2>ZIP/Postal Code:</font></td><td align=left><input type="text" size="5" name="zip2" value="" maxlength="10" class=tool></td></tr></table></td></tr><tr><td colspan=2 align=center><table width="100%" border=0 cellpadding=4 cellspacing=0 bgcolor="#EEEEEE" class=shadetabs4><tr><td align=left><font face=arial size=3 class=fontsize2><B> Driving Directions Provider:</B></font></td></tr></table></td></tr><tr><td colspan=2><table bgcolor="#FFFFFF" width="50%" border=0 cellpadding=3 cellspacing=0><tr><td nowrap align=left valign=middle><font face=arial size=3 class=fontsize2>Directions From:</font></td><td align=left><SELECT NAME="p" class=tool><option value="googledrive">Google Maps</option><option value="mapquestdrive" selected>MapQuest</option><option value="yahoodrive">Yahoo! Maps</option></SELECT></td></tr></table></td></tr><tr><td valign=middle><BR> <input type="submit" name="Search" value=" Get Driving Directions " class=tool><BR><BR></td></tr></table></FORM></td></tr></table>

</div>

The maps are very convenient and useful.

Driving Directions

Departure / Start Address:

Street:
City:
State/Province:
ZIP/Postal Code:

Destination / End Address:

Street:
City:
State/Province:
ZIP/Postal Code:

Driving Directions Provider:

Directions From:

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.