GabeDiaz.com » Blog

Background Ad Takeover for WordPress

Gabe Diaz — Mon, 30 Apr 2012 16:04:37 +0000

Im sure we’ve all seen background ad takeovers as they take up the wallpaper or background screen of the site you are visiting. These types of ad backgrounds are popular with entertainment sites because they give advertisers large visual space to promote an event, movie, game release…just about anything. Takeover ads work great with fixed width sites and can create a nice call to action, as seen in the samples below:

Now that we have an idea of what type of ads we are talking about, let’s move ahead and work toward displaying an ad solely on the homepage of your site.

Targeting Your WordPress Home Page
If we only want our background ad to appear on the homepage of our site we will use a simple statement to check if the home page is the current page. We will also want to target your homepage with a custom background so we will be making sure that your body class on the main page is being displayed. The content we will be editing will normally be found in your header.php but look in your template for where your tag begins.

With a small change WordPress can let you apply a class of options to your body tag based on what page you are on. For example a single post page on my site such as this page has the body class of:

class="single single-post postid-910 single-format-standard logged-in"

To get the above, let’s make sure our tag looks like the one below.

 body_class(); ?>>

Directly after your updated body tag we will be using an if statement to see wether or not your WordPress site is displaying the front page.

 
if (is_front_page()) echo ' 
'; else echo '';
?>

What the above means:
Here WordPress checks to see if your site is displaying your front page. If so your site body will be starting with a link that is 1200px in height and includes empty anchor text which points to your banners target landing page before starting your body content. Else if your visitor is on any other page on your site, WordPress will begin your site body with a regular div expression, in this case it’s [div id="wrapOuter"]. In both cases your site body will begin with some type of container, the if statement just figures out if it should add in an empty link prior to your content.

The close of your head tag, the start of your body tag and the beginning of your content wrapper should look like the following (please note: your div id will be different):


 
 body_class(); ?>>
 
 
if (is_front_page()) echo ' 
'; else echo '';
?>

*If you want the same ad to appear throughout your site on every page, use the following format. You do not need to use an if statement, just insert your link right after your body tag. Apply your background to your main body with CSS.


 
 body_class(); ?>>

Adding Some CSS Properties to Your URL
We want to make sure the clickable area of our background spans the length and width of our window as well as changes the mouse pointer on rollover to the pointer finger.

#ad_bg{
top: 0;
left:0;
position: absolute;
display: inline;
width: 100%;
cursor: pointer;}

Setting Your New Background with CSS
Lastly we set a new background image to be seen only on the main page with a little CSS. This is where our body class tags work to our advantage. Since we are on the front page our body will have a class of “home”

Add to your style.css file:

.home{
background:url('ReallyCoolBackgroundImageTakeOver.jpg');
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;}

For the .home class we are setting a background image, aligning it to the top and center of our site, not repeating the image vertically or horizontally and making the background image fixed in place. The property “background-attachment:fixed;” means that when a user scrolls down a page, the background will stay put while only the center site content will scroll down. This is done to keep your background ad in position and visible no matter how far a user scrolls down your page.

See It In Action
Before I link to a test page with these theme, here are some things to consider:

1) This theme is responsive, so it breaks when adding a background takeover. Why? Well because the only fixed column in the theme is the left most sidebar column. The center column and right column are floated and due to this the background becomes clickable for 2/3 of the width of the page.
2) To correct this I added an additional container around my content div and set the margin to auto to center it.
3) I was able to use the same “if statement” from above to make the new container div appear only on this test page.
4) The demo page is an actual Page from this very WordPress installation, it’s not on a Demo install. It’s actually a good example of being target specific pages by their body class and with an array or if statements. You could essentially have a different background for every section, page or post in your WordPress installation.
5) The demo page: http://bit.ly/sample-takeover

First Impressions: HootSuite Pro

Gabe Diaz — Tue, 03 Jan 2012 02:25:35 +0000

With taking several weeks off at the end of 2011 I decided to sign up for HootSuite Pro to help manage some Tweets. If anything I thought I’d be able to have greater control over scheduling Tweets to multiple accounts compared to what is already offered via the Basic Free Version of HootSuite.

