Tag: webdesign

Integrating Twitter Summary Cards Into Your Blog Using Jetpack And All In One SEO

Recently I was wondering why some tweets had extra graphic images in them. It looked like someone had figured out how to create a tweet from a blog post and include first image from the post in the tweet. That looked pretty cool. Here is an example.

2014-03-04 15_26_46-alazycowboy

There are two tricks here. The first trick is configure Jetpack to publicize your post via Twitter. With Jetpack you can publicize your posts to several social media sites such as Facebook, Google+, and LinkedIn. Click here for more information on using Publicize. This will get you the standard tweet format. That is okay but I wanted the tweet with more information and graphics in it. To get that format you have to use Twitter Cards and get it approved by Twitter. Here is the Twitter information on configuring Jetpack. There are several Twitter Card formats to choose from and I chose the Summary Card. The next trick is find the plugin that generates the correct meta data for Twitter, validate the card, and apply for approval. I tried several different plugins with varying degrees of success of getting the first image in the post into the tweet. Then I discovered that the best plugin to generate twitter meta data was one I already had installed, All In One SEO Pack. All I had to do was to activate the Social Meta feature and configure it. The changes I made were:

  1. I set Select OG:Image Source to “First Image in Content” to see the first image from the post.
  2. I deleted the default content in Default OG:Image to get rid of the default image.

When I was happy with the layout of the Summary Card preview, I applied for approval. I read somewhere that it takes up to 72 hours to get approved but my approvals arrived within a few minutes. Enjoy!

Simple Notepad++ Trick to Preview Markdown

One of my favorite Notepad++ plugins is NPP_EXEC and the compile_or_run script. Using this framework I created specialized scripts for python, Perl, c, c++, CMD, VBS, and PowerShell. It has become a handy way to run ad hoc scripts since I typically have a Notepad++ instance open. My latest creation was to create a variation of the Perl script to display a Markdown preview based on the “MD” file extension. In this case it runs a Perl Markdown script that sends the formatted HTML output to a new tab. Since I use Markdown so infrequently this is a quick and handy way to check my Markdown format.

Goodbye Twenga

Recently we had a performance problem that I traced back to shopping site called www.twenga.com. They were generating a lot of requests so I updated the the robots.txt file to slow everyone down and updated the robots.pm file used by awstats to see how much traffic Twenga and a couple others were generating. After a couple of days I decided I had enough and banned Twenga via the robots.txt file. They had consumed over 1.6 GB in the first week of April which was several times more traffic than robots like Google and Bing. Since we do not get any sales from Twenga it was an easy decision.

Jeditable and Classic ASP

This week I implemented a grid style application using Classic ASP and Jeditable. The hardest part of implementing this application was trying to figure out what a save.asp version of save.php would look like. Here the template I created.

 
<% 
dim sID, sValue,errorcode dim field1,field2,field3,field4 
'The sID is a spreadsheet style ID 
'As an example B3 would be the second editable field 
'for DB ID field = 3
sID = request("id") 
sValue = request("value") 
sType = mid(sID,1,1) 
sDataID = mid(sID,2)  
'We have four editable fields 
'The changed field will not be null 
field1 = null 
field2 = null 
field3 = null 
field4 = null 
errorcode = 0  
select case sType 
case "A" 	
field1 = sValue 
case "B" 	
field2 = sValue 
case "C" 	
field3 = sValue 
case "D" 	
field4 = sValue 
case else 	
errorcode = 1 
end select 
if errorcode = 0 then 
'Validate and update the data base 
end if 
if errorcode = 0 then 
'Send back the value field 
Response.Write sValue 
else  
Response.Write "<b>!Error " & errorcode & "</b>" 
end if 
%>

WordPress › WordPress Automatic upgrade « WordPress Plugins

I have been using this plugin for almost a year. When it works it is great! When I upgraded to WordPress 2.5 I started having a problem with the final two steps, reactivating the plugins and going to the final page. Before I could activate the plugins I had to upgrade the data base. Then I had to log back in to the blog. At this point the automatic plugin was lost and gave me a screen with "Are you sure you want to do this?" All the plugin could do at this point was to clean up the installation. I had to manually activate my plugins.

Today I figured out that if I remove the wp_nonce stuff at the end of the line I could get the automatic upgrade plugin to continue. Wp_nonce is a security feature. I think it is primarily used with forms but it can be used with links. About the only source on this function is the Writing Secure WordPress Plugins post by David Kierznowski. I think when I have to log back into WordPress, wp_nonce thinks I am breaking in and slams the door shut. From a plugin design standpoint I am not sure there is a need for this type of security at this point since all I want to do is activate my plugins and get my log report. I guess I will comment out lines 392-394 so the plugin will work.

WordPress › WordPress Automatic upgrade « WordPress Plugins

Cutline 1.3 Released | Cutline Theme for WordPress

