.
avatar

Why Google Custom Search Engine is a Great Choice

| March 20th, 2013
in Freebies, Search Engines, Web Development



There are many third-party search engines you can choose from for your website. Some third-party installations and upkeep are more involved than others. Some offer free limited search capabilities and others are paid with extra features. These all depend on what your needs are for the website.

To help narrow it down, Google has provided an easy way to search your site, be it free or paid with custom search. The free version comes with Google ads that relate to your site, but not limited in other areas like other third-party search engines. If you have a tax-exempt business website according to Google’s guidelines, you have the option to turn off the ads. The paid search is also very affordable and allows you to turn off the ads.

You can customize the whole search experience and everything needed through the Google Custom Search engine site. It requires very minimal setup to your website with simple copy and paste code. With Google hosting the search engine, you don’t have to setup any background files or plugins on your own web server and maintain it.

It works well for search engine optimization and your website rankings, since it gives the ability to work with Google Analytics. You can see what people are searching for on your website to help improve or update it and get maximum results.

Check out the Google Custom Search.



Tags: , ,
Posted in Freebies, Search Engines, Web Development | 1 Comment »
avatar

Animate with jQuery and CSS3

| February 12th, 2013
in Freebies, Web Development



There are a lot of great effects to choose from that use jQuery and CSS3. This one in particular is neat in that you can animate your elements individually with many pre-built in options or you can create your own custom build to tailor to your needs.

These work great for home pages, sliders and any other places you may want to add animations to your website.

Some of the effects include bounce, fade, pulse, rotate, shake, swing, wobble and many more. Many of the effects also have additional options for different animations, such as rotate in or rotate in down and left.

Check out animate.css plugin for download and demos here.



Tags: , , ,
Posted in Freebies, Web Development | No Comments »
avatar

How to Pull WordPress Posts into External Website

| January 14th, 2013
in Freebies, Other, Web Development



How to pull WordPress posts from external siteI’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.



Tags: , , , , , , ,
Posted in Freebies, Other, Web Development | 1 Comment »
avatar

Using the Free Social Media Vector Icon Set as a Source File for Other Icon Sets

| April 9th, 2012
in Creative Design, Freebies, Other, Web Development



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.

Greyscale

noise in background

words in background

Pinstripe

Gradient

No Background Colored

No Background

Round Styled

Round Color

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.



Tags: , , , , , , , , , , , , , , ,
Posted in Creative Design, Freebies, Other, Web Development | 3 Comments »
avatar

Free Social Media Vector Icon Set (including pinterest and google plus!)

| March 6th, 2012
in Creative Design, Freebies, Other, Web Development



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


Tags: , , , , , , , , , ,
Posted in Creative Design, Freebies, Other, Web Development | 7 Comments »
RSS

  • Bookmarks



  • Enter your email address to receive Beacon Blog updates:



  • Archives