According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

#twitter-widget-0 {width: 100%;}

I’m sure there are many ways to pull WordPress posts into an external website but here I would like to offer up a simple custom XML solution. No matter what back-end/server-side technology being used (PHP, ASP, ASP.NET, ColdFusion, Ruby, Perl etc.) on the non-WordPress site, most will offer up a way to parse external XML. The problem however is that the out of the box WordPress feed does not include the full post content and limits you to 10 posts. We will need to create a custom feed that will not only provide full post content depending on the ID specified but also allow us to get an unlimited number of posts for our listing page.

Creating WordPress Custom Feed

Copy/paste the following into a new file at the root of your WordPress installation.

<?php
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');

$num = $_GET["numberposts"] ?: '10';
$cat = $_GET["catid"];
$postID = $_GET["postid"];
$type = $_GET["type"];

switch ($type){
   case "singlePost":
      $posts = get_posts('p='.$postID.'&numberposts=1');
      break;
   case "catFeed":
      $posts = get_posts('category='.$cat.'&numberposts='.$num.'&order=ASC');
      break;
   default:
      $posts = get_posts('numberposts='.$num.'&order=ASC');
}
?>
<xml>
<items>
      <?php if($type == "catFeed"){ ?>
         <catname><?php echo get_cat_name($cat); ?></catname>
         <catdescription><?php echo category_description($cat); ?></catdescription>
      <?php } ?>
      <?php foreach ($posts as $post) : start_wp(); ?>
         <item>
            <id><?php the_id();?></id>
            <title><![CDATA[<?php the_title();?>]]></title>
            <link><?php the_permalink_rss() ?></link>
            <author><?php the_author();?></author>
            <pubDate><?php the_date();?></pubDate>
            <teaser><![CDATA[<?php the_excerpt();?>]]></teaser>
            <?php if($type == "singlePost"){ ?>
               <content><![CDATA[<?php the_content();?>]]></content>
            <?php } ?>
         </item>
      <?php endforeach; ?>
   </items>
</xml>

As you will see if you go to the page URL the feed will default to all posts and the number that displays defaults to 10. To get exactly what content you want in the custom xml feed we will need to use QueryStrings.

URL QueryString Parameters

• type – Feed type
  • singlePost – only pulls post that matches post id parameter
  • catFeed – shows a listing of posts from a category
  • default – all posts
• postid – post id of the post you’d like to retrieve (only applies to singlePost)
• catid – category id of the category to pull in (only applies to catFeed, optional)
• numberposts – number of posts to display (defaults to 10)

Examples

• http://www.example.com/customFeed.php?catid=244&type=catFeed&numberposts=100 – get 100 of the most recent posts in category with the ID of 244
• http://www.example.com/customFeed.php?postid=13&type=singlePost – get a single post with the id of 13

XML Structure

<xml>
   <catname>category name</catname>
   <catdescription>category description</catdescription>
   <items>
      <item>
         <id>post id</id>
         <title>title</title>
         <link>permalink</link>
         <author>author</author>
         <pubDate>December 23, 2008</pubDate>
         <teaser>teaser</teaser>
         <content>full post</content>
      </item>
      <item>...</item>
      <item>...</item>
      <item>...</item>
      <item>...</item>
      <item>...</item>
   </items>
</xml>

Back-End/Server Side General Logic

Now that you have the custom feed you can write the back-end code that will parse the custom XML and display blog content on your external website. I would suggest the logic be set up as follows:

• Individual Post Display
  • Page that allows for a query string to pull in individual posts
  • Display the title, date, author and full post content
• Listing Page Display
  • Page that pulls in a category listing (query string is optional)
  • Display title, date, author and teaser
  • Post titles would link to the individual post page with the specific post id as the query string parameter

Conclusion

If you follow this you can easily pull in your WordPress listings and individual posts via XML and your choice of back-end/server-side scripting language. This opens up a lot of possibilities for highly advanced and customized applications no matter what the platform.

I’ve been doing Web Development for years now and have gained a lot of insight on what can make or break a website project in any given stage of the life cycle.  I typically am involved in full life cycle development (from start to end) and with this comes a lot of variables and unseen surprises.  I’ve come up with a list of things that help a project stay on track and under budget.

