photo by James Cridland

I came across a rather interesting Fake Twitter Followers Infographic (graphic was hosted on Fotopedia which shut down on 2014-08-10) that displays data around the number of fake followers that are comprised within celebrities, businesses, politicians and others’ Twitter follower roll.  I guess those with a lot of followers maybe get a lot of spam followers or they are using questionable tactics to build their base of followers.

I decided to check out my WEBphysiology Twitter account for how “real” my followers are by using the Fakers tool from People Status.  I was extremely pleased to see that I scored very high, with 97% of my followers being legitimate, active Twitter accounts, 0% being fake and 3% being inactive Twitter accounts.  Thank you to my followers for being real!

My personal Twitter account, though with many fewer followers and rarely used, didn’t score too bad.  I have 0% fake followers, 18% are inactive and 82% are legit.  I’m happy with those figures as many more of my followers are real than those following Ashton Kutcher.  Ashton came in with 29% fake, 45% inactive and only 26% good.

So, why are my number of followers so legit?  Probably because I don’t instantly follow back those who follow me.  This cuts down on the spam followers.  Also, I don’t think any of my accounts are listed as a suggested follow when someone creates a Twitter account.  Ashton, on the other hand, probably is listed.

Anyway, interesting Infographic and tool and worth a peek.  As I suggest with any SEO tool, and life in general, honesty is the best policy.  Build your ranks with insightful, useful information and you’ll do well.

I received a call this evening from a nice gentleman in Atlanta who was beside himself because he was trying to add a custom Facebook Page Tab to his Facebook Page and not having any luck.  He’d been at it for two days.  He made it through one of my videos only to get to the end and not see the nice link in the sidebar that reads “View App Profile Page”.  This was the link that would then allow you to add the application to any Facebook Page that you administer.  My initial response to adding the Facebook Page Tab was, “Oh, that’s easy.”

Well, it didn’t take too long on a Go-to-Meeting session before I was equally perplexed.  The link wasn’t there.  We went through the various application settings, cleaning some of those up.  When we flipped to the Advanced settings page there was a new button, “Create Facebook Page”.  That wasn’t showing up on one of my application’s Advanced settings page.  What’s up?

Long story long, we did a quick Yahoo Search and found a post providing the URL I’m about to share.  After going through the process laid out we were rewarded with his Facebook Application Page Tab being right where it should be… on his Facebook Page!  After we resolved this situation I went to my inbox where I still had an email I’d received from Facebook a few days earlier and hadn’t yet taken the time to read.  The email titled “Developer Blog: Removing App Profile Page” was an article covering the fact that Facebook will be removing all App Profile Pages on February 1, 2012.  These pages are automatically created when anyone creates a Facebook Application.  Well, technically this should say “were automatically created”, as they aren’t anymore.  This is what the “Create Facebook Page” button will let you do manually now, though, the page is not an Application Profile Page but a Facebook Page associated with the application and it doesn’t give you the ability to add the application to your Facebook Page like the old Application Profile Page did.

At the bottom of the email were instructions for putting a button on your app or website, which would allow someone to add the application to their Facebook Page.  It’s the URL from this code that you can hack if you are in the same predicament as my new friend from Atlanta.  The URL is as follows:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

To make it work you would replace the “YOUR_APP_ID” with the ID of your Facebook Application.  The “YOUR_URL” would be replaced with the canvas page URL for your application.  More detailed technical information for the Add Page Tab Dialog is available on Facebook.

Hope someone finds this information as useful as it was for us.  Unfortunately, I didn’t grab the URL from the post that helped us before ending my session with the gentleman in Atlanta or I would have referenced that here. Guess they will remain an unsung hero.

I thought I’d share how easy it is to set up a Google+ Page and send you on your way.  The assumption in this article is that you have a Google account and that you have gone through the Google Plus Join process.  With this all set, let’s get started.

Create Your Google+ Page

The first step is to log into Google plus if you haven’t already.  That’s pretty easy.  Just head over to https://plus.google.com/, click the <Sign In> button and log in.

You should now be at your personal profile page.  Just click the “Create a Google+ Page” link located in the bottom right corner of the screen.

This will take you to the category selection screen where you will identify the type of page you are creating.  In our case we selected “Company, Institution or Organization”.

Once you click on the appropriate category button the screen will update to allow for you to enter a Page Name along with other information relevant to the page, like the associated web site URL and the sub-category.  After you set these, check that you will adhere to the Page Terms and click the <Create> button.

