Webpro news posted a great article discussing Walmart’s latest Facebook campaign called ‘CrowdSaver’.
Basically, it lets fans of their facebook page vote for potential deals that Walmart suggests as possible. Once enough people vote for a deal, it becomes reality.
Genius! They create, buzz, brand loyalty and use the popular deal as a sort of loss leader, getting people into their store where they might as well stock up on everything else they need.
While WordPress comments are fine for communicating with readers of your blog they suffer from one great downfall… while they can keep current readers engaged, they don’t do a great deal to help attract new visitors to your site.
This issue is solved with Facebook’s new development tools that allow you to harness the social networking power of facebook right from your wordpress blog. While there are a number of apps available for immediate use (or to be refined into your own customized apps), probably the best of the bunch is the Facebook Comments App. This allows you to let visitors who are signed into Facebook, comment right on your blog post… and their comments show up on their own activity list within Facebook itself. This allows that visitor’s entire friend list to see what they have said, along with a link to the page on your Blog they are referencing.
Needless to say, this is a very big deal.
Here’s how to integrate facebook comments in your blog:
**Based on some feedback from users I should add the following point:
-When you copy and paste the code from this page to your site editor there is a chance that some characters will not copy as intended. Specifically, some people have had problems with the quotation marks. When you paste the code into your site editor, make sure the quotations transfer as intended. If they don’t, then replace them with in-code quotations (‘ and “)
****
1. Sign into your Facebook Account (hopefully you don’t need more instructions for this item)
2. Sign up to create a Facebook App here: http://developers.facebook.com/setup/
Don’t use the http:// with your site url. Just use the format www.websiteurl.com/ (include the trailing slash)
3. Once the application is approved you will see your Create an Application Page. Note application ID and Secret ID (you will need the App ID later)
4. Click on Developer Dashboard link. Allow Facebook Permission when it asks.
5.Now go to this url: http://graph.facebook.com/your-username (user your facebook username here… if you don`t have one, go into your facebook account settings and set one)
You will see your Facebook user ID that you will soon need.
6. Go to your current wordpress theme folder on your system and for steps 7 – 9 edit the header.php file.
7. Change the <html> tag to the following:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” xml:lang=”en” lang=”en”>
8. Add the following between the <head> and</head> tags
<meta property=”fb:admins” content=”USER_ID”/>
<meta property=”og:title” content=”<?php wp_title(‘ ‘,true,’right’); ?>”/>
<meta property=”og:site_name” content=”YOUR SITE NAME”/>
<meta property=”og:type” content=”blog” />
<meta property=”og:image” content=”URL TO YOUR THUMBNAIL IMAGE”/>
<meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”/>
9.Add the following right after the body tag
10. Go the Facebook Social Plugin page http://developers.facebook.com/plugins
11. Select the Comments Plugin
12. Select the number of comments you would like to show up on the page at any time.
Do NOT enter informatino into the unique identifier field (unless you know what you’re doing.) Leaving this blank will make the id the page url by default. 99% of you want it this way unless you are
including blog comments from a single post across multiple pages.
13. Click the get code button.
14. Place the snippet of code exactly on the page you want it on. This will generally be in single.php directly above or below the default comment code.
If you want to remove wordpress comments entirely, you can do so be editing comments.php to be a single line break in place of the existing code (hint: make a copy of comments.php first in case you change
your mind.
Keep in mind that this same process can be done to integrate facebook comments into any website page you wish. Allow comments on product pages, site homepages and more.
Sounds good but you’d rather have us do it for you? We’d be happy to. Click the link below and we’ll take care of this for you.
Facebook continues to drive us all mad by no longer allowing the functionality they originally gave us. They are getting rid of this method of integrated facebook functionality.
For the time being you can use a migration snippet to keep it alive if you experience errors. To do so, add: migrated=1 to the fb comment code. example:
<fb:comments numposts=”15″ migrated=1></fb:comments>
While it has become second nature to webmasters and designers to include sitemaps in their site files, many amateur site builders or site owners who lack a useful webmaster don’t necessarily know how important a sitemap is.
XML Sitemaps are a protocol allowing site owners to inform the search engines about the pages on their website. In addition to listing the pages that you would like the search engines to know about you can also specify some additional information such as the time a page was last updated, its importance relative to the rest of the site and how often the page is expected to change.
Accessible via the Google Webmaster Tools, you can tell Google that something has changed simply by prompting Google to re-download your sitemap. Even if you don’t perform the prompt, Google (and other search engines we pretend to care about) will download the sitemap every time they re-index your site.
Why do we care about Google knowing we have updated a page?
Well, one of the most important ranking factors in the Google algorythm is how fresh your content is. A site that has frequent updates to content is considered a trustworthy site that someone is taking care of. In a world where content is king, it is crucial to let the search engines see update is changing as soon as possible.
While using a sitemap does not guarantee that the search engines will index all pages of a site, they provide better information for the search engines to make use of when they do come visit.
And now for the best part of all… Making a sitemap is easy thanks to automated sitemap generators like the one here:
Google today announced the release of their new search index, called Caffeine.
This is not an update to their existing system but rather a completely new system.
The biggest change with Caffeine is that Google no longer separates the indexing of the web from the updating of search engine results. The previous Google index would crawl the entire web (or close to it) and store the results in a massive series of databases. Periodically, this stored index would then be used to update the search engine results. This resulted in a noticeable delay in getting new sites indexed and changes noted.
The new system will crawl the web in chunks and offer near immediate updating of the search engine results. News sites, twitter feeds, blogs etc will all be crawled with more frequency and the results made live very, very quickly. Web sites with rapidly changing content will also be noted and crawled with more frequency.
So the big question is “what does Google Caffeine mean to site owners?”
Essentially this is yet another instance of Google catching up to what they have been telling us for a long time. For the past few years Google has been hammering webmasters with the claim that they value fresh, relevant content over static, irrelevant, or downright neglected sites. While their actual index algorithm sometimes said otherwise, it appears that Caffeine is the proof of their intentions.
In short, this new release by Google means that the focus on well-maintained, constantly updated sites is finally here. While there has been no announcement regarding the level of preference Google will show fresh content in the search engine results, common-sense would dictate that the algorithm behind the system will be more heavily weighted towards the ‘new’. If anyone has noticed the new tools and ‘side wiki’ on Google’s search pages, you’ll see that they are making a real push to be more useful at finding social media updates, twitter updates, etc.
So finally, let’s look at what you can do to harness the power of this new index.
Recently we helped a client solve a need by developing a featured staff section to his website. This application allowed an administrator to upload text and an image for multiple staff members and then a randomizing script displays a different staff member every time someone visits the site.
Performing this task got me thinking about other randomizing content for a website.
Often we have a lot of great content that is, unfortunately, repetitive. One such example would be testimonials on a web site. Testimonials are an excellent feature of a web site that sells a product or service. Real testimonials from real customers convey a sense of professionalism to your endeavor and go a long way towards building trust with potential new clients.
So suppose you wish to display some great testimonials in a section of your site but do not want to overdo it by displaying too many at once…. Here’s how:
< ?php
$var = rand(1,3);
switch($var) {
case 1: include('testimonials/testimonial1.txt'); break;
case 2: include('testimonials/testimonial2.txt'); break;
case 3: include('testimonials/testimonial3.txt'); break;
}
?> *note, remove the space between the initial < ? to make it execute as it should. It is shown this way to make it appear on the page rather than execute*This snippet of code uses php to randomly display the contents of three text files that we have inside our testimonials folder. Each time the page with this code is reloaded, it randomly displays a different file.
Keep in mind that you can use any html code you want, even though it is a text file. Because it gets parsed by the php it will appear on the page as the code itself, not the file.
At first glance the ‘fixed’ and ‘absolute’ positioning values in CSS appear to be identicle. However, there is an important distinction that must be made.
Absolute positions take an element (such as a box) away from the normal flow of the webpage layout. They are assigned a specific and exact location via x/y co-ordinates. Values assigned in absolute positioning move the element away from the exact top and left portion of the page.
Fixed positions also move an element away from the normal flow and place it according to x/y co-ordinates away from the top left point (0,0). But in this case it positions the element away from the top left point of the viewed area (viewport) of the page, not the top left point of the page in whole.
Let’s assume we took two elements and assigned both positioning values as follows:
top: 5px;
left: 44 px;
If the elements were the same size, they would be exactly overlapped near the top of the page, inset from left by 44 pixels. If we scrolled down a long page however, the absolute positioned element would stay in place while the fixed element would continue to display in the top of our viewing area.
You can currently see fixed positioning in use in some annoying advertising on websites. Of greater benefit however, is the potential for fixed navigation on sites.
There is a drawback to fixed positioning. IE 6 and earlier do not support it.
The paperless office is a mythical creature. In fact, I’m fairly certain I saw it in the background of the final scene in the Lord of the Rings movie. It appeared to be eating a treant.
The fact is that offices and individuals still use a massive amount of paper in their daily business. The internet, while cutting down on vast paper resources used for directories, advertising and records, has also created an increase in on-demand printing. People still print information found on the web for records, for later perusal, or to stick on the fridge at work (generally to harass fellow employees while maintaining plausible deniability). However, nothing is worse that broken paragraphs or misplaced headings (the next section heading being the last line on a page).
Our issue then becomes one of ensuring that information on our web pages is printed in a manner that allows for proper layout and readability. We can accomplish this using either (or both) of the following methods:
Page Breaks
Apply page breaks to your html tags (They MUST be in the html tags of the page itself) using styles.
style=”page-break-before: always;”
style=”page-break-after: always;”
As you can guess, the first style forces a page break after the current tag closes. The second forces a page break before the current tag opened. Here’s two examples:
<h2 style=”page-break-before: always;”>My Section Heading</h2> This creates a page break prior to the heading “My Section Heading” on the document.
<p style=”page-break-after: always;”>blah blah blah </p> This creates a page break after the current paragraph ends (closes)
Murdering Orphans
For this example you will need some cotton candy and a baseball bat wrapped in barbed wire. haha?
No, seriously, we just need our stylesheet.
‘Orphans’ are the first line of a paragraph that appears at the bottom of a page. It is the opposite of a ‘widow’ which is the last line of a paragraph at the top of a page.
To solve these problems, edit the style of your p tags by adding something like the following on your style sheet:
p {
widows:5;
orphans:10;
}
This will force 5 or more lines of text at the top of a page and at least 10 lines of text at the bottom of a page. If the printer cannot provide these then the entire paragraph is shifted.
I once had a t-shirt that was quite possibly my favorite thing in the world. Now, in retrospect, I realize that this was a period in my life during which my mother had hired an 18 year old Swedish girl as a nanny while she was at work, but I was 4. I can be forgiven for slipping the presence of an attractive woman who entertained and fed me far, far down the list of what was important to me. But I digress…
Being that I was prone to what everyone considered excessive sulking (I should point out that this is merely my neutral expression and has been all my life), I was given a t-shirt that said “the Incredible Sulk.”
At this point in my life I was a huuuuuge Incredible Hulk fan. 4 year olds are smart enough to know when adults are taking the piss. However, this is the closest thing I had ever gotten to an ‘Incredible Hulk’ t-shirt so I was happy enough.
Long story short, 4 year olds grow. 1970′s cotten t-shirts do not. I wore that shirt until it was full of patched holes and so tight that my 5 year old belly hung below the seam. Sadly, I had outgrown it. It was time for it to go.
HTML is now that t-shirt. Unlike my t-shirt (and eventually my nanny) I won’t be overly sad to see it leave.
HTML served a solid purpose in the early days of the Internet. It provided structure to files (which were little more than digitized documents) that people wanted to share from computer to computer. It was never originally designed for style and graphical layout.
As the web grew into what it is today, web designers improved what was possible with HTML by adding features that allowed for web sites to be divided up into smaller, manageable pieces. More and more control over multiple files became possible and the original structural controls became more complex.
The web had a problem though. The Internet has fast become a vibrant, graphically pleasing portal for entertainment, information and socialization. HTML could never escape the fact that it was a framework for organizing documents. Sure, HTML was given life support by a huge number of talented designers who broke up image files to give the illusion of free-form graphical interfaces but it was an illusion.
Along came CSS (Cascading Style Sheets). Orginally, CSS allowed only basic controls over things such as fonts and margins. But the idea was solid. A style sheet would indicate the formatting for a section of a web page. Web pages would reference the same ‘style’ by name, rather than typing in the html for each desired piece of formatting.
The natural extension to CSS was to allow it to control not just text but open elements on a page. This meant elements of the page could be configured for visual style as well as positioning. Even more exciting was the ability to position elements over-top of each other, overlapping when necessary to create striking graphical effects easily and to further seperate design from content.
The seperation of page design from page content is easily the biggest step forward in the recent history of web design.
CSS has now been around for over a decade, with the most recent major revision being released just before the millenium. It is widely (although still not perfectly) supported by all major internet browsers and has energized web design to an enormous degree. No longer are web pages boring clones dependant on the same tags for simple formatting effects. Now web designers have 100% control over the look and feel of any element including the standard html tags for things like tables, font effects such as bold, etc.
The next generation of CSS (CSS3) will increase control over object behavior, additional font control and include upgrades to static layout that is meant to replace the old table design element being misused. HTML 5 looks like it may make a stand on a few issues that may be useful, but it is now resigned to be an accessory.
It is well passed the time then that every web designer should be thinking of web sites as being CSS driven, and HTML as being a tool for elements and structure within the more flexible and capable style sheets.
Unfortunately, there is still far too many sites being driven by HTML with very little use of CSS. Why is that? A quick survey of my friends and the online community shows that some are simply unaware of the power of css. This is a result of the huge volume of HTML resources on the web that make little or no mention of style sheets. Another reason is often time constraints. Tools like Dreamweaver and Photoshop make it quick and easy to create sites using chopped graphical elements over simple table designs.
And yet there is a far more unfortunate reason. Our browsers continue to fail to achieve 100% accurate rendering of CSS. For the average web designer, projects must be completed quickly to earn money in a competitive marketplace. Having to compare rendering of CSS elements in Internet Explore, Firefox, and Opera can be a time-consuming process. Worse yet is the time spent trying to cheat the CSS elements so that multiple broswers will show that element the same way. It can be tempting to just chuck the CSS on a tightly budgeted site and go back to HTML tables to ensure simplicity and speed of project completion.
The Browser manufacturers must do a better job of rendering CSS accurately and consistently. Web designers are currently holding an amazing tool in their hands that they cannot always use due to the failure of browsers to be compliant with standards set by the web community. This is an unacceptable failure on their part.
It appears that the browser developers are being more pro-active for the CSS3 release in the near future. They are pre-building compliance for some standards that have yet to be released officially. If this commitment to the CSS standard continues, it would seem that we can finally let HTML (at least as a guide to design) die a more dignified death.
There will always be a place for HTML in displaying data or one-time, non-essential variances, but when it comes to layout and standardization of sites… it can go the way of the Incredible Sulk.