This is the first post of 3 and will focus on the Analysis and Design phase of building a website.

Analysis and Design - The analysis and design is the MOST important stage of any website project.  Some of the things we do during this stage are:

• Research all details from the audience to the back end integration.
• Make suggestions based on field research and client needs.
• Lay out exactly what the site will contain and how it will work.
• Plan out things like hierarchy and content importance.
• Create a design that suits the needs of the site.

As you can see it is a very detailed road map for the project.  If something is not accounted for during this phase it could throw the entire project off track. If this stage goes well and all information is accounted for, planned for and explained clearly to the client it proves to be priceless for every other stage of the project.  As a developer I can’t stress the importance of a good analysis and design phase. Some things that are done in this phase that help smooth over the development phase for me are:

• Clear communication and interaction from the beginning.  I’ve found that sitting in on the last few meetings of the analysis and design phase is very beneficial for me in development.  It assures me that everything being promised can be done and will work with other requirements of the site.  It also keeps me familiar with the purpose of the site and why certain decisions were made.
• Written portion of requirements are also very important for me.  I am very much a list person and having everything individually detailed out allows me to quickly finish development given there are no questions about what I am doing.  It also allows me to test and ensure development is exactly as we promised.  This saves what could be endless rework time of having to guess or hold off on items and then go back in and familiarize myself again just to make an update that could have been done the first go round.
• Lastly there are the design files, the actual PSD or AI files that have been created for the site design.  Personally I feel the more detailed and thought out the better.  If there is a form on a page did we account for the error messages?  Is the file itself organized in a way that I can find things easily and slice from? Is it all inclusive in one file or do I have to open 10 different files?  What if the text changes and gets longer?  I prefer examples of all possible scenarios.  Again if we have to come back and do things later it causes a lot of rework and headaches from having to redo countless other things to accommodate the change for that one thing.  

The ultimate goal is to rinse and repeat the design and analysis phase as many times as needed to get a clear and accurate view of everything the site will entail.  I know everyone wants to dive in and start building but just remember that we only want to develop once.  Making sure everything is thought about and accommodated for in this stage ensures a more streamlined and surprise free project.

Please check back for the 2nd article in this series soon.

Have you been trying to use Goodreads Grid Widget and not able to get it to work? Are you copy/pasting the code and not getting anything but the no script version of the grid with a } at the end of it? If so I was having the same problem and I wasn’t able to find much information online to help me.

The problem I was having was I couldn’t get the code itself to produce an actual JavaScript widget. All I’d get is a static list like this:

I did a little investigating of the copy/paste code to see that there is no actual JavaScript call within the code. That got my attention to the browser. Was my browser doing something to the code box that was messing up the widget code before I got to copy it? So I tried it in other browsers but still no luck.

After this I decided to just find another implementation out there somewhere and try to re-create it with my information. It worked perfectly and quickly (estimated 10-20 min). So along with notifying Goodreads of this issue I wanted to share with others the working solution. I’m not going to say this is the simplest thing in the world but it works. My hopes are that nobody will have to use this blog because Goodreads would have already resolved the issue and we can stick with using the copy/paste feature directly from Goodreads. You can also use the other widgets available to you that all seem to work ok. This is for anyone who REALLY wants the grid list and is willing to do the work behind getting it.  

To create your Goodreads grid widget just follow the instructions below:

1. To get to the widget area log in to Goodreads and go to the edit profile area. The link for this area is located in the drop down menu in the upper right of the site when logged in. Once there click the widgets tab.
2. Scroll down to the Grid Widget and make the settings how you want them. Note* if you have trouble with the preview display on the left just change the max number of items and it should update the preview. This was a different bug I found when trying to Google my own issue.
3. Once you are satisfied with the display copy the code into notepad but don’t close the browser window just yet. Scroll to the bottom in notepad and you will see an random } on its own line. You can delete this.
4. Then at the bottom of notepad paste in the following JS call

   <script src="http://www.goodreads.com/review/grid_widget/5466785-tiffany-may?cover_size=medium&amp;hide_link=true&amp;hide_title=true&amp;num_books=200&amp;order=d&amp;shelf=website&amp;sort=year_pub&amp;widget_id=1335496475" type="text/javascript"></script>

