Posts Tagged "howto"

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

Showing code examples in WordPress posts

Posted by on Oct 5, 2010 in howto, wordpress

Very  brief post here, I’ve just spent literally 3 hours writing my last post – trying to show examples of the wordpress php and css I used to create a custom horizontal menu.

There are many great plugins out there that help you show code in your posts.  I specifically needed something that:

  • can be used in the Visual side of the WYSIWYG
  • can survive flipping back and forth between HTML and Visual without losing code or format
  • can handle <?php wp_nav_menu($args); ?>

The plugin that can do this, after 3 hours of trying various options, is SyntaxHighlighter Evolved.

With this plugin activated, I just paste my code within [code][/code] tags – right in the Visual editor.

Some finicky things I noticed:

  • If there are any blank lines in your code, you will end up with extra <div>, <br>, <p> tags that don’t belong
  • If you have code that is on two lines, but separated by a blank line – the display will number 3 lines of code.  To fix this, go into the HTML side of the WYSIWYG and backspace until your code is all on one line, then separate by hitting enter/return once. (If you try this on the Visual side, you will end up with a <br> tag that you don’t want.)
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
Facebook Pages: Mobile photo & status update from iPhone 0

Facebook Pages: Mobile photo & status update from iPhone

Posted by on Aug 9, 2010 in marketing, mobile, socialmedia

As a personal user, the Facebook mobile applications have left me a little underwhelmed.

As a business user, the iPhone Facebook application is a great tool for anyone who has a Facebook Page – but doesn’t have any other properties (i.e. Twitter). Once you add Twitter, Hootsuite becomes a great tool but if Facebook is all you work with, then Facebook for iPhone gets the job done quick and easy.

The key is adding your pages to your favourites screen within the application.

Add Your Pages to Favourites

  1. Open the app
  2. Click the grid icon in the upper left corner
  3. Swipe to the left to get to your Favourites page
  4. Click the “+” plus icon in the upper right corner
  5. Click Pages in the bottom right
  6. Select the page you would like to add from the list
  7. Done!

Updating Your Facebook Page

  1. Open the app
  2. Click the grid icon in the upper left corner
  3. Swipe to the left to get to your Favourites page
  4. Click on the page you would like to update
  5. For a status update, go ahead and enter into the What’s on your mind? box
  6. For a photo upload, click the camera icon to the left of the What’s on your mind? box

Huge thanks to @jjloa for this great tip at #pseweb last May!

Learn More