Comparing HootSuite Pro vs HootSuite Basic shows that the Pro version is more focused on analytics. Reviewing your stats is great, so it’s a welcomed addition but it’s the same information you can pull elsewhere.

Another feature available to Pro accounts is the Bulk Message Scheduling feature.

While the Bulk Message Scheduling feature sounds great there are a few quirks with how to get it working.

In order to bulk schedule you will need a spreadsheet with the following columns:

Date (dd/mm/yyyy format)

Time (hh:mm format)

You can upload only one spreadsheet to each social profile and you cannot repeat the Tweet even if you allow for a 24 hour time period in between. If you try to schedule the same Tweet 3 days apart you will get an error message when uploading your spreadsheet to HootSuite. Also if you do end up uploading a spreadsheet for multiple accounts your calendar will be overrun with duplicate Tweets. As in if you scheduled Tweet A for profiles X, Y and Z in your calendar you will have 3 separate entries. This is the complete opposite of how you can manually schedule a Tweet via the HootSuite dashboard in that you can link Tweet A to profiles X, Y and Z which will show in your calendar as 1 entry going to several profiles.

Maybe I’m being too harsh on HootSuite but I was expecting a better solution to bulk scheduling. I was hoping for drag drop date editing, quick copy/paste tweets for mass scheduling or even just being able to schedule a tweet to multiple accounts. Maybe HootSuite Enterprise offers a better solution.

First Impressions: IntoNow

Gabe Diaz — Thu, 17 Feb 2011 03:35:36 +0000

What is IntoNow?

IntoNow is a consumer tech company that aims to enhance the way people engage with each other around the shows they love. Based on the SoundPrint platform, IntoNow gives users the ability to almost instantly recognize TV content and then helps them share and discuss those shows with friends, both within the product and through other social streams such as Facebook and Twitter.

I downloaded the IntoNow app for my iPhone 4 about a week ago. I was instantly amazed by this app and tweeted to all of my followers that they had to download this ASAP! There’s a certain level of excitement and amazement that I get every time I open up the app and run the listening software. I’m always secretly hoping that the app fails to recognize what I’m watching but so far, like magic, it knows exactly what I’m watching and even knows the episode name when applicable.

How Does IntoNow Know What I’m Doing?
One word, SoundPrint.

At the core of our product is the SoundPrint platform, our patented indexing technology. With SoundPrint, IntoNow can identify what’s being watched, down to the individual episode, within seconds.

IntoNow can recognize a show even if it’s airing live for the first time. We also have an index that covers more than 140 million minutes of previously aired shows. That’s the equivalent of 266 years of video! Our catalog represents more than 2.6 million airings, indexed during the past five years, and it’s growing by the second.

The SoundPrint platform is the reason why IntoNow knows what you’re watching during a first time airing as well as being able to identify older episodes of previous aired shows. To me this is the truly amazing part, IntoNow knew I was watching Jeopardy as it aired as well was able to know that I was watching Firefly on Netflix right down to the episode name after listening for around 6 seconds.

There are also social features of sharing what you are watching via Facebook and Twitter as well integration with Netflix, iTunes and IMDb. All this, combined with the wow factor of SoundPrint along with the beautiful design of the app make IntoNow my go to app for TV entertainment checkin and sharing.

The IntoNow app is so smart it even knows when you are deliberately trying to trick it.

First Impressions: Jetsetter

Gabe Diaz — Sun, 09 Jan 2011 04:49:31 +0000

The Pitch

Jetsetter is a private online community that provides members with insider access, expert knowledge, and exclusive deals on the world’s greatest vacations. All of the properties we feature are hand-selected by our team of globe-trotting correspondents, and sales last five to seven days. Our philosophy is that travel should be fun and easy — and that includes the planning part.