Your Google+ Page will now be created.  Following this you are presented a screen where you can begin to build your page’s profile.  Enter a short tag line.  Note, the tag line should be just that.  There will be an opportunity to add expanded details about your organization in just a bit.

Now click the <Change Profile Picture> button.  When you set your page’s profile picture you can drag an image to the screen or use the button to browse to an image file.  Then you are taken to a cropping screen where you can adjust the crop of the selected image and save it.  Once you’ve specified your tag line and added your image click on the <Continue> button.

The next screen allows you to share your new page with your contacts.  Skip this for now and just click the <Finish> button.

You are now on your new page, well, you actually are on the Getting Started section associated with your new page.  The next step will be to expand upon your page’s profile.  To do this click on your page’s image.  Now you are on your page.  From here you can click on the <Edit Profile> button located at the top right of the screen.

The page edit screen is displayed and the “About” tab should be selected.  Two items you likely will want to update are the “Introduction” and “Contact Info” sections.  To do this simply click on one of these items.  If the web site you entered at the beginning is incorrect, you can update that here too.  Once you are satisfied, simply click the <Done Editing> button at the top of the screen.  The one great thing to note here is that the Introduction area allows you to insert additional links.  This is great if you want to direct the visitor to a contact form or a specific service or product at a URL other than the main one you’ve associated with your page.

Once you’ve completed this information you are ready to share your new Google+ Page.  To do this just click the <Share your page> button on the left of the screen.  You also can click on the home button at the top of the screen, click on the “Get Started” link below your page’s picture and grab a badge for your web site or the direct URL link to your page.

That’s It!  Here are our pages.  We’d love to have you add us to your circles!

• JVHM, Inc.
• WEBphysiology
• iframeNinjas
• iframeValet

Final tip, we used the direct URL from the Getting Started page for the above links but then tacked “/about” to the end to have you drop onto the “About” tab of our page.

Google+ On!

That’s right, another change for your Facebook Page.  If you are using an iFrame Application to host a Page Tab, beginning October 1, 2011, your Facebook Page Tab will disappear if you are not securely serving the content.  With the recent changes going on at Facebook it was decided to break off a segment of WEBphysiology to specifically address Facebook development.  By doing this we can more specifically target a segment of our business while still maintaining the deep integration with the rest of our online offerings.

So, what are all these changes coming out of Facebook?  Well, the first was the deprecation of Facebook Markup Language (FBML) back in March, 2011.  The replacement was a much better one, iFrames!  Facebook iFrames were introduced in February 2011.  iFrames are fantastic in that they utilize standard web development tools while allowing for the inclusion of the Facebook Graph API and other social media tools.  The use of iFrames in Facebook can most often be seen on Page Tabs.  Want to know how to create a Facebook Page Tab?  Then check out our Creating a Facebook iFrame Application post and How-to video.

The next major change is a mandatory requirement that will present itself on October 1, 2011.  This change is the requirement for OAuth 2.0 and HTTPS to be utilized on Facebook Canvas and Page Tab applications.  This means that the source of your Page Tab must be served via a site with an installed SSL Certificate such that the content is served securely via the HTTPS protocol.  One way to do this is to set up an Amazon Simple Storage Service (S3) account.  While this may work for a lot of Facebook Page Tabs, it does not support content that relies on PHP or other server side scripting.  Amazon S3 simply serves up static pages and files.

It is this last change that has us building our iframe Valet service.  Because the pending HTTPS requirement is almost here, our service will be managed via a manual, personal touch.  In the future we hope to make this a more automated offering where that approach best serves our clients.  iframe Valet will be a service that will, amongst other things, host Facebook Page Tab content in a secure manner, thus meeting the Facebook security requirements being implemented on October 1st.  So, if you have a Facebook Page Tab that is being sourced from a site that does not provide for the secure serving of content (SSL/HTTPS), then we will host that content for a modest yearly fee.  Until the iframe Valet site is fully launched you may contact us at WEBphysiology.

I think the most shocking statistic for me was Point 1, using “Find” after a search to locate your search words in the Search Engine Results Page (SERP). Then I thought about it and realized I probably don’t use “Find” in this situation, but only after I open up a particular link. Point 3, Define Operator, also was one I had known about but forgotten. That can definitely save me some time now-and-again. I also think Point 11 can be a real time saver, especially for students or for those conversions we need to do once-in-a-great-while.

The one point where I’m in alignment with one commenter is Point 8, Don’t Use the + Sign. While I agree one should not use this initially, it is a great tool when the initial search is not capturing a particular word, or words, that you want to be certain are included in the search. It’s basically a secondary filtering method. Using the “-” symbol also is a good tool and one I’d forgotten.

