Creating a Facebook Page Tab
Creating a Custom Tab for your business is fairly easy, the difficult part is setting it up in Facebook, getting through their documentation and screen settings, and ensuring you have the minimum requirements. The Custom Tab appears on the Facebook page as a small thumbnail graphic and can be used for a variety of things like display custom content, scripts that import RSS feeds, Forms, or just about anything.
I created an Enewsletter Signup Form as a Tab on this Facebook Page.
Custom Header Image in WordPress 3.4
One of the new features in WordPress 3.4 is that you can add images to the header of your site through the Admin area. This is a feature that should have been added many versions ago and has always required a plugin or use of Custom Fields. (Read more…)
Google Fonts Gives Web Designers Variety
For years, designers have complained of only being allowed to use Times New Roman, Arial, Verdana, or Courier as marketers and web developers forced the usage of web-friendly fonts for usability and search engine optimization. The idea of these four fonts being known as the web-friendly fonts is quickly becoming extinct.
Dealing with UTF-8 Character Encoding In PHP and MySQL
The other week, a colleague of mine sent an interesting article about UTF8 encoding through the web stack. The post talks about how you have to force each part of your web application and software into UTF8 as they fight to default to their own default encodings. Most of the time, we think that setting the charset of our tables to UTF8 in the database and then declaring the HTML document as a ecoded in UTF8 is enough, however you should also specify that data transferred between your application and the database is also encoded as UTF8.
Here’s a summary of the points to be aware of:
1. Code Editor Preferences – Make sure the code editor that you are using is opening and saving your code files in UTF8. A lot of editors default to native Windows or Mac encoding, which can cause characters to appear differently.
2. Create MySQL Tables set to charset=utf8 and to collate=utf8_unicode_ci – MySQL by default collates to Latin1 so you will have to define both the charset and collate when you create your tables.
3. Tell MySQL that .sql File is UTF8 – If you are using the SQL pane in something like PHPMyAdmin, you may not have to worry about this step, however if you are using MySQL’s command line or a different 3rd party MySQL client, you have to tell MySQL that the .sql file is encoded in UTF8. If you don’t tell MySQL the .sql file is UTF8, it will default back to Latin1 and corrupt your data. For a command line example, refer to rentzsch’s post.
4. Exporting Tables – If you’re transferring tables between two databases, make sure to set the default-character-set=utf8 when using mysqldump.
5. Specify the Database Connection in your Application – A lot of developers forget to include a line of code to tell their web application to connect to the database using the UTF8 encoding. In PHP, you can use the mysql_set_charset functions like:
$link = mysql_connect('localhost','username','password',TRUE);
mysql_set_charset('utf8',$link);
6. Specify Encoding in HTTP Headers – Include some PHP code at the top of your application to specify the HTTP Headers:
header('Content-Type: text/html; charset=utf-8');
7. Specify Encoding in HTML – Include a Meta tag in the <head></head> of your HTML documents that defines the encoding as UTF8:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8. Specify Encoding in HTML Forms – If your application is using forms that Insert or Update data in the database, you should also specify accept-charset=”UTF-8” in the form tag:
<form name="webform" method="post" action="formscript.php" accept-charset="UTF-8">
Dealing with character encodings can be a very tricky, especially if your web application uses different languages with different character sets (ie. Japanese), however if you ensure your encoding is set in each step, it can save you a lot of headaches down the road.
Thanks to rentzsch for their informative post on How To Use UTF-8 Throughout Your Web Stack.
WordPress Admin Bar is Blank
When I upgraded to WordPress 3.1, I realized that there was a blank box along the top of my blog. I didn’t realize what this was until installing a new version of WordPress, I saw the Admin Bar and realized that the blank box was a blank Admin Bar. After searching for a solution, I found that I need to include the following function call above the </body> tag:
wp_footer();Once this was in place, the admin bar appeared as normal.
The WordPress Admin Bar
Optimizing Your Website for Speed: SEO for CSS and Javascript Files
Back in April 2010, Google posted an article to their blog that discussed how speed matters in web search rankings. Programmers have generally been obsessed with load times and efficient code, however the online marketing world has pushed websites to use heavy graphic designs, animations, and programmers have had to create long CSS and Javascript files in order to meet this marketing design demands.
Besides ensuring that all your graphics are optimized and mark-up (HTML) is well structured and minimal, you can speed up the load time of your website by compressing CSS and Javascript files. Since these files are purely text, their compression ratios allow them to be reduced by over 90% in file size, thus speeding up the time it takes to load your website.
I found that FiftyFourEleven had the best tutorial called The Definitive Post on Gzipping Your CSS. Essentially, you use a combination of PHP and an htaccess file to compress your CSS or Javascript files before being downloaded to a site visitor’s browser.
Of course, SEO items such as having relevant keywords in your content, user-friendly URLs, well optimized Page Titles, etc. are much more important at this time, however this might be a good tip for sites looking to get a slight edge and a jump into improving their website’s speed.
Simple Viewer, FlickrViewer, and Flickr
Recently, I was asked to work on a project where the client wanted to have their photos on Flickr load on their website. I was given the following requirements for finding a solution:
- The client wanted to show multiple photos divided into a few different galleries, all of which would pull from Flickr.
- The client would occasionally add new photos and would decide whether they should go at the start of a gallery or at the end, so sorting the photos was an issue.
- The server hosting the site has PHP.
I started researching the many different options and found that one of the best and most suited for my needs was SimpleViewer by Airtight Interactive. Just as the name implies, SimpleViewer was easy to implement by just adding a bit of Javascript to where you want the gallery to appear and also including a link in that JS to reference FlickrViewer, a separate PHP file that pulls the photos from Flickr.
Some reasons why I found SimpleViewer to be a good solution for including Flickr photos on a website are:
- You can specify in the FlickrViewer options which Set in Flickr you would like to display the photos from. The viewer then loads all the photos that have been organized into your Flickr set. You can then create another page with similar code and change the Set so that your second page loads a different gallery. I found the integration with the Flickr Sets made it easy to add a new gallery page.
- The photos from each Set were displayed in the same order as they appeared in the Set. This made it easy for a user adding new photos to their Flickr account to re-order the photos, thus changing the order they appear on their website.
- You could change some basic parameters in the free version (the Pro version ofSimpleViewer provides the source files) which would allow you to set how many thumbnails appeared within the window. Arrows appeared to scroll to the next group if the number of photos exceeded how many thumbnails were set as a max. I found this very intuitive and it suited the needs of having a cool function design (although it’s in Flash).
- The Title of the Flickr image is used as the description for the photo.
- SimpleViewer also has some options for setting the cache time so that it would not always have to connect to Flickr, thus increasing how quickly the photos would load.
- You do not have to use Flickr to host your images with SimpleViewer. You can also host the photos on your site and then into the XML file that SimpleViewer uses. This creates a whole range of options, including connecting SimpleViewer to a custom CMS.
Some of the limitations I found with SimpleViewer are:
- There seems to only be an option for displaying the Flickr Title and not the photo Description.
- SimpleViewer uses Flash.
Overall, I found SimpleViewer a great option to link to Flickr as it met all the require for the project.