I upgraded to WordPress 2.5.1 today and my old theme broke. I have been looking at Cutline for some time but I have not been motivated enough to commit the time.  Today I had the motivation. I am really pleased that I had it ready to go in about thirty minutes.

Cutline 1.3 Released | Cutline Theme for WordPress

ISS X-Force Database: icmp-timestamp(322): ICMP timestamp requests

A PCI audit point I saw recently recommended that servers not respond to ICMP timestamp requests. For externally based web servers this probably means asking your host provider to implement a rule on their router to block ICMP packets type 13 or 14 with a code of 0. I haven’t tried this but this should allow normal maintenance packets(e.g. ping) and prevent echo tests using timestamp requests.

A PCI audit point I saw recently recommended that servers not respond to ICMP timestamp requests. For externally based web servers this probably means asking your host provider to implement a rule on their router to block ICMP packets type 13 or 14 with a code of 0. I haven’t tried this but this should allow normal maintenance packets(e.g. ping) and prevent echo tests using timestamp requests.

Description:

The target computer responded to an ICMP timestamp request. By accurately determining the target’s clock state, an attacker can more effectively attack certain time-based pseudorandom number generators (PRNGs) and the authentication systems that rely on them.

Platforms Affected:

  • Apple, Mac OS
  • Cisco, IOS
  • Data General, DG/UX
  • HP, HP-UX
  • HP, Tru64 UNIX
  • IBM, AIX
  • IBM, OS/2
  • Linux, Linux
  • Microsoft, Windows 98 Second Edition
  • Microsoft, Windows 2000
  • Microsoft, Windows 2003
  • Microsoft, Windows 95
  • Microsoft, Windows 98
  • Microsoft, Windows Me
  • Microsoft, Windows NT
  • Microsoft, Windows XP
  • Novell, Novell NetWare
  • SCO, SCO Unix
  • SGI, IRIX
  • Sun, Solaris
  • Wind River, BSD

Remedy:

Configure your firewall or filtering router to block outgoing ICMP packets. Block ICMP packets of type 13 or 14 and/or code 0.

ISS X-Force Database: icmp-timestamp(322): ICMP timestamp requests

.htaccess changes can break LiveWriter

Recently I changed some of my sites to not use the "www" on the front of the URL. It was a little tricky but I got it working right. The first part is to change WordPress to use shorter URL. The second part of the change was to modify the .htaccess file. I found that  the post, Comprehensive URL Canonicalization via htaccess for WordPress-Powered Sites, helped me the most. I checked it in a browser and everything looked fine. Much later I tried to write a post in LiveWriter and it did not work. It gave me the following error message.

blogger.getUsersBlogs method received from the weblog server was invalid

After a little debugging I figured out I could get rid of the problem if I refreshed my account settings for the web sites with the new .htaccess file. I guess LiveWriter is picky about the web site URL.

WordPress 2.5

I installed WordPress 2.5 last Saturday on all of the blogs I support. It had passed some preliminary testing on my development blog so I installed it. It is supposed to have increased security, better administrative panels, and the ability to upgrade plugins automatically. They say there are very few changes that will affect the plugins. It sounded like a safe upgrade so I upgraded. After a little testing I found that ImageManager 2.4.1 did not work at all. I am not sure when it stopped working since I do not use it often and I have alternatives.

While I was at it I did a little spring cleaning. I changed the blog to not use the www subdomain, changed the .htaccess file, changed the blog to use a more descriptive permalink, removed the register feature from the meta widget, and got rid of several old inactive plugins.

Opera@USB : EN & PortableApps

Okay, Markus said I shouldn’t do this but I installed Opera@USB on my USB drive and renamed a few files. I wanted Opera to appear as a menu item in the PortableApps Menu.  Here is how I did this.

  1. First I created a directory under the PortableApps directory called, OperaPortable. You can name it anything you like.
  2. Next I installed the USB version of Opera into this directory.
  3. Finally I changed the extensions for operausb.exe and gsr.exe to com and changed the extension for opera.com to exe. You should see the pretty opera icon now.

Next time I started the PortableApps menu I had a pretty little Opera icon next to a title that said "Opera Internet Browser". It could not been sweeter. I went to my web sites and they looked fine. The only way I have been able to crash Opera so far is to go to the acid3 test. 😉

DISCLAIMER: I do not use Opera on a regular basis. Your mileage may vary!!!

Opera@USB : EN : download your free version of mobile Opera:

Exceptional Performance

I ran across this page in one of the blogs I read but I do not remember which. I installed YSlow to check out my web sites. It was an easy check. The rules I consistently failed were rules 3 and 4. I came back here for the explanations. Implementing fixes for these rules can be complicated. I will look into them when I have both the curiosity bug and the spare time.

Rules for High Performance Web Sites