I think you will find some great tips in this article, 12 Ways To Be More Search Savvy. I know I did.

Previously we published a video covering how to Create a Facebook Page.  In order to utilize a Facebook iFrame Application you will need a page, so, if you don’t already have a Facebook Page, you’ll want to create one.

This post and video covers how to create a Facebook iFrame Application that will allow you to incorporate a custom page tab that displays content from a web page that you host.  While creating a basic Facebook Application is pretty straightforward, you will need a general understanding of HTML and CSS in order to create the page that you want displayed on your page tab.  Some general sample code for this is available below.

httpv://www.youtube.com/watch?v=khnoOewcTUg

To create your Facebook Application navigate to https://developers.facebook.com/apps. You may get a prompt to enter your password again. You also may get another prompt requesting permission to allow Developer access to your basic information. If you do you’ll want to approve this access. The Application screen will be displayed listing any applications you already may have created.

Click on the “Create New App” button and provide a name for your application along with agreeing to the Facebook terms.  The application name can be anything descriptive.  The actual name a user will see for your Facebook Page Tab will be defined elsewhere.

Once you fill out the initial screen you should land on the basic Facebook Application page. Here I would suggest starting out by loading in the primary application graphic (75 pixel x 75 pixel) as well as the icon graphic (16 pixel x 16 pixel) that will be displayed to the left of the tab name when the application is added to a Facebook Page. If either graphic is sized larger than the defined size, Facebook will crop and/or re-size it.

As this tutorial covers creating an application to be used as a tab on a Facebook Page, you’ll want to click on the “Page Tab” integration bar to expand it. Next, give the tab a name that makes sense to a visitor on your Facebook Page.  You also have the opportunity to override this tab name on a given Facebook Page.

Using a Facebook iFrame Application requires that you have a webpage or pages already built and hosted. Also, beginning October 1, 2011, you will need a secured URL. If you don’t have an SSL certificate, and the pages you are hosting are static, then you could use something like Amazon S3 to host your pages via a secured URL. The cost of this is extremely reasonable.

Once you specify the Facebook Application Page Tab name and enter the web page URL(s), save the page.  You’ll get a confirmation that your changes were saved. If you did not provide a secure HTTPS URL you also will see the warning that you will need to specify this beginning October 1st. The reason you really need a secured page is because a lot of folks use Facebook via HTTPS so that others can’t hijack their session while they’re on a public network sipping their coffee. If you don’t have your application set up to be hosted via HTTPS then it cannot be displayed to that end user.

At this point you should have your application set up enough to add it to your Facebook Page.  You’ll do this by first clicking the “View App Profile Page” link from the left navigation menu. You’ll be taken to a page that looks a lot like a Facebook Page. You then will click on the “Add to My Page” link, again, from the left navigation menu.

Now go to your Facebook Page. The quickest way is to go to http://www.facebook.com/pages/manage. If you had more than one Facebook Page setup they would be listed, but if you only have one you will land on that page.

You should see a new Page Tab in the left navigation pane of your page. It will have whatever name you assigned as the Tab Name along with the uploaded icon image. If you don’t see the Page Tab then click “Edit Info” at the top of your page. Next, click the Apps link from the left panel. Then click the “Edit Settings” link for your application and, finally, click the “Add” link button.

If you want to adjust the name of the tab on your Facebook Page, click “Edit Info” at the top or your page, click the “Apps” link from the left panel, click “Edit Settings” for your Facebook Application, update the “Custom Tab Name”, save and exit.

Clicking on the page tab name on your Facebook Page will result in the display of the web page you specified when setting up the Facebook Application. If you are seeing any scrollbars on your page then this is due to two limitations that you will want to be aware of and design around.

• The web page you are displaying must be no wider than 520 pixels. If it is wider than this (including margins and padding), you will end up with a horizontal scrollbar.
• If your page is taller than 800 pixels, you will see a vertical scrollbar along the right side of the displayed content.  To get around this limitation you can incorporate some Facebook scripts to auto-size the height.  The sample index.html page included in this Post does include this bit of code, some being in the <head> section and another being just before the </body> element.

The other consideration when designing your web page is that, if you have links to other pages, that those pages are eithered styled to be 520 pixels wide, or that you use the target=”_blank” anchor attribute to open the link in a new tab. If you don’t, you’ll have a pretty ugly looking page displayed with horizontal and/or vertical scrollbars.