I’ve been a member of Jetsetter for a little more than a month now and the first thing I need to comment on is the absolutely amazing photography. Don’t get me wrong the deals on the locations are fantastic but something needs to said for the effort put into making this an extremely beautiful travel site. The images of the locations are so inviting that I immediately want to book a flight just so I can take advantage of their hotel deals. While some travel sites give you stock photography of the hotel or outdated images from the 80s depicting a happy couple by the pool or beach, Jetsetter seems to take the extra step to provide high quality images to convey class and prestige. Of course this makes perfect sense since the company behind Jetsetter is the GILT GROUPE which deals in luxury and high fashioned items.

The locations featured on Jetsetter are hand selected and you’ll find many great deals for locations all over the world. Each deal will give you several room options showing you the Jetsetter rate compared to the rate found on the hotel website. For example there currently is a deal for the Evason Phuket & Six Senses Spa located in Phuket, Thialand. The most expensive option is the Deluxe Pool Spa suite from $225/night compared to the hotel website price of $467/night for the exact same room. Opting for the least expensive room would run from $60/night compared to the hotel’s $169/night.

As mentioned I was invited to join Jetsetter right before December in which I quickly found deals on locations in California, Arizona and New York. We wanted to take advantage of these deals since I took most of my vacation time in December but unfortunately we already had a vacation planned throughout the month so we could not take advantage of the deals found. I can’t wait to book through Jetsetter because the locations and prices are great. Not to mention every time I log into the site I get to explore some fantastic locations which I can make note of for future vacations.

You can put in a request to join at Jetsetter.com or if you’d like to earn $25 on sign up you can use my Personal Invitation Link, I only receive $25 when you book your first trip.
Bonus: Once you become a member of Jetsetter you get access to the GILT family of sites.

—

Jetsetter is in the running for a Crunchie Award in the Best Social Commerce App category, show them some love!

Default WordPress Image CSS

Gabe Diaz — Sat, 01 Jan 2011 19:06:33 +0000

Installed a new theme but for some reason your images aren’t aligning correctly when placed via the Image Media Box or is text-wrapping broken? Chances are there are some CSS issues in your theme’s stylesheet. Open your stylesheet.css using your favorite editor and look for img.alignright, img.alignleft or img.aligncenter as these are the default style names given by your WordPress install.

If you do not have any of the names above in your CSS or if you are missing some styles, below is the default styles given when installing a new WordPress installation. You will see the “img” and “a img” styles below which are used for linked images and non-linked images respectively.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

You can copy the above and paste it into your stylesheet.css or use the above as a reference point for spotting or editing your own stylesheet.

Also note that your theme may use custom naming such as #content img.alignright. This just means that img.alignright is a child style of #content. In other words your theme has an area designated as the content area of which images found in this area and labelled with alignright will get the styles found in your stylesheet.css.

If you are new to CSS the numbers found in “img.alignright {float:right; margin:0 0 1em 1em}” after the “margin:” all deal with spacing. Each number is associated with the four sides of a box and are read in this order; top, right, bottom, left. So “img.alignright {float:right; margin:0 0 1em 1em}” would give some space on the bottom and left-hand side of an image.

Using Stickybits for a Holiday Wish List

Gabe Diaz — Tue, 23 Nov 2010 03:20:58 +0000

I’ve been using Stickybits for several months now but with the Holidays right around the corner I’ve found a great new use for it. I have kids and the one thing family members near and far ask is “What do the kids want for Christmas?” Unfortunately at times this can be a touch question since you can walk into a store with the hopes of remembering everything that gets pointed to but end up walking out of the toy store with remembering only a few ideas.

What is Stickybits?
From their FAQ:

Stickybits is a free app that lets you scan barcodes with your iPhone or Android phone. Each barcode has a wall of digital content associated with it, and some have promotions and deals that will be revealed on scan. Stickybits works with all existing barcodes, QR codes, and also custom barcodes.

This little app will scan anything with a barcode and post to your activity wall. When you launch your scanner you get a neat Terminator-like display that you just place over any barcode. If the item has previously been scanned by someone there may be an image attached to it or you can take your own photo and attached it to your scan. The great thing is that everything you scan gets archived to your profile.