The Exceptional Performance team has identified 13 rules for making web pages fast. Each rule is discussed in the Developer Network Blog articles listed below.

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable

Download YSlow for Firebug YSlow logo

Exceptional Performance

WPDesigner » WordPress Theme Checklist

Here is a handy checklist for people creating or modifying WordPress themes.

Note: The following checklist was based on WordPress 2.0. Since WordPress 2.1, WordPress has replaced and introduced new template tags.

Files, functions, and to-dos you need to check-off before using / publishing your own unique WordPress theme:

Files and Templates
  • 404.php
  • archive.php
  • category.php
  • comments.php
  • footer.php
  • functions.php (for widget-ready sidebar)
  • header.php
  • index.php
  • page.php
  • search.php
  • searchform.php
  • sidebar.php
  • single.php
  • screenshot.png / .jpg / .gif
  • style.css
  • readme.txt (optional)
Header.php
  • Blog’s Title
  • Blog’s Description
Footer.php
  • wp_footer()
  • Footer text and links (usually, copyright message)
Sidebar.php
  • Search form – Does the regular search form match the widget search form?
  • Pages / wp_list_pages() – Have you styled the second level links? Third level links?
  • Categories / wp_list_cats() – Sort by name or ID? In what order? Is hierarchical turned off or on?
  • Archives
  • Calendar – Does the regular calendar match the widget calendar?
  • Links / get_links_list()
  • Meta: wp_register(), wp_loginout(), wp_meta()
Index.php, Archive.php, Category.php, Search.php, Page.php, Single.php
  • the_ID()
  • Post title: the_permalink, the_title()
  • the_content
  • Postmetadata: edit_post_link(), comments_popup_link(), the_author(), the_category(), the_time(),
  • trackback_rdf() [hidden]
  • posts_nav_link() – Next/Previous page links
  • Else – What to display when there is no content.
Archive.php, Search.php
  • the_excerpt() replaces the_content()
Page.php
  • link_pages()
  • Remove Postmetadata
  • Keep edit_post_link()
  • Remove posts_nav_link()
  • comments_template()
Single.php
  • link_pages()
  • Remove comments_popup_link()
  • comments_template()
Comments.php
  • Comments list
  • Comment forms and textarea
  • ‘No comments’ message
  • ‘Comments awaiting moderation’ message
  • ‘Must login’ message
  • ‘Password protected’ message
  • Comments off message
Pages to Validate
  • Home page
  • Archive pages
  • Category pages (if you customize category pages)
  • Search result pages
  • Pages (i.e: About)
  • Single post view page
  • Single post with no comments
  • Single post with comments
  • Single post with must login message
  • Single post with no login required message
  • Password protected single post with comments

Note: This is not an end-all checklist. It covers just the basics. More items will be added.

WPDesigner » WordPress Theme Checklist

Options WordPress Theme: What WordPress themes should be like

A magazine theme with some interesting ideas. I do not know if I am going to use it but I may use an idea or two. Nice work Alessandro!

Options WordPress Theme: What WordPress themes should be like
alessssandro
Sun, 09 Mar 2008 09:30:00 GMT

Hacking Flickr Manager 1.5.1

I am looking at moving all of the photos on an existing site over to Flickr. The plan is to convert the site over to WordPress and use the images from Flickr so I wanted an easy way to insert photos. I was looking for something that would be as simple to use as ImageManager or WordPress’s existing interface. So I went over to WordPress.org/extend/plugins to see what everyone was using.

The most popular Flickr plugin was PhotoXhibit by Benjamin Sterling. It has a lot of appealing qualities. You could bring photos from Picasa, Flickr, and Smugmug. It has a lot of sophistication and it used jQuery for the heavy lifting. I just could not get it to work right. It was unbearably slow showing the pictures.

Then I tried Flickr Manager. This plugin worked despite the fact the ReadMe file says it needs PHP version 5 and my PHP version says it is 4.4.7. It looked really good. It used a very straightforward and intuitive way to insert photos. My only complaint was that it had this Lightbox thing going on. That meant that my web page was going to load the prototype JavaScript library and its friends(~100K). Recently I found a jQuery version of Lightbox that is a much lighter load so I really did not want to go back to loading prototype and his friends.

The next plugin I tried was WP-Flickr. This plugin worked but had less features than Flickr Manager. I thought about hacking this plugin to add support for jQuery Lightbox to show the larger picture when you clicked on it. Before I had gotten too far in my thinking I was struck with the thought that Flickr Manager has more desirable features. Maybe I should look at changing Flickr Manager to work without the prototype library. It was an easy change. All I had to do was comment out one line. I even found the lines to change to get the Lightbox feature to work with the jQuery version of Lightbox. Well it kind of works. I did not get it to work properly with single photos. It never finishes loading the larger photo from Flickr. The demo at Trent’s site shows the Lightbox feature working with photo sets. Lightbox is a “would be nice” feature for me. The way it works now is to take you to the Flickr page of the larger photo. That’s not that bad so I decided to stick with the slightly hacked version of Flickr Manager. Now I can start uploading pictures to Flickr.