The other thing you may want to do if you are trying to have visitors come to a customized Facebook Page, is go into the page editor, click on “Manage Permissions”, change the default landing tab to the custom tab that you’ve added and save the changes. Now, when someone who has not liked your page visits, the custom tab will display by default. Once someone likes your page they will be taken to the Wall but can still click the tab. This feature is especially helpful as you can define a default page tab for non-fans that will ask them to like your page.  You could provide impetus to do so by stating that once they like the page they will have access to restricted, fan-only content.  Once they like the page, the page tab you serve up for fans would provide links to this content.  We’ll try to post more on how to do this in the future.  Maybe after you Like our Facebook Page

I hope you’ve found this tutorial helpful and gets you to a Facebook Page that rocks.

Here is the source of the index.html page used in this exercise, along with the supporting stylesheet:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- compliments of http://WEBphysiology.com -->
<!-- read our article on Creating a Facebook iFrame Application at 
http://webphysiology.com/social-networking/creating-facebook-iframe-application/ -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is My Facebook MyFirstApp Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.Canvas.setAutoResize(100);
	}
</script>
</head>
<body>
<div id="wpbody" class="bordered">
    <div id="container">
        <div id="pageheader">
        	<a href="http://domainwip.com/fb/WipFilson/">Domain WIP</a>
            <h1>My First Facebook Application</h1>
        	<p>by Wip Filson</p>
            <p style="margin-top: 10px;">read the how-to article on <a 
            href="http://webphysiology.com/social-networking/
            creating-facebook-iframe-application/" title="WEBphysiology How-To Article">
            Creating a Facebook iFrame Application</a></p>
        </div>
        <div id="pagecontent">
        	<p>Lorizzle ipsum funky fresh sit shizznit, dope adipiscing shit. Nullizzle
        	mammasay mammasa mamma oo sa velizzle, aliquet volutpat, suscipizzle sizzle, 
        	gravida vizzle, arcu. Pellentesque fo shizzle tortizzle. Sizzle erizzle. Fo 
        	shizzle izzle boom shackalack dapibus sizzle fo shizzle fo shizzle. Maurizzle 
        	gizzle ghetto et turpizzle. Dope yippiyo tortor. Pellentesque ma nizzle 
        	rhoncizzle fo shizzle. In hac tellivizzle dang dictumst. Mofo dapibizzle. 
        	Bow wow wow tellizzle crunk, pretium eu, mattizzle brizzle, pot vitae, 
        	tellivizzle. Ma nizzle crackalackin. Integer sheezy shizznit things you son 
        	of a bizzle.</p>
            <p>Yo go to hizzle mi. Owned erizzle. Dope condimentizzle, ass non you son 
        	of a bizzle crackalackin, sure libero i'm in the shizzle purus, ghetto 
        	ullamcorpizzle break it down uhuh ... yih! non dang. Daahng dawg izzle elit. 
        	Duis nibh lectizzle, consequizzle sed, fo shizzle my nizzle volutpizzle, 
        	sizzle shiznit, tellus. Etiam posuere daahng dawg mi. Yo mamma mauris. Ass 
        	nisl get down get down, euismizzle ac, eleifend bling bling, malesuada 
        	shizzle my nizzle crocodizzle, nisi. Vivamizzle vulputate nizzle nisl.</p>
        </div>
        <div id="pagefooter">
            <a href="http://webphysiology.com/facebook-page-development/" 
        	target="_blank" title="WEBphysiology.com">facebook page designs by 
        	WEBphysiology</a>
        </div>
    </div>
</div>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
</body>
</html>

style.css

@charset "UTF-8";
/* CSS Document */
/* compliments of WEBphysiology.com */

html, body, div, p, ul, li, table, tbody, th, tr, td, #wpbody, #container, #footer {
	font: 12px/12px Verdana, Geneva, sans-serif;
	color: #000;
	margin: 0;
	padding: 0;
	background-color: transparent;
}
h1 {
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.25em;
}
a {
	text-decoration: none;
	outline: none;
}
#wpbody {
	background-color: #00639F;
	margin: 0;
	width: 520px;
	padding: 5px 0 1px 0;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#container {
	background: #FFFDEE;
	margin: 0 5px 4px 5px;
	padding: 10px 10px;
	font-size: .9em;
}
#pageheader {
	text-align: center;
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: bold;
	margin-bottom: 20px;
}
#pagecontent {
	margin: 10px 10px;
}
#pagecontent p {
	font-size: 1.25em;
	line-height: 1.3em;
	padding-bottom: 1em;
}
#pagefooter {
	text-align: center;
	border-top: 2px solid #ccc;
	margin: 10px 0 1px 0;
	padding-top: 10px;
}

