Embed Ads Into Your Twitter Tweets With Adjix

Uh, oh.

Those were the words that came out of my mouth this morning when I checked my email on my iPhone. For those registered to Adjix you may have received an email from the company announcing their new advertising format in which Twitter users will be able to embed an ad at the end of their Twitter Tweets in order to monetize off of their number of followers.

Adjix’s current ad program is based on link shrinking and including a text link on the top portion of the site as long as you are logged into your account on Adjix when shortening your link.

What’s actually useful about Adjix is that they offer several features such as the ability to track the number of clicks your unique shortened link receives. Not only are stats recorded for links with ads but there is an option to shrink a link without an ad, and yes you will still be able to track clicks for that URL.

Do people actually use the service for click tracking and not to serve ads?
Yes. More importantly one of the Twitter elite, @guykawasaki uses the Adjix service very frequently(to shrink and record stats) and if you visit his Twitter stream you will see that most, if not all of his links begin with http://adjix.com.

Adjix has a video demo of their new feature as well as details on their blog outlining Advertiser Info, Twitter User Info and how to install their bookmarklet in order to start embedding ads into your Tweets.

Luckily for me the only person I follow that uses Adjix is @guykawasaki, but the thought of monetizing on Tweets to a large list of followers may cause several to sign up and start using Adjix’s new ad embed. If so, we very well may see more Tweets as the mock put out by Adjix.

03. March 2009 by Gabe Diaz
Categories: Blog | Tags: | 2 comments

Running PHP 5 for WordPress with 1&1 Hosting

Update: 1&1 Hosting Transition to PHP5

If you are on a shared hosting plan with 1&1 it’s relatively easy to create a new MySQL Database for your WordPress installation.

Creating Your New Database

Just sign into your account and navigate to Web Space & Access and then to MySQL Administration. Click on “New Database” and you will be prompted to name your new database along with the option of choosing between MySQL 4.0 and MySQL 5.0 for your new database. WordPress Requirements state that WordPress need PHP 4.3 or higher to function properly although a few plugins require that you use PHP 5 to function. Choose MySQL 5 and your database will begin setup.

Since we created a new database and chose the option of MySQL 5 your database is using PHP 5 for WordPress right? Unfortunately that’s not the case.

Checking Your PHP Version by Creating a phpinfo.php File

1&1 will have your new database running PHP 4.4.9. Easiest way to check what version of PHP you are running is to create a phpinfo.php file and insert only the following into your file.

<?php
phpinfo();
?>

Upload this file to your directory and open phpinfo.php in your web browser.

The information at the top of this window will display the version of PHP that you are running.

Forcing 1&1 to Use PHP 5

It only takes 2 lines added to your .htaccess to force 1&1 to use a version of PHP 5. Add the following to the first 2 lines in your .htaccess file. Your .htaccess file will be in your root directory for your installation, it may be hidden so in your FTP program see if there is an option to display hidden files.

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Once you make the edits to your .htaccess upload it to your directory and once again open phpinfo.php in your web browser. You should now be able to see that your database is using PHP 5.

Quick Tip from JG in the comments:
I found once I updated the .htaccess file, then all my links would break from the homepage. What I did was go to the permalinks page under settings and click ’save changes’. You don’t have to actually change anything.

Then when I found pages that wouldn’t load, simply refreshing the page made them work again.

02. February 2009 by Gabe Diaz
Categories: Blog | Tags: , , | 60 comments

Error 500 When Updating to WordPress 2.7

I held off on updating several WordPress installs to due to the fear of a few plugins not being compatible.  I updated one installation today only to have my stomach hit the floor when I received an “Error 500 Internal Server Error” message once the update was complete.

Luckily the site was still functional but I could not access the admin section.  A quick search and I was able to find an article by Ajit Gaddam surprisingly enough called Solution to Error 500 after upgrading to WordPress 2.7.


Ajit’s fix:

This seems to be a problem for WordPress blogs which are hosted by 1&1
The solution to the Error 500 – Internal Server error
1. Create a file called “php.ini” in the /wp-admin/ directory of your blog
2. In the file add the text “memory = 20MB” without the quotes

What is odd is that I have installed a fresh install of WordPress 2.7 on a 1&1 server with no issues, but experienced this error only when upgrading to WordPress 2.7.

