Posts Tagged "tips"

Bootlegger: Email + Facebook + Contest 2

Bootlegger: Email + Facebook + Contest

Posted by on Nov 8, 2010 in higher ed, howto, marketing, pseweb, socialmedia

Just got this email from Bootlegger – it caught my eye for two reasons.  First, it uses a Custom FBML tab that displays differently depending on whether or not the visitor is a fan. Second, I really like the way that the display images uses white spacing.

Bootlegger Jeans Facebook Page - Custom FBML Tab - Non-Fan View

Above: The Bootlegger Fan Page if you aren’t a fan …

Take a look at the display picture.  It is very simple, but the spacing between the photo of the models, and the brand creative below the photo, makes it seem like Bootlegger has managed to earn themselves two display images instead of one.  Because Facebook has a white background – all you’ve got to do is throw in some white spacing and fake it.

Below: The Bootlegger Fan Page if you are a fan …

Bootlegger Jeans Facebook Page - Custom FBML Tab - Fan View

Here’s what’s going on: Facebook is checking to see whether each visitor is a Facebook Fan of Bootlegger.  If they are a fan, then they are shown specific content.  If they are not a fan, they are shown completely different content.

I think this is really effective! What could be more clear than the giant LIKE with a big blue arrow.  It is also very easy to do

A few more screenshots:

Bootlegger Jeans Website - Contest Landing / Registration Page

Above: The contest landing page for Bootlegger’s become a fan and win a $500 shopping spree contest.

Below: The email campaign sent out to Bootlegger’s customer database, promoting the shopping spree contest.

Bootlegger Jeans Contest Promo Email


Learn More
Working with WordPress custom menus 1

Working with WordPress custom menus

Posted by on Oct 5, 2010 in howto, pseweb, wordpress

Today I replaced two static links with a custom WordPress menu in a site that I am working on.

Here is where I am starting with, in static XHTML and CSS:

Screen capture of the menu I am working on


And here is the code:

[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]

Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.

Creating the actual custom menu in WordPress

  1. In your WordPress dashboard, under Appearance, go to Menus.
  2. Enter a new menu name (I recommend one word) and hit Create Menu.
  3. Add the pages you would like to include and drag/drop into the desired order.
  4. Go to Screen Options and check the CSS Classes box.
  5. Expand each page in your menu and add the desired class.
    Note: For me, I added the same class to each of my items (“whitelinks”).
  6. Save Menu.

Pulling in my custom menu

  1. First, I need the wp nav menu code
    [code]<?php wp_nav_menu($args); ?>[/code]

  2. Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
    [code]’menu’ => ‘Sitemap'[/code]

  3. Then I define what class the div surrounding my menu is.
    [code] ‘container_class’ => ‘siteindex'[/code]

  4. Finally, I define the ID of the div.
    [code]’container_id’ => ‘navmenu’ [/code]

  5. And I end up with:
    [code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]

    Note: the $args  got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.

Formatting my custom menu

Originally, my menu items were formatted by a class on the <a> tag.  When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.

So, what I have to do is tell WordPress to format a link within a specific class:

[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]

My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):

[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]

Done!

Sources:

Learn More