Creating Your Shopping List!
We ended up going to the store late in the day and my battery was very low but that didn’t stop me from starting our kids “wanted” list. We went down the isles and when items were chosen (and approved by us parentals) I simply scanned the barcodes with the Stickybits app. Not only do I have a list that I can easily share online but I also have pictures attached so that my sisters know exactly which dinosaur my son wants for Christmas, feel free to view my feed, don’t mind the video games.

Hand a kid the The Great Big Christmas Book Store from Toys R Us and you’ll probably get pages with every toy circled, hand a parent a smartphone with Stickybits installed and you could end up with an smart shopping wish list!

Go ahead and give it a try. Leave a comment with your URL or just follow me on Stickbits!

Mass Delete WordPress Pending SPAM Comments

Gabe Diaz — Wed, 01 Sep 2010 02:55:53 +0000

There may be times when certain comments pass by your WordPress SPAM filter and end up in your pending comments section. You can bulk edit the comments for deletion but that’s usually a page at a time, which is fine for 50-100 pending comments but what happens when you have upwards of 1000 pending comments to delete…or in my friend’s case 5500+ comments. Lucky for us you can mass delete pending WordPress comments with one simple SQL query.

Log into phpMyAdmin
This can usually be done via your hosts control panel. If you have no idea where to find it, just go to your hosts help section and search for phpMyAdmin and follow the instruction of how to launch it. What is phpMyAdmin…well it lets you administer your MySQL servers which contain all of your WordPress information.

Select your WordPress database

Choose your WordPress install’s database. If you only have one database, you are all set. If you have multiple databases there will be a dropdown on the left hand side in which you can choose the database that contains all of the pending comments. The default WordPress install extension for tables is wp_, so when you choose your database on the left hand, your WordPress tables will display on the right. Also some plugins will write to your database, so you may notice some plugins names in the table to the right.

Enter and run your SQL query
The default view of your database is the “Structure” tab, this tab displays all your tables. We need to work in the “SQL” tab so navigate a tab over and you will be presented with a box labelled:
“Run SQL query/queries on database yourdatabasename”

This box is where the magic happens but before proceeding let’s just make sure we are in the correct database. On the left you will see your database name in two places, in the drop-down box as well as underneath the drop-down. On the right side you will also see your database name in two locations, on the very top in the breadcrumb and right above the text box in the heading that reads: “Run SQL query/queries on database yourdatabasename.” Once you are confident that you are in right database, paste the following into the text box.
DELETE FROM wp_comments WHERE comment_approved = ’0′
The above basically means delete all pending comments (comments marked 0) from the wp_comments table.

Once you are all set to run your query, cross your fingers and click go. You may be prompted with a “Are you sure” popup box, just click yes and if all goes well you will be presented with a green highlighted status box that gives you the rundown of your query.

If your query was successful now when you log into your WordPress admin panel you will see that all of your previous pending comments have now been deleted, enjoy!

First Impressions: Yogile

Gabe Diaz — Fri, 16 Jul 2010 15:17:09 +0000

The Pitch

While established photo sharing sites already exist, Yogile is different because it lets multiple people contribute with ease. Once you create an album, you get a customizable URL and e-mail address to share with anyone who wants to add photos, either as e-mail attachments or uploads through the site. There’s no need for these users to register, keeping the process simple and hassle-free.

Take a wedding, for example. Dozens of attendees take their own photos, all from different cameras and angles. While you might try asking everyone for their shots afterward, Yogile offers a smart alternative.

There are many photo sites out there for where you can upload photos and share the URL with your friends and family but Yogile takes this idea a step further and enables anyone to be able to contribute their pictures to a public or private photo album.

It Works!
You can upload pictures in three ways, via the web, via email or via MMS. The last two options are done via a unique email address which uses the name of your photo album URL. When you upload a photo via email the Subject line is the title of your image while I can only guess that any text in the body of your email would be the image description. Submitting an email via MMS also works wonderfully but any text included in the MMS will not get used at the image title nor for an image description but those can be added/edited via the web. You have the option, as the album creator, to receive notifications of new photos added to your albums and the nice part is that the email comes with image previews which is much better than a new image message with a link to your album.