5. Replace the different parameters with the ones you had selected in the widget configuration area. Click image below for larger view.

Then just paste your final code into your webpage and you have a Goodreads grid widget!

Here a few examples of what you can do with just the fireworks png (un-flattened) vector file from my blog Free Social Media Vector Icon Set.  Please note these are mainly to showcase using the file as a source file for icon sets and the different levels of customization that could happen. Feel free to download them all and do what you’d like with them. Click here to download all social icon sets.

Please Leave a comment if you’ve used these or if you’ve made a set out of these. I would love to see everyone’s ideas on how to deal with the ones I left black in the last set.  Also please leave a comment if there are any icons you would like to see added to the set.

After my last blog Free Social Media Vector Icon Set I received some feedback not understanding why I did it.  Saying you can go to places like Icon Finder and find all you need there.  Icon Finder and many other sites do have a great selection that I do use often but sometimes its hard to find sets that are vector, include all icons I need and are the original colors.

The color is important because though I may want to make them all one color or style later I do not want to have to go find the brand colors when I want to just use the regular icon.

Having all the icons I need in a set is important because I cannot recreate some of the themed icons on icon finder (or other icon sites) to match the others in the set.  So basically if they don’t have the specific icon I need in that set and I cannot match the style then the set is useless to me.

The most important of all is the vectors part.  A lot of times it says you are downloading a vector but you are not.  I was originally just trying to learn how to handle vectors in Adobe Fireworks (I normally use Adobe Illustrator) but it turned into this icon set to give me something to practice with.  I know there is a lot of ways to describe what the difference between a Bitmap and a Vector is but I’m just going to stick with what makes it different when it comes to these icons.

To see if your icon is a bitmap or vector within Adobe Fireworks just look at the layers panel.  If it says ‘Bitmap’ then it is a bitmap and if it says some type of path than it is a vector (may need to ungroup items before this will display). Also you may notice that (when ungrouped) a vector has a path with dots on it when a bitmap simply has the entire rectangle as the outline.  You will understand this more when we try resizing and editing a bitmap vs. a vector.

Resizing

Here is an example when we try resizing the different types.

If you see the left Bitmap is really blurry but the right vector is still crisp and clean even at 475px.  In fact you could resize a vector to ANY size and it would keep itself looking crisp and clean since it is based on paths than can scale to any size vs. the bitmaps pixels that have already been flattened together.  This is why Logos are made as vectors to ensure even if you wanted your logo on a HUGE banner that it would still look just as good.

Modifying

So let’s say we want to change the color to make a set of red icons.  If you notice in the properties tab there are no options for color fill for the bitmap.

But still let’s try under filters to add a color fill.

As you can see that’s not going to do what we need it to. Saving the file as a bitmap basically removed our options of doing anything later.  We cannot easily set the twitters ‘t’ to be a different color or remove that outline.  It is permanently set within the bitmap image.

The main reason why I created the social media icon set was to practice using and creating vectors within Adobe Fireworks.  In the end I ended up with not only a great set for use as is but also a great source file for other icon sets I want to create.  Though I do LOVE the square set as is I have also done some experimentation for other types of icons.  Please see my other blog  Using the Free Social Media Vector Icon Set as a Source File for Other Icon Sets for more examples of using the original social media icon set as a source file for other icon sets.

First I would like to say I am a Web Developer here at Beacon so Design is not my specialty. However, I’ve gradually been getting annoyed by the round corners that are on most social icons. I think there is always the ‘too much’ factor and for me I’ve been given too much round icons. So the only thing that looks fresh and appealing to me anymore is square. I’ve looked at other free icon sets out there and still have yet to find a basic and simple square set. So I decided to give it a shot :).