31. December 2008 by Gabe Diaz
Categories: Blog | 18 comments

Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way

Also see Enabling Author Pic and Bio for WordPress Single Posts for displaying an author bio box on a post by post basis.

A lot of sites/blogs out there have guest posts and/or multiple authors who contribute content on a regular basis. Now, there is nothing new with displaying the author name of a post, that snippet of code is just

<?php the_author(); ?>

and will simply display the authors name. We want to get a little more stylish and display a bio with an image, usually you can find a small bio of the article author before or after the post you are reading. 2 quick random examples can be seen below:

Steven Snell(Vandelay Design and DesignM.ag) is a contributer to the popular site PSDTuts, they do an author pic/bio before the article.

From Steven’s 20 Photoshop Painted Inspiration and Brush Resources

Author Bio - PSDTuts

Adelle Charles runs FuelYourCreativity.com in which she displays an author pic/bio after the article.

From Adelle’s Micromanaging a Creative

Author Bio - PSDTuts

Both of these examples display a little information about the author along with a link to the author’s site. Who doesn’t love some link love?!

Both are also are calling in the author’s Gravatar (Globally Recognized Avatar) that is linked to the author’s email*.

*For those who don’t know you can import an author’s image using the gravatar code:

<?php echo get_avatar( get_the_author_email(), '80' ); ?>

In which the author’s email will be checked with Gravatar, if the person has an account the image linked to their email will be displayed, exact same concept of pulling in avatars in the comments section of your favorite site.

But what happens if the author doesn’t have a Gravatar account?

Hmm…interesting.

Ok first thing first, make sure your author is listed as a “User” for your site. If they are not listed, create the account:

Go to your WordPress dashboard>>Users>>Authors>>Profile

Make sure the section for the Bio Info is filled out and while your at it make sure the First Name, Last Name and Nickname are filled out as well…they will come in handy later on.

Now open your Single Post php file, usually single.php. This page generates the layout of your article and is the file you need to edit in order to display some author info. For my example I added the author bio after the article, right before the share options and comments.

<div class="authbio">
<?php the_author_description(); ?>
</div>

Yikes, ugly but it works!

Let’s add some quick CSS to make it look somewhat respectable, you can always style away later!

.authbio{
color: #666;
font-weight: normal;
background: #fff;
border: 1px solid #ccc;
width: 420px;
height:60px;
padding: 8px;
margin-bottom:5px;
}

Okay, so now we are pulling in the author’s bio…what about the image?

Remember all the author fields you were suppose to fill out? First Name, Last Name, Nickname…if you didn’t do it, go do it now!

Let’s add these lines before your the_author_description in your single.php file.

<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>

Your author image and bio should now look like this:

<div class="authbio">
<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>
<?php the_author_description(); ?>
</div>

What the above means:

The above img src is looking for a file in your “Your Theme Stylesheet Directory/images” folder aka www.yoursite.com/wp-content/themes/ThemeName/images/.

php the_author_firstname is the first name used in the author fields under dashboard>>users>>profile

Please note that this is just returning what was entered into the First Name field and not the complete author name. Finally the extension “.jpg” is appended to the name.

Now you just need to upload a photo to your: www.yoursite.com/wp-content/themes/ThemeName/images/ and name the file exactly the same name you placed in the First Name Field in the author profile.

Throw in a little CSS to clear up the spacing

img.alignleft {
    float:left;
    background-color: #fff;
    border:1px solid #ccc;
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}

And we are looking pretty much done!

Things to remember:

You can put links in your bio, no need to forget to link back to your site.

The above technique is looking for an image labeled the same as the “First Name” of the author. Also try the_author_lastname(); or the_author_nickname();

The technique above will provide a static solution for an author who does not have a Gravatar account. What is great about Gravatar is that the image will follow you wherever go as it’s linked to your email address. If you change your Gravatar image I believe it will be reflected everywhere you have left a comment, written a guest post etc. Using a Gravatar helps your personal branding to be consistent throughout the web.

Hope this is helpful, as I used it as a solution for an guest author who has an offline presence.

25. November 2008 by Gabe Diaz
Categories: Blog | Tags: | 74 comments

First Impressions: Google Voice Search