Since finding out about this issue I have spent a great deal of time to update my plugin to utilize this code, clean up some option settings that integrated with the code as well as some other back-end plugin code that integrated further. The result of this, along with other changes I was able to sneak in, was released in WEBphysiology Portfolio version 1.3.1. You can download this from WordPress or off of my WEBphysiology Portfolio Plugin page.

Further to this issue and how it may impact you, one article (link removed due to 404) tries to list the affected plugins and themes but it is definitely incomplete as neither my WEBphysiology Portfolio plugin was noted, nor the WooThemes authored themes I have. In an email from WooThemes, it sounds like all of their themes include TimThumb (thumb.php). They have since updated to the latest version and shifted the code to live within their framework to make it easier to keep updated.

You can read more about how to find out if you’ve been hacked in Mark Maunder’s posting, and several others he’s since released. If you need to update your theme or plugin to utilize the latest code, you can find the TimThumb.php 2 source code here: TimThumb Code Archive. The issues list can be found here: http://code.google.com/p/timthumb/issues/list.

First, you will need to download a PHP file that contains the code for presenting the Facebook buttons on your posts. Then you’ll need to update the “functions.php” file associated with your theme to reference this file. I took this approach in order to isolate this code, making it easier for someone to update in the future.

Once you get this done, then you simply place a short piece of code within the single.php file to place the Facebook buttons on your Posts. So, let’s get started.

Preparing Your Posts to display the Facebook Like and/or Send buttons

The following steps will get the Facebook buttons showing up on your site’s Post pages:

1. Download the Facebook Button PHP file, un-zip it and place it into your theme’s folder. This will be the same location where the functions.php file is located. This file does two things. First, it places the Facebook Open Graph meta information into the <head> section of your Post. Second, it generates the HTML used to display the Facebook Like and/or Send buttons. If you prefer to cut-and-paste, then this PHP code can be retrieved from Pastie.org.
2. If there is not an “images” folder within your theme folder, create one.
3. In the images folder place an image file that will be used for Posts that don’t have an included image. When someone clicks [Like] or [Send] a reference to the article is placed in Facebook. This entry includes the page’s URL, the first 200 characters of the post and an image. The image will be the first one in the Post or this default image if the Post has no image.

4. Update the fb_buttons.php file to specify the required Facebook Open Graph values. Simply place the appropriate values within the quotes. For example,

   "ref"=>"",
   "default_image"=>"default.jpg");
   

   might become

   "ref"=>"xyz.com",
   "default_image"=>"no_post_image.jpg");
   

   The values that you need to update include the following:

   • appid (optional): If there is a Facebook Application associated with your website then you can specify it and gain added administration features.
   • admins (optional): Specify the Facebook ID(s) of the person(s) who administers the website pages. This can be a comma-delimited list of IDs. Though <Linter> will throw an error, you may use your Facebook Username (if you’ve set one) in place of your Facebook ID.
   • type (required): This field indicates the type of “Page”. In the case of a blog, the most common value would be “article”. Refer to Facebook Open Graph Types for a complete listing of types.
   • width: (required): The overall width of the button element. The default is set as 450 pixels. You just specify the numerical value.
   • ref (optional): This value will be returned as an argument on the URL from Facebook should someone click the page link there.
   • default_image (required): The name of the image to use should your Post not have an image. This image should be placed in a folder titled “images” that is located within your theme directory. If the folder is not there, create it.

5. Add the following line of code to the functions.php file so that the file you placed above is made available to WordPress.

   include_once("fb_buttons.php");