Personalize It!
After I uploaded images via the web, email and MMS I thought back to the example that Yogile spoke about, a wedding, and how this site could be useful.

Imagine being able to give all your wedding guests an email address and URL and all of your photos would be in one location. No need to have photos spread across multiple sharing sites or going around tagging people so that they would know where to see their pics you have access to one central location for all your pics!! There’s only one issue that I could see…the automatic URL when you first register is just some random characters (mine was yt8colz) and putting this string of characters in print would be rather ugly and telling all your guests these characters would result in no one remembering the email/URL. I thought it would be great if you were able to customize the email/URL and when I went to create a private photo album I learned that you could actually name your own photo album! By being able to name your own album you also end up creating a custom submission email and a custom Yogile URL, perfect!

It Could Break!
When I created my account on Yogile it automatically created an album along with an email that I could use to submit photos to, this album was yt8colz with an email address of yt8colz@yogile.com. When I discovered you could create custom album names I went back and edited the first album that was created with a custom name of GabeDiaz. So my public album could now be found at yogile.com/gabediaz and you can email pics to gabediaz@yogile.com but what happens to yogile.com/yt8colz and yt8colz@yogile.com? Well visiting my original URL yogile.com/yt8colz results in a page not found and sending emails to the original email of yt8colz@yogile.com disappeared into the internet without any bounce-back email…not good.

This issue of renaming your albums could cause issues if an excited user creates an account and starts to send out the email address to all of his/her friends for submissions and then later edits the name of the folder. Can a person’s URL be assigned to someone else or can a person switch back? I’m actually a little surprised that Yogile doesn’t forward or associate your old URL with your custom one.

Overall
Yogile is a site that simplifies group photo sharing and although there could be issues, specifically with the name changing of your own albums, the site works like a charm. Yes there are other sites out there which offer group photo sharing; with one that specifically that comes to mind, Posterous, but Yogile allows you to create an email to share with your group to upload to versus having to add others via their email address’. Think back to the wedding example, it’s much easier to give your wedding guests a single email to submit to versus trying to collect everyone’s email address and then adding them to your photo sharing site. Let’s be honest not everyone wants to register to a new service in order to submit pictures, so the email feature from Yogile is great and I wouldn’t be surprised if something similar gets rolled out to your favorite photo sites or if the Yogile team gets acquired and integrated into a larger photo site.

Participate
As you saw above my submission email is
gabediaz@yogile.com and my public album is yogile.com/gabediaz feel free to submit any pictures!

Disclosure
For anyone who comes across this post I just want to let you know that I was made aware of Yogile and it’s service by one of their team members. The above is my honest opinion upon first using the site. Unless otherwise noted by a Disclosure statement all of my other “First Impressions” are based on products that I personally use or come across.

Have something you want me to look at to share with my readers? My contact information is above and to the right, cheers!

First Impressions: Chase iPhone App Check Deposit

Gabe Diaz — Thu, 15 Jul 2010 01:44:02 +0000

Early last week Chase released an update to their Chase iPhone App in which it rolled out several new features including a QuickPay Service along with being able to deposit checks to your account via your phone. Snapping a pic of your check and depositing it to your account is not ground breaking technology but I believe Chase is the first major US bank to offer it. Lucky for me I have a Chase account and last week I had a check that was sitting in an envelope in my back pocket which needed to be deposited.

In order to deposit a check via the Chase mobile iPhone app is an internet connection and a well lit area, stipulations for depositing via Chase Mobile is that you are only allowed to deposit a maximum of $1000 a day and $3000 a week. The app requires you to choose an account to deposit to, a deposit amount and then to take a picture of your check via the app and once it’s done will display the checks relevant information on your phone. Truthfully it took me 3 times to get this to work as the app wasn’t able to read the check properly.

1st Attempt
My first attempt resulted in the app reading the correct amount to deposit(it verifies the deposit amount) but had issues reading the account number on the check, although it did read the routing number fine. I was asked to type in the routing number in the missing field but I figured I’d try again to see if it was an issue with how I took the photo.