All these icons are vectors I created within Adobe Fireworks CS4. For most of these I used the method mentioned in this post (http://trentrichardson.com/2009/04/11/convert-bitmaps-to-vectors-in-fireworks/) and others I copied the company provided vector into fireworks and modified from there. Feel free to download and do what you’d like with them. I have them all within one file for ease of creating/posting but again each is its own vector so you can copy it into another document or slice them out from the file.

Download Here

This Vector set includes:

• Facebook
• Twitter
• LinkedIn
• Pinterest
• WordPress
• Google +1
• RSS
• SlideShare
• Goodreads
• GitHub
• Forrst
• Amazon
• Blogger
• YouTube
• Dribbble
• Skype
• Vimeo
• Delicious
• Technorati
• Last.fm
• StumbleUpon
• Yahoo!
• MySpace
• Foursquare
• Flickr
• Tumblr
• Meetup

An Event Apart is a design conference for people who make websites.  It is what I refer to as my dream conference because it is held, attended and spoken at by some of the top experts in my field.  These people write the books that I read when learning and are always on top of new technologies and best practice.

I am very excited to say that I was able to attend An Event Apart in Atlanta GA recently.  I learned so much I am struggling with how to take it all in at once.  From completely new things to better understanding things I thought I knew.

Before I went to the conference I ordered 1-6 of A Book Apart’s book collection in an attempt to prepare myself for the conference.   These books are sub lined Brief books for people who make websites.  I didn’t get a chance to read them fully before the conference but they are becoming invaluable to me now as I track back over what I’ve learned.

I just finished reading Responsive Web Design and Mobile First out of the collection and would recommend them to anyone who works on websites.  They are small books and very easy to read. In fact once you start you will likely finish it in a matter of hours.  I’m starting to think that small is better because these two books packed a huge punch.   I’m looking forward to finishing the collection and expect each book to be just as informing and eye opening as the last.

To get your copies go to abookapart.com. Personally I am still a fan of the traditional book you can hold in your hand but they also offer ebooks. In fact writing this article, looking at the pricing difference and the book clutter surrounding me I may have just been converted (I purchased a kindle). I guess I will have to follow up with how that works for me : ).

I had a hard time finding an answer for this today and thought I’d share the solution. Please see the original article I found that helped me link to original article. My code did turn out to be slightly different given the positioning of the Google +1 in the footer of the Beacon main site but it was based on the code in Danny’s article.

First I needed to find an icon like the one requested. Here are a few more options on where to find good icons:

• IconFinder – I was unable to use the version from here but they do have others
• wplift – I was able to find a good version here
• Designrfix – I found this after but it looked like a good selection

Now on to the code. I used Googles customize your +1 button to get the google parts of the code I needed.

I first placed this part of the code in the head of the document

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then I took Danny’s HTML code and changed it up a bit to include my unique URL and placed it where I wanted it on the HTML page

<div class="googleplus">
<div class="googlehider">
<div class="g-plusone" data-annotation="none" data-href="https://plus.google.com/u/0/b/112352004720495408285/"></div>
</div>
<img src="images/googleplus.png" class="mygoogle" />
</div>

Lastly I took Danny’s CSS code and also changed it up a bit so that it worked in the footer of the main Beacon site.

.googleplus {position: relative; display:block; float:left; padding-right:5px; width: 35px; height: 35px;}
.googlehider {opacity:0; height:35px; width:35px; position:absolute; top:0; left:0; z-index:3; visibility: hidden;}
.mygoogle {position:absolute; top:0; left:0; z-index:2; top:1px;}

Here at beacon I am a Developer. I have always wanted to be some type of artist but as I grew up found that my technical and problem solving skills for code and programming well outweighed my artist skills. I do however still like to try and learn as much as I can and see if I can get better with practice. I was really struggling with doing things you would normally do in Photoshop in Illustrator. Not that I know what to add or where to add it but I was failing before I even reached that point because I didn’t know how to. Our new Designer Jennifer Calogero sent me a link to some tutorials that really helped me learn to accomplish these things. Seeing them and actually accomplishing them are two very different things and I think for me I actually have to do it step by step to get a feel for what I am doing. After the tutorials I definitely feel more confident in my ability to add some of these small but very important details in illustrator. I have attached my end product after playing around with a few of the items and I encourage anyone learning Illustrator to actually go do some of these tutorials as well.

The article is located at: http://vectips.com/tutorials/creating-seamless-textures/

You can download my ai file by clicking here. Please note I played around with settings after doing each tutorial so the results are not exact.