6. And, finally, add the following code to the single.php file in your theme directory.

   <?php
   if ( function_exists('webphys_fb_buttons') ) {
   webphys_fb_buttons(array("Send" => true, "Like" => true, "Faces" => false));
   }
   ?>

   The single.php file is used to build the Post page. A good place for the above code might be before the line that calls “the_content()” function. You also could place it after this line, which would place the buttons below the contents of your article. If you also wanted to incorporate the Facebook buttons on other pages of your site, you can do so, BUT you will need to update the webphys_fb_meta_tag() function within the provided PHP file as it limits the creation of the Facebook Open Graph meta data to just Posts. Details on other available conditional tags can be found on the WordPress Conditional Tag Codex page. The following are the files you may update the same way you have for the single.php file:

   • index.php: This is the blog feature page. Depending upon how you’ve set up your WordPress installation, this may be the home page of your site or not. If you see the “is_home()” or “is_frontpage()” function, then the code within these conditional clauses would be used only on your site’s home page.
   • page.php: This is the code used to generate static Pages within your website.
   • archive.php: This file’s code is used to layout the archive page, for example, the page generated when someone clicks on a category or a tag.
   • search.php: This file’s code is used to generate the results page should someone search within your site.

   If you’d like to get an even more in depth view of the anatomy of WordPress, check out our WordPress Theme Anatomy blog Post.

   A few parameters are sent by the above code to allow you to control which Facebook buttons are displayed. The parameter values may be set to either true or false. The parameters include the following:

   • Send: Specifying “true” will indicate that you would like the Facebook [Send] button to be displayed.
   • Like: Specifying “true” will indicate that you would like the Facebook [Like] button to be displayed. This button also includes some textual information on the number of “Likes” the page has received. This count includes the number of [Send] requests.
   • Faces: This parameter is used only if you have the [Like] button displayed. Specifying “true” will result in small Facebook profile images being displayed below the [Like] button for those folks who have “Liked” the Post.

Verifying Your Facebook Send and Like Button Configuration

Once you have everything configured, you can verify your updates by doing the following:

1. Navigate to a blog Post and see if the buttons are displayed. If not, something is off.
2. If the buttons are displayed, copy the page URL, go to the Facebook URL Linter page and test the URL. You will receive error or warning messages if something is not properly configured.
3. Try clicking the [Like] and/or [Send] buttons.

For additional information about Facebook Open Graph refer to the Facebook Open Graph Protocol documentation.

Making use of the new Facebook [Send] button and the Facebook [Like] button will allow you to gain even more visibility within the Facebook community. Let me know how this works out for you and share any tips on making this Facebook tool even further.

I’ve long held that putting a plain text email on a website is not a good idea. Even with being careful like this I’m inundated with a large amount of Spam. While I don’t put my email address online in a plain text fashion, and preach the same to others, I’m not always afforded the ability to practice what I preach when I don’t “own” the site.

A case in point… I am a webmaster for a section of a non-profit site that was built to allow section webmasters to manage their group’s online information while maintaining an overall site look-and-feel. While following my philosophy of not placing email addresses online in their basic format, I took a decent approach of replacing the @’s and .’s with [at]’s and [dot]’s. Well, this didn’t sit well because it looked different than the other areas where emails were just entered in plain text. I decided my philosophy wasn’t going to win over the person I was dealing with as all of the other webmasters were entering straight email addresses, so, I removed my [at]’s and [dot]’s after creating another GMail account for myself so that I didn’t trash my email.

Shortly after doing this I came across a great site and, in particular, an article on the best methods for obfuscating emails. Well my method was likely very close to 100% effective, and one I prefer as it is easy for a human to replace the [dot]’s for .’s and the [at]’s for @’s, I settled on another method they outlined; reversing the email address but displaying it properly with some styling. Very cool if you ask me.

The method of using a reverse email address does add a little extra work, as well as having to take care to type in the email address backward. It also requires that you can access the HTML around the email address. The con for the visitor is that a simple copy/paste no longer works. Here is how this method is employed:

Take your email address and type it in backward, so, “myemail@domain.com” is typed in as “moc.niamod@liameym”. Now you need to wrap this text with a <span> or other tag where you can specify some style settings. The styling needed to display the backward typed email in its readable form would look like the following:

<span style="unicode-bidi: bidi-override; direction: rtl;">moc.niamod@liameym</span>

Here’s the above in practice: moc.niamod@liameym

To test this out simply highlight the email above, copy it and paste it somewhere. While it looks good on the page, it is mirrored when you paste it. This is the method I used on the site where the look-and-feel and consistency was important to them. I did, however, add a note to inform the users of what they would encounter with a simple copy/paste action. If I had access to the CSS file I would have added an “obfuscate-email” class as that would be easier to remember when entering additional emails in the future.

Here’s a very cool synopsis of the history of WordPress as well as just how much of a force it is in today’s blogging and CMS world. WordPress truly is king. The only question is whether it will be manageable given the astounding number of plugins and themes available. My expectation, given the product enhancement path I’ve experienced, is an astounding Yes. My recommendation, though, is to start deprecating the out-of-date plugins, or at least allow filtering them when one goes to search for a new plugin. A more robust rating system also would be great.

Infographic: The Power of WordPress – no longer available