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.
Monday, December 31, 2012
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.
<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.
Wednesday, December 26, 2012
Displaying webpages with iFrames
Iframes were once popular to hide content from the Search Spiders, a form of Blackhat SEO. Now that these spiders can see through iframes, I don't recommend using them for that purpose; it could get your site banned. However, they can be useful for displaying other sites in your webpages for various purposed. The basic code is:
<iframe src="URL" width="200" height="200">
Sorry, there was a problem loading this site. Maybe we typed the URL wrong or you can get a new browser <a href="http://www.opera.com">Here</a></iframe>
This iframe displayed fireburst.webs.com in a width and height of 500. It was simple to create. iFrames can be very useful for a webmaster, as long as you don't use them for hiding content.
<iframe src="URL" width="200" height="200">
Sorry, there was a problem loading this site. Maybe we typed the URL wrong or you can get a new browser <a href="http://www.opera.com">Here</a></iframe>
This iframe displayed fireburst.webs.com in a width and height of 500. It was simple to create. iFrames can be very useful for a webmaster, as long as you don't use them for hiding content.
Tuesday, November 20, 2012
Embed RSS feeds into a webpage
In websites such as Fireburst News, you will see RSS feeds embedded into the webpage. Also, you may want to display your RSS feed in your site's homepage. To make an RSS file, visit this post. Here's the code to embed my blog's RSS:
<script src="http://gmodules.com/ig/ifr?url=http://sethsdiscoveries.blogspot.com/feeds/posts/default&synd=open&w=320&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
<script src="http://gmodules.com/ig/ifr?url=http://sethsdiscoveries.blogspot.com/feeds/posts/default&synd=open&w=320&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
Thursday, November 15, 2012
XML links or Xlink
In XML, tags are made up which makes XML links almost impossible. The solution to this is Xlink, which is a standard for XML links. To display links use a code like this;
<?xml version="1.0"?>
<homepages xmlns:xlink="http://www.google.com">
<homepage xlink:type="simple"
xlink:href="http://ddg.gg">Duck Duck Go</homepage>
<homepage xlink:type="simple"
xlink:href="http://www.google.com">Google</homepage>
</homepages>
An easy example would be this;
<plantstore xmlns:xlink="http://www.w3.org/1999/xlink">
<plant name="Petunia">
<description
xlink:type="simple"
xlink:href="http://plants.com/images/petunia.png"
xlink:show="new">
The familiar petunia at a bargain price.
</description>
</book>
</bookstore>
You can repeat the highlighted text as often as you like.
<?xml version="1.0"?>
<homepages xmlns:xlink="http://www.google.com">
<homepage xlink:type="simple"
xlink:href="http://ddg.gg">Duck Duck Go</homepage>
<homepage xlink:type="simple"
xlink:href="http://www.google.com">Google</homepage>
</homepages>
An easy example would be this;
<plantstore xmlns:xlink="http://www.w3.org/1999/xlink">
<plant name="Petunia">
<description
xlink:type="simple"
xlink:href="http://plants.com/images/petunia.png"
xlink:show="new">
The familiar petunia at a bargain price.
</description>
</book>
</bookstore>
You can repeat the highlighted text as often as you like.
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>
<?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>
Make Image Links open in a New Tab
Many people want to make image links open in a new tab, like they do on my Alternative Search Engines list. It's a fairly simple code too:
<a href="http://www.clipotech.com/" target="_blank"><img border="0" height="75" src="http://4.bp.blogspot.com/_QF2exREIx20/SVDCxpqD2jI/AAAAAAAABtg/cJuBW3wQpLw/S1600-R/0007.PNG"/></a>
That will make a link that goes like this:
You can remove any text that's marked in red.
<a href="http://www.clipotech.com/" target="_blank"><img border="0" height="75" src="http://4.bp.blogspot.com/_QF2exREIx20/SVDCxpqD2jI/AAAAAAAABtg/cJuBW3wQpLw/S1600-R/0007.PNG"/></a>
That will make a link that goes like this:
You can remove any text that's marked in red.
Subscribe to:
Posts (Atom)