2nd Attempt
My second started out a little differently. The Chase app asks you to take the photo of your check from an overhead position. On my first attempt I did as such but because I was overhead and taking the picture in my office, the lights from the ceiling cast a little bit of a shadow from my head, throw in a slight glare from the fluorescent lights and I now understood why the app couldn’t read all of the information. So for my second shot I moved from underneath the ceiling lights and positioned the phone to an overhead position but made sure to stand aside so that my head didn’t cast any shadow at all. Once the front and back shots were taken the app did it’s magic and tried to read the information on the check. Luckily this time it read the account number and the routing number but it told me it couldn’t verify the deposit amount…the app read the check as having a $0.00 value!! This was not good so I shut down the app and tried again.

3rd Attempt
I knew what I had to do for the 3rd time around. I needed no glare from the lights, no shadow from my head and just to make sure the app read everything correctly I made sure the check was evenly flat, after being in a folded envelope, by doing the drag the check along the corner of your desk trick. I guess there’s a reason they say “third times the charm” because this time the Chase iPhone app worked as expected by verifying and reading the deposit amount, account number and routing number all by the picture taken by my iPhone. Once you have all your information displayed properly on your phone you are able to submit the deposit to your account. You then get taken to a verification screen which acts as your confirmation and since you already in the app you can quickly go to your account and see the status of your deposit.

Total time taken for depositing a check via the app was less than 10 mins although if I hadn’t run into issues would probably have taken 3-5 mins. The total time for the check to clear and get credited to my account was less than 24 hours, not sure if this is the norm but I’m guessing deposit time will vary and it will not be instant availability as it has to be reviewed. After using the Chase Mobile app successfully I can now say that if I ever have a check that falls under the deposit requirements of the app I will definitely think twice about getting into the car and driving to the nearest bank. The hard part for me is over; I deposited a check for $900 via my phone, it was a large amount to use as a test amount and believe me I was scared of something going wrong but in the end it worked out and it saved me around 20 mins by not having to leave the office. So if you’re apprehensive about depositing a check via your phone, don’t be…it actually works.

Adding the Facebook Like Button to WordPress Posts

Gabe Diaz — Thu, 22 Apr 2010 01:27:37 +0000

Today Facebook announced a slew of new social plugins that anyone can add to their web pages to make them more social. Among these new plugins is a new button to “Like” anything on the web.

There are 2 main versions of the Like button

The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the XFBML tag and requires you use the JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook.

The Facebook Like Button comes with a handy generator with several options for outputting the proper code to add the Like Button to any web page. This is fine and dandy for some sites/pages and only needs a little tweeking to add the button to your WordPress posts.

The Basic WordPress Code
The only thing needed to add the Facebook Like button to your WordPress posts is to include the proper code for your permalinks. Basically you add the WordPress the_permalink() code to the href= to get the following:

"
scrolling="no" frameborder="0" style="border:none; width:450px; height:80px">

The above adds a 450px wide by 80px high box on your site that is ready to display thumbnails of every friend that has also liked the site/page. If you noticed in the Facebook Like Button generator there are several options for turning off thumbnails, changing font and even using a button count counter. You can append any of these settings after the URL in order to change the look of your button.

Editing the Facebook Like Button
Let’s add the following to change the options to the Facebook button, here we are changing to the count view, hiding thumbnails as well as changing the width and height. We will add the following the code above, after the permalink and before closing out the double quotes.

Add this to the above basic code:

%2F&layout=button_count&show-faces=false&width=100&action=like&colorscheme=light

End up with a new style button:

%2F&layout=button_count&show-faces=false&width=100&action=like&colorscheme=light"
scrolling="no" frameborder="0" style="border:none; width:100px; height:20px">

This is the simple version, for a detailed button that integrates deep with Facebooks new social graph you will need to use the Javascript SDK version of the Like Button.

You can see an example of the iframe Facebook Like button below, if you are signed into Facebook and are reading this feel free to test it out!