Test your web design in different browsers – Browsershots

 

del.icio.us bookmark this on del.icio.us – first posted by lordpet to browser webdesign tools design test – more about this bookmark…

Test your web design in different browsers – Browsershots
lordpet
Fri, 22 Feb 2008 16:30:00 GMT

This is an interesting site but do not expect quick results from the web site. It creates screen shots using different browsers by using distributed computers that upload the screen shot. It created 29 of the 41 screen shots I requested. It took about thirty minutes for the 29 shots to appear and I did not find any web page design problems. I suspect that my testing with Firefox 2, IE 6 and IE 7 are adequate for catching most problems but this might be handy to show tor clients who are looking for maximum interoperability.

Share This (jQuery): a WordPress plugin » Semicolon

Today I ran across Bennett’s jQuery version of the Share This plugin. By using plugins based on jQuery rather than Prototype library, I reduced the load time for several web sites. I still had one web site that used the Prototype library and I suspected it was because of the Share This plugin. By switching over to the jQuery version of Share This, the Prototype is not loaded and the amount of JavaScript downloaded was reduced by 70K. Thanks Bennett! 🙂

Share This (jQuery): a WordPress plugin » Semicolon

Javascript Code Highlighter: Chili vs SyntaxHighlighter :: PseudoCoder.com

Today I tried to get Chili to work on this blog. I post code occasionally and Chili was appealing to me since it uses jQuery for most of the heavy lifting. I was hopeful that Chili would be quick and incrementally increase the amount of JavaScript downloaded. Chili didn’t work for me. It had syntax errors in the JavaScript. My debugging skills were not finding any quick answers so I decided to give plan SyntaxHighlighter a try.

From the post it looked like SyntaxHighlighter was going to be a bear to install so I decided to check the WordPress plugins web site for possible alternatives. Guess what I found, SyntaxHighlighter-Plus! This recently updated plugin uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev and makes installing a syntax highlighter a snap. The instructions are a little sparse on how to use it but I converted several existing code snippets to use the plugin. They looked good after I figured out how to get around the automatic encoding of HTML entities. The first time the editor encodes those special characters it was nice. The less than character becomes &lt;. The second time it encodes the characters, it created a mess. The less than character becomes &amp;lt;. I guess I should turn off the visual editor again. I also had to hand tune the CSS to get around some alignment issues.

Overall I give the plugin a thumbs up based on ease of installation and the light load it added, ~25K bytes. Editing a post is still a problem but I can work around that problem.

Javascript Code Highlighter: Chili vs SyntaxHighlighter :: PseudoCoder.com

Shadowbox.js Media Viewer

thumbnail

 

Shadowbox.js Media Viewer
I_CRE8
Fri, 25 Jan 2008 21:00:00 GMT

This looks interesting but it is considerably larger than my current jQuery lightbox plugin. Since I do not use flash or the other media the plugin supports, this plugin has limited benefits for my personal use and most of the web sites I maintain. Maybe sometime in the near future I will need it.

Silly HTML mistake – different response from FireFox and IE

Recently I found an interesting problem. A person complained to me that a link on a web page did not work. When I went to the page I was able to duplicate the problem with my default browser, Internet Explorer. Since I was pretty sure the developer who composed the page would have tested their links, I was puzzled. So I tried FireFox. The link worked! When I looked at the html code I saw the error immediately. He was using an <input> tag inside the link tags, <a>, to display a graphic. The <input> tag would have been appropriate if he wanted to display a graphic in a form but the <img> tag would have  been the correct way to create a click-able graphic link. It looks like the developer had used some code from a form but he was sloppy in converting the code and had not tested the page with IE.

What was interesting was the way Internet Explorer and FireFox responded to the coding error.  FireFox ignored the error, displayed the graphic, and let the link work. It was a mistake but FireFox did not care. Internet Explorer on the other hand displayed the graphic but did not let the link work. Now that is typically a surefire way to get a developer’s attention. Too bad the developer forgot to test his page with IE! I ran the page through the W3C HTML validation service and it did not flag this as an error. Hmm!

Windows Live Writer: Out of Beta

Thank you to everyone who tried out the beta releases of Writer over the last year and gave us feedback. Over 1.5 million of you downloaded our last beta release, and your input helped make Writer the product it is today. 

Our goal from the start has been to help make blogging more powerful, intuitive, and fun for everyone. Today, we’re proud to announce that Windows Live Writer 2008 is now available!

Download Writer 2008
Windows Live Writer 2008 (version 12.0.1366.1026)

Yea! I have been using this almost exclusively for my posts.

Windows Live Writer: Out of Beta