Google Voice Search for the iPhone is now available via the Google Mobile App. It works as stated, not only functional but fun as well.

Before using the Voice Search you will need to turn on the feature under “Settings” when you launch Google Mobile App. Don’t forget the instructions as “Voice Search only works in English, and works best for North American English accents.”

After you turn on the settings, just put the phone to your ear and the proximity sensor in your iPhone will start the process of recording your voice with a little beep. Speak regular into the phone and then just move the phone away from your ear.

Watch as Google does it’s magic.

And finally you are presented with your search results which are now optimized for your iPhone which are in the same fashion we are used to, just laid out more efficiently for your iPhone.

Of course Voice Search is cool in itself but when you launch the app, it will ask you if it can use your current location. By just saying “Movie Times” in the app I was able to pull up the times for the nearest theater.

Sure beats opening up an app, typing in the zip code of your location and then choosing the nearest theater! I also tested out some random searches which all returned what I was looking for. Overall, if you have an iPhone you probably already have the previous version of the Google Mobile App installed, just update and you’ll be all set. Else download the Google Mobile App from the iTunes Store and test away, you’ll be surprised how well it works and may definitely change the way you search on your iPhone.

17. November 2008 by Gabe Diaz
Categories: Blog | Leave a comment

My Pleasure Pet

Name/Status:
mypleasurepet.com/Offline

Software:
Flash, Photoshop

Position:
Flash Designer/Developer

Description/Role:
MyPleasurePet.com was an online initiative to bring to life the revamped Penthouse Magazine in a fun manner by “playing” with the current Pet of the Year, Heather Vandeven. Developed by Sugartown Creative, MyPleasurePet.com was a sexy/naughty Subservient Chicken.

Due to the site launch building up momentum(via launch party invitations), there was the need for a placeholder until the actual site went live. A countdown timer was a fun way to keep the momentum going and an outlet to give those early site visitors a definitive launch date.

Technical Challenge:
None.

17. November 2008 by Gabe Diaz
Categories: Work | Leave a comment

Fixing Your Image Gallery for WordPress

Most new themes will include the proper image.php file for the WordPress 2.5+ gallery but if not here are a few quick snippets of code that may help.

When using the gallery features with WordPress 2.5+ you are able to upload many photos to a post/page and then insert the entire gallery using the shortcode:

1
[gallery]

When viewing individual images WordPress will automatically look for a image.php, then an attachment.php following the WordPress Template Heiarchy. If your theme doesn’t have either just copy your single.php or index.php and rename it to image.php or attachment.php

Don’t forget to start of your new page with the proper label:

1
2
3
4
5
<?php
/*
Template Name: attachment
*/
?>

In the content area of you page, IE post, content, post entry…you can use the following to call in the image:

1
2
<p class="<?php echo $classname; ?>"><?php echo $attachment_link; ?>
<br /><?php echo basename($post->guid); ?></p>

For a snazzy before and after image preview under your image you can use:

1
2
3
4
5
<div class="imgnav">
<div class="imgleft">previous image<br /><?php previous_image_link() ?></div>
<div class="imgright">next image<br /><?php next_image_link() ?></div>
</div>
<br clear="all" />

Style it with some CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/****************Image Gallery *********************/
.gallery {text-align:center;}
.gallery img {padding:2px; height:100px; width:100px;}
.gallery a:hover {background-color:#ffffff;}
.attachment {text-align:center;}
.attachment img { padding:2px; border:1px solid #999999;}
.attachment a:hover {background-color:#FFFFFF;}
.imgnav {text-align:center;}
.imgleft {float:left;}
.imgleft a:hover {background-color:#FFFFFF;}
.imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
.imgright {float:right;}
.imgright a:hover {background-color:#FFFFFF;}
.imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}

I know I took the above CSS from somewhere so please let me know if it’s yours to provide credit. What the above will do is fix the spacing issue between the default WordPress image gallery along with add some style and function to your single image page.

This code has help me before and now I just about copy and paste it through any WordPress install I have running, so hopefully it will help some of you as well!

23. October 2008 by Gabe Diaz
Categories: Blog | Tags: | 4 comments

Easy Featured Post for WordPress

Creating a featured post section for your most recent post has quickly become one of the most widely used features for many templates.

The ScatterBrain WordPress Theme uses a featured post section in which the latest post is displayed with a large image which is attached to the post using the “Custom Fields” found when publishing a post. So let’s do a quick run through of the code so we can all understand the process.

Here is the full code for reference that is used in the ScatterBrain WordPress Theme which we will be dissecting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="latest_post">   
<!--?php $the_query = new WP_Query('showposts=1');
while ($the_query--->have_posts()) : $the_query-&gt;the_post();?&gt;
 
<h3 class="sections">Latest Story</h3>
 
 
<div class="postMeta"><span class="date"><!--?php the_time('m.d.y') ?--></span></div>
 
<!--?php if ( get_post_meta($post--->ID, 'home_image', true) ) { ?&gt;
 
<div id="latest_post_image">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/latest/<?php echo get_post_meta($post->ID, " home_image",="" $single="true);" ?="">" alt="<!--?php bloginfo('name'); ?-->: Latest post" width="470" /&gt;</a>
</div>
 
<!--?php } ?-->
 
<h3 class="latest_post_title" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<!--?php the_title(); ?--></a></h3>
 
 
<!--?php echo strip_tags(get_the_excerpt(), '<a--><strong>'); ?&gt;</strong>
<strong>
 
<div class="latest_post_meta">
<span class="latest_read_on">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/read.gif">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading</a></span>
<span class="latest_comments">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/comment.gif">
<!--?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off');?--></span>
<!--?php $cat = get_the_category(); $cat = $cat[0]; ?-->
<span class="latest_category">Category: <a href="<?php echo get_category_link($cat->cat_ID);?>"><!--?php echo $cat--->cat_name; ?&gt;</a></span>
</div>
 
</strong></div>
<strong>   
<!--?php endwhile; ?-->	
</strong>

Query Your WordPress Posts:

2
3
<!--?php $the_query = new WP_Query('showposts=1');
while ($the_query--->have_posts()) : $the_query-&gt;the_post();?&gt;

What the above means:
Hey WordPress, for this section I want to call upon and use 1 post. Luckily for use the “1 post” will always be the latest post across all categories. If you want to show 1 post from a specific category, use (‘showposts=1&cat=11’) where cat= is the category ID of the category you wish to pull from. You can also use category_name= to name a specific category or exclude categories from this query. See the Query Posts Templates Tag WordPress Codex for a full rundown of parameters.

Section Label and Date:

4
5
6
7
<h3 class="sections">Latest Story</h3>
 
 
<div class="postMeta"><span class="date"><!--?php the_time('m.d.y') ?--></span></div>

What the above means:
Line 4 is labeling the section. Line 5 is pulling the date of the post entry. There are several options for the format of the date and time, review the Formatting Date and Time WordPress Codex for more info.

Looking for the Image:

6
<!--?php if ( get_post_meta($post--->ID, 'home_image', true) ) { ?&gt;

What the above means:
Here we start our “If” statement to look for a custom field named ‘home_image’ which you set when you are writing your post. Custom fields consist of a Key and a Value, in this case our Key is ‘home_image’ and our value is our image name. For every post that is to appear in the featured area you would add a value or image name to the Key of ‘home_image’.

Setting the Image:

7
8
9
10
<div id="latest_post_image">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/latest/<?php echo get_post_meta($post->ID, " home_image",="" $single="true);" ?="">" alt="<!--?php bloginfo('name'); ?-->: Latest post" width="470" /&gt;</a>
</div>

What the above means:
First we need to make sure to link the image to it’s post, line 8 starts the link wrap for the image as the href= will be linking to the post permalink.

Line 9 may be long but all we are doing is pulling in an image.

The first part of our image source aka img src= is pointing to a directory located within the theme called images/latest. I use this so I can just dump images to the folder via ftp but you can change this to point to your uploads folder and add images via the WordPress built in media gallery.

The second part of the img src= is naming the file in the images/latest folder. So get_post_meta($post->ID, “home_image”, $single = true); is pulling in the value you set in your Custom Field for the key of “home_image”. If your image was called home.jpg the img src from above would essentially be “Your Theme Stylesheet Directory/images/latest/’home_image'” or “Your Theme Stylesheet Directory/images/latest/home.jpg”

Post Title:

12
13
14
<h3 class="latest_post_title" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<!--?php the_title(); ?--></a></h3>

What the above means:
Again we use the_permalink() to link the title to it’s permalink while the_title() pulls in the title.

Post Excerpt:

15
16
17
<!--?php echo strip_tags(get_the_excerpt(), '<a--><strong>'); ?&gt;</strong>
<strong>
</strong>

What the above means:
Pull in the excerpt!

Post Meta:

16
17
18
19
20
21
22
23
24
25
<div class="latest_post_meta">
<span class="latest_read_on">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/read.gif">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading</a></span>
<span class="latest_comments">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/comment.gif">
<!--?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off');?--></span>
<!--?php $cat = get_the_category(); $cat = $cat[0]; ?-->
<span class="latest_category">Category: <a href="<?php echo get_category_link($cat->cat_ID);?>"><!--?php echo $cat--->cat_name; ?&gt;</a></span>
</div>

What the above means:
This is the code for the bottom area which contains the Continue Reading Link, Number of Comments and displays what Category the post came from. The first two sections have an image followed by a text link. Each section is wrapped with a span class such as latest_read_on, latest_comments and latest_category.

If all goes well, and with some CSS you will end up with an image, title, excerpt and read more, comment and category:

I tried to keep it short on the areas which were a little more self explanatory but if there’s any questions feel free to ask. Overall line 2 is where the magic happens in which you’re telling WordPress where to look at how many posts to pull for your section. Line 6 is where you tell WordPress to look for your custom Key while line 9 is where you swap your Key for a Value.

27. September 2008 by Gabe Diaz
Categories: Blog | Tags: | 13 comments

100 Beautiful Blog Designs

Looking for some inspiration? The folks over at Hongkiat.com have compiled a list of 100 Beautiful Blog Designs.

The list has all types of designs, from simplistic and clean to colorful vibrant designs.  A great compilation to look over to see what others are doing out there with their Blogs!  So if you have 10-15 minutes(because you will end up clicking through some sites) then make sure you check it out.

26. September 2008 by Gabe Diaz
Categories: Blog | Leave a comment

First Impressions: Veritocracy

Veritocracy.com

Veritocracy.com

Veritocracy.com – Veritocracy learns to find the best perspectives, on the topics that interest you. To get started, just read and vote on the articles you see.
What is Veritocracy?
”The ultimate objective,” says CEO Lee Hoffman, “is to create a truly meritocratic content distribution system where each article a writer publishes finds its way to the individual readers that will actually want to see it.”

I was able to snag an invite to the closed Beta of Veritocracy through a write up on TechCrunch. The title of the article, Veritocracy = Digg + Techmeme, was interesting enough for me to try to sign up through my phone while walking into a restaurant to get some lunch. Unfortunately due to the AJAX sign up form(along with validation) that appears after you enter the invite code, it renders off screen on a iPhone 3G. With some guessing and hitting the “Done” button I was still able to sign up even though only half the sign up form was able to be seen. No worries, it’s in Beta…besides who registers for a Beta site from a phone…

Once you get your confirmation email and log into the site you are presented with your personal page, in which you see a brief overview of the Top 2 articles for numerous categories.

Veritocracy.com

Veritocracy.com

What’s appealing is that once you begin to start reading articles and rating them, the system will adjust to your preferences and show you articles according to your ranking of articles. Not sure how long it would take for the algorithm to start sending articles tailored to your interests but it will probably take some dedication from the user. Think of the Digg Recommendation engine as a site of it’s own and you’ll have the quick idea of Veritocracy.

In order for the system to send you specific articles you need to rate a number of articles. Luckily if the articles are submitted via the feed feature and show the full story vs the excerpt you are able to view the articles in a lightbox like feature, which is truly convenient as it allows for quick reading and rating.

Veritocracy.com

Veritocracy.com

The appeal of publishers getting their stories to those readers who would be most interested in the topic is promising, but will take a lot of user contribution. The articles you see when you log in are not to be the most popular articles on the site but the most appealing based on your history of rating articles, submitting and commenting.

7AD26797C8A0A66E12273E38A6A33960

05. September 2008 by Gabe Diaz
Categories: Blog | 3 comments

← Older posts

Newer posts →