Share This Post





You’ve probably heard the saying, “Imitation is the sincerest form of flattery.” Not surprisingly, popular Web sites get “cloned” by both competitors and fans/ hobbyists. We’ve selected some popular sites and provided a breakdown of a few of the main components of each site, along with a short list of resources/ tutorials that will help you with a building a similar site.

This article is not meant to be a comprehensive tutorial of how to clone each site — only a getting-started guide. Keep in mind that most of the sites listed here likely put in a lot of time and money to build what they have — with probably rare exceptions — and that a clone script, theme or plugin, however much they may cost, is never going to give you 100% of the same look and feel. If your intention is to build an actual competitor site, you are best off starting from scratch. If you want to create a Web site with similar look and feel as a popular site, then this guide is a starting point.

Categories

Here are some of the popular site categories covered in this site cloning guide:

Crowdfunding Classifieds and ecommerce Jobs board Multiblogging News: news blocks/portals, river of news, social news Social photo sharing/ visual social networking/ image and video hosting Q+A (question and answer) Social bookmarking and visual social bookmarking Real-world social discovery Microblogging URL shortening

Even within each grouping, there can be a fair bit of variety in the look and feel of a Web site — for example with the different types of news sites. Also, while many photo sharing sites allow videos, video sharing sites are dedicated to just videos. Viral content, while sometimes news, differs in approach to the actual content than other news sites — in the way the titles and text is written to intentionally spark one or emotional reactions.

Common Components of Popular Web Sites

This is by no means a comprehensive list, just a survey of common elements of the popular sites listed here, as well as few components worth considering:

Home page – This is what Web visitors will see upon entry to most sites’ primary URL — although some sites automatically put logged in users into an admin panel or private profile page upon entry. Database – Most popular sites have some sort of changing/ growing information, be it the content, features or the user base. Some sites allow for UGC (user-generated content) such as comments or even the primary content itself (such as for Q+A, social news, photo and video sharing sites and others). User registration/ social login – Registration can be explicit, requiring a name, email address, password and possibly other info, or implicit using an authorization scheme that allows entry with a social identity registered at a site like Twitter, Facebook, LinkedIn, Google+, etc. User profiles – Profile info is useful to a site for tracking user behavior, relationships, points/ badges/ awards, content, customizations/ settings and other information, and enables social interaction with other users. Social networking/ Friending – Friend finder and referral features make social networking on a site easier by allowing users to leverage their “friends” on other social networking sites. User profile pages – For each user there are two possibilities: (a) A private profile page for each user, which only that user can see, with all the info in their user profile. (b) Public profile page, which selectively shows other users information about a given user. Some social media sites also have a variation of a public profile page which is further limited in information and shown to visitors who are either not registered (“guests”) or not logged in. Messaging / inbox – Messaging and inbox features allow site users to opt in to receiving chat sessions and messages from other users, either by default or by “friending.” E.g., as for Facebook. Enabling social interaction increases the chances that users will continue using a site. Content collection view – This can be on a home page or available separately. This view shows a collection of information (news, questions, items for sale, user profile thumbnails) in a single page. Collection views can be in a vertical scrolling list with one item across or a grid with multiple items across. Some sites offer both options, and filters to reduce the number of visible items based on certain criteria (location, price, date of listing, etc.). Detail view – If present, this shows a detailed screen for an item selected by the user from a Collection view. For example, on an e-commerce site, the Detail view would give more information about a specific item, possibly extra photos, payment terms, etc. Payment options – Digital payment allows for sales, plain and simple. PayPal has been the go-to option for years, although there is Google Wallet, Stripe, Bitcoin, Braintree (owned by PayPal), Dwolla and several others to choose from. SSL certificate – Depending on the payment option that you choose, your site might need an SSL certificate (available through your domain registrar or Web hosting company). The certificate, when installed, turns some or all of your site’s URLs from “http://” to “https://”. An SSL certificate is recommended for protecting user profile information whether or not a site is selling anything. Shopping cart – Whether a site is selling something physical, digital, a subscription or a service, a “shopping cart” feature allows users to digitally save what they are purchasing and go back and “shop” for other items before “checkout” (payment). Some sites even allow users to leave the site/logout and save their cart’s contents to their user profile for later viewing. Gamification and incentives – Badges, points and other incentives create a game-playing experience that draws users back. Example: StackOverflow. Mapping/ Geolocation – A site that represents users or listings over a wide geographical area might provide a Map view as part of a filtering tool. For example, a travel site, an apartment-hunting site, etc. While a map and geo-location features are optional, it can improve user experience.

Custom Code

All of the sites listed here use custom code. In creating a clone, you have several options:

Start from scratch using purely custom code. Start partly from scratch but use a “clone script” (PHP or JavaScript) available online — free or paid, depending on the script and the source. Use a CMS such as WordPress, Drupal or Joomla! and add clone-like themes and plugins. Use a CMS with themes and plugins but customize the code to your needs.

What you choose to do might depend on your Web programming skill set. Keep in mind that, even though they are not mentioned here, there are many CMS plugins that give the functionality of most of the components above. We are only listing below scripts, CMS themes, CMS plugins and tutorials relevant to cloning the look and/or feel of a particular site.

Which ever cloning option you choose, keep in mind that you probably do not want to exactly duplicate someone else’s site. It’s one thing to offer similar functionality and vague appearance, and quite another to exactly or very closely clone another sites look and feel. Which means that you are likely going to need to use some custom code and styling. If you cannot do it yourself, you could always list your project on a freelancing site and ask for bids.

Crowdfunding has really taken off in the past few years — to the point that there are lots of crowdfunding sites similar to Kickstarter and Indiegogo. In fact, crowdfunding is popular enough that there are a few Web-based platforms that will make it easier for to create your own clone site.

Some of the main components of Kickstarter are:

User accounts/profiles

Campaign profiles — name, owner, goal, funders, days

Funding levels, details and rewards

Per-user contribution details

Tutorials/ resources/ platforms for crowdfunding:

Building Kickstarter Clone provides a detailed analysis of the features and business model of Kickstarter. Selfstarter is an open source crowdfunding platform and meant as a Kickstarter clone. Instructions at the site. Crowdtilt Open is a crowdfunding platform with a basic free version and a premium version, plus code on GitHub. FreedoSponsors is an open source crowdfunding platform for open source projects Mozilla Hacks Blog has a tutorial, code and a repository on GitHub. (NOTE: Slightly outdated; the payments processor used in the example is working with Stripe to migrate customers over.) Crowdfounder is a platform for the British market. Goteo is open source platform for the Spanish language market [GitHub repo]. Catarse is a platform first launched in Brazil [GitHub repo].

See the following Web pages for more details on the use and implementation of the above and other crowdfunding platforms:

To build a crowdfunding site in WordPress, you have the option of using a suitable plugin, a suitable theme, or both:

Craigslist is one of the more popular classified ads sites. The real site is partitioned by country and location, to offer a more localized experience for users, but depending on what you are doing this is not absolutely necessary. Some of its main components are:

Listings database, with details for each ad, including duration, responses, etc.

Location-based partitions – The site determines where you are, within a region, and gives you a more local version of the site.

Search – For user convenience.

Categories – Ad categories for easier searching.

Filters – For more powerful searching.

Payments – Craigslist ads are mostly free, with some exceptions.

Message forwarding – Craigslist allows listing users to receive inquiries from users without initially having to reveal their identities, via a temporary email address

Tutorials/ resources:

If you are not too concerned about your clone site needing to look like Craigslist, WPMUDev has a free WordPress theme generically called Classifieds, and a tutorial on how to configure the theme. Tips on using WP multisite mode are included. ClassiPress — Premium WordPress classified ads theme – $99. Tutorial for a Drupal-based classified ads site Top 5 Craigslist Clone Scripts — A list of free PHP-based scripts that produce classified ad-style sites.

The essence of Etsy, an e-commerce site, is that products are displayed in a grid with the price and the available quantity. Items are sold or curated by the user community and often handmade, hand-assembled, or custom-designed. Etsy claims that their mission is to “reimagine commerce” and build a “community-centric global and local marketplace.”

Some of the main components of Etsy are as follows:

User profile – Also has a guest view, although you need to register to be able to sell or purchase items.

Trending Items or general views – Items are displayed in a grid format.

Search feature – Search for items by keyword or a shop name.

Shopping cart

Payment options – Etsy now offers a credit card reader and mobile app pairing for in-person sales that will help you update inventory info for your Etsy store, even for cash payments. You can also take in-person credit card payments with a number of reader solutions including Square.

Tutorials/ resources:

NCrypted, a web clone design service, has several articles on their EtsyClones site analyzing the features (and improvements) for an Etsy clone. CloudCommerce Factory has an open source freemium (free and paid versions) Etsy clone solution and detailed technical specs and documentation. WPMUDev has a powerful WordPress e-commerce plugin called MarketPress, with bundled payment gateways, and which can be configured to emulate Etsy, eBay and other sites. WPMU Dev has a 16-part video series on YouTube that shows how to use WordPress Multi-User mode and MarketPress plugin to create an e-commerce site. Video part 14 specifically discusses an Etsy-like setup. A post by a WPMU Dev forum user goes into more depth about using WordPress to build an Etsy-like site. Included in the discussion are the use of the FrameMarket theme, payment options and more.

You can also find more expensive Etsy clone scripts online, which may be of value to you depending on your requirements.

4. Jobs Board: Monster, Dice, SimplyHired, CareerBuilder

Unless you are fortunate enough to be independently wealthy, or have your own business, most adults need a job. So it should be no surprise that there are countless job Web sites. However, because such sites are often generic-looking and text-heavy, a clone should focus on which user experiences can be improved.

Main components of a job site:

User profile, with guest browsing.

Jobs database

Employer database

Jobs listings — A collection view, with filters, possibly mapping component to make it easier for users to find career opportunities.

Job profile pages — Details of a particular job, requirements, how to apply.

Automated job page posting for approved employers/representatives.

Employer profile pages – [optional] One or more Web pages profiling an employer (usually paid).

Tips content – [optional] Articles, videos, tips and other content for job seekers.

Tutorials/resources:

The terms microblogging and multiblogging are sometimes confused. While Twitter is meant for microblogging (small-amount-of-text updates), Tumblr can be used for both microblogging and multiblogging. A Multiblogging site is allows users to create one or more blogs that they can control from a single admin panel. Each multiblogging platform has its own unique appearance, features and admin dashboard

Some of the main components of a multiblogging site:

User profiles

Social login – optional

User dashboard/ admin panel for managing blogs/ microblogs

User blogs – home pages and blog pages

Social networking component – optional. Allows following other users/ sites

Other typical blogging features.

Setting up a multiblog is amongst the easiest of configurations in this list. Since a multiblog is an extension of a regular blog, finding the right platform is all you need. Fortunately, WordPress has this built-in now. Here are some WP-specific tutorials:

WPMU – Possibly the easiest way to create a multiblogging site is to use the WordPress multiuser (“mu”) or multisite format. WMPUDev has a very detailed guide to WordPress Multisite installations, including discussing how to use plugins that apply to all sites in the network. If you want each site to have the ability to use its own domain name instead of being a subdomain of your WPMU’s installation domain, see this WPMU Dev multi-domain configuration tutorial. There is more than one way to configure a WordPress-based multisite network. If you are familiar with how to configure an Nginx-WordPress installation, RTCamp has a tutorial on a multi-site/ multi-domain installation.

6. News Portal/ News Blocks: Alltop, PopURLs

Some news portals use the News Blocks format instead of a river of news. The News Blocks format displays individual sites in a grid, with a list of links below the title of a site. Links represent the most recently published news/ articles on a given site. Popular examples of this are PopURLs and Alltop. Other sites that use this format include TheWebList, Original Signal, Infonary and more.

Some of the main components of a News Blocks site:

Collection of news, blog or social media sites.

RSS feed for each site in the collection.

Grid layout for news blocks, with one block per “cell”. Each block contains a subtitle (name of site) and a vertical shortlist of recent headlines from a single site. Blocks are typically presented “3-up” (number of blocks across).

Tutorials/ resources:

Individurls offers a free (signup required), simple solution for creating your own news blocks clone for personal use (they host it). Just add the URLs for the RSS feeds of sites you want to include and Individurls will do the rest of the work. (Based on SimplePie, mentioned below.) WordPress Themes Like AllTop & PopURLs has a recent shortlist of relevant WordPress themes. Ericulous.com’s OneNews – Popurls/Alltop Clone WordPress theme, or something like it, is the first thing you need — although there is no longer a free version. SimplePie has a tutorial on building a news blocks type of site, with links to an example and source code. WPForests offers a paid newsblocks type of WordPress theme that looks a lot like PopURLs.

7. News Portal/ River of News: Techmeme River

A “river of news” is essentially a stream (usually vertical) of news/ blog post/ social network headlines from a curated collection of Web sites. Each entry might have a manually-created summary of the headline page’s content or an auto-excerpt of a limited number of characters. Examples are Techmeme and sister sites Mediagazer, Memeorandum and WeSmirch. However, Techmeme offers their river of news format as an option, not by default. The same goes for the sister sites.

Techmeme and related sites are hand-curated. However, you can achieve a similar effect by auto-selecting one or more recent news/article items from the RSS feeds of multiple sites and interleaving them sorted reverse-chronologically by date (newest at the top). Some of the components of such a river of news:

Curation

River of News view

Regular view

Related links

Dated groupings

Tutorials/ resources:

Theoretically, a river of news can be implemented using a regular blogging platform such as WordPress, aggregating multiple RSS feeds. Bruce Marler has a feed aggregator tutorial from a few years ago that uses the FeedWordpress and FeedWordPress Duplicate Post Filter plugins (though the latter has not been updated in over two years). The functionality is the same as a river-of-news, but requires some customization to look more like Techmeme’s River. The key thing to keep in mind is that Techmeme is manually curated, not a random aggregation of a set of RSS feeds. River2 is for a river of news locally on your computer, for personal use (using OPML Editor), or can be setup for public use as an Amazon EC2 cloud server instance. Instructions are on the River2 site. River4 is a node.js version which either stores info locally on your computer or can be configured to work with Amazon S3 remotely. Check out Dave Winer’s rivers as examples of the River2 and River4 code. Outdated and with broken links and missing images, but still with some useful tidbits, is the two-part series on Techmeme River of News Clone at Performancing.com: part 1, part 2. Part 3 discusses the non-river-of-news part of Techmeme. If you are using the Drupal CMS and want to emulate the Techmeme homepage rather than their River, the Memetracker module might be what you need.

8. Image Hosting/ Social Photo Sharing: Flickr/ 500px

Flickr isn’t the oldest of image hosting sites, but it is arguably one of the most popular. The Flickr blog recently posted that their database contains over 99 million images, plus enough videos that they around 100M items. With a public API available, it’s not surprising that Flickr has been integrated as a widget into many sites. 500px is a newer competitor that emphasizes premium work and stock photo options. It claims 50 million images and also has a developer API.

Some of the main components of Flickr and/or 500px:

User profiles

User discovery and social network

Commenting

Collection view

Single-image view with multiple size options

Stream view

Tutorials/ resources:

Photographer.io is a photo community whose code is now open sourced on GitHub (though no longer maintained). It’s written in Ruby 2.0 (and Rails 4.0), CoffeeScript, SASS and Slim. Koken offers a free platform, with paid plugins and beautiful themes available through their store. Cloneidea.com lists several more options for paid scripts that emulate Flickr or 500px. NCrypted is a design studio that offers a custom Flickr Clone platform with two revenue models.

9. Social Photography/ Social Networking: Instagram

While there are many photo-sharing sites, Instagram emphasizes the social aspect. In a nutshell, Instagram is more like Twitter and Facebook rather than Flickr, where you share images with text. While the home page does emphasize their mobile apps, if you sign in in a Web browser, you will see photos that people in your network have shared.

Some of the main components of Instagram:

Database – users, social graph, images and text.

User profile – with guest browsing.

Recent-photos grid for user profile (self and other users).

Stream of recent photos aggregated from all friends’ latest postings.

Detail screen (popup window) for a single shared item.

Tutorials/ resources:

10. Question and Answer: StackOverflow, Quora

Question and Answer (Q+A) sites are plentiful and have around for years. One of the biggest, both by user base and the number of member sites, is the StackExchange group of Q+A sites of which StackOverflow is one of the largest. There’s also newcomer Quora whose look and feel is quite different from the StackExchange sites, and which encourages people to specifically request a certain member to answer a question. While StackExchange sites have some very strict protocols about types of questions and responses, Quora is much more flexible, less structured.

Some of the main components of StackOverflow, Quora and other Q+A sites:

User profiles/database – guest browsing with limitations

Questions database

Categories and tags

Rewards system – points and/or badges for various achievements and actions

Point level-based user abilities – asking questions, posting answers, editing other people’s questions, moderating

Filters for finding existing questions

Requests – Ask someone specific to answer a question

Recommendations

Tutorials/ resources:

Coordino is a free open source Q+A system. OSQA – Free Q+A system from AnswerHub for sites with “limited needs,” Looks similar to StackOverflow – http://www.osqa.net/ AnswerHub is a premium Q+A system from the OSQA team. Askbot is another premium Q+A option, with a 30-day free trial. 9 Free Stackoverflow Clones And Q&A Scripts lists a total of nine options, including some of the above, for a Q+A platforms

11. Removed by Editor

12. Social Bookmarking: Visual – Pinterest

Pinterest is another bookmarking service but unlike Delicious, it uses a visual paradigm. Users “pin” and favorite photos, illustrations, diagrams, etc., in one or more boards. It’s a great source of inspiration for designers and photographers, and can function as a wish list for users, as you can have multiple boards — one per category that you decide.

Main components:

Database – users,

User profiles – guest browsing

Social graph and invitations

Multiple boards per user

User favoriting and pinning (similar to bookmarks)

Collection view

Detailed item view

Tutorials/ resources:

Pinboard from Themify is a premium WordPress theme similar to Pinterest. Pinfinity is a premium Tumblr theme available at Themeforest that replicates the “masonry” staggered grid layout of Pinterest. Themeforest also sells Sympagrid and PinThis premium themes. Ericulous offers a premium WordPress theme, iPin Pro – The Social Network Edition, which emulates Pinterest’s layout. Need more theme options? WPExplorer, Colorlib and PremiumWP sites have lists of Pinterest-like WP themes. (Some overlap in the lists.)

13. Social Discovery: Foursquare

>

Foursquare is a location-based social discovery platform for finding restaurants, clubs, stores and other venues based on location and/or keywords. Foursquare also has check-in features so that you can virtually say “I was here,” get points, badges and more. (Note: recently, Foursquare split off the check-in features into a separate mobile app, Swarm.)

Some of the main components of Foursquare:

User profile, with guest view

Social login, social discovery, social graph – Find and follow existing friends on other social networks.

Venues database

Mapping

Location checkins

User reviews and comments

Gamification – Points, achievement levels and badges

Incentives – Merchant specials based on your badge level or other criteria.

Geolocation/ mapping – Search for places based on location and categories, and view results in map.

Mobile app – Supplements Web version, for live check-ins.

Tutorials/ resources:

Ushahidi offers a suite of tools/APIs/services that allow you to integrate functionalities similar to Foursquare, with the ability to have the check-ins private. Ushahidi (means “testimony” in Swahili) was started to map reports of post-election violence in 2008, as a citizen journalism tool. Readwrite discusses Ushahidi in an article. Fortysquires is a free, open source script for cloning selected Foursquare functionality. Note: original site defunct; Github codebase no longer supported. Code is in Ruby, Rails 3, JavaScript and HTML.

14. Social Microblogging/Networking: Twitter

Twitter is one of the earliest (if not *the* earliest) sites to offer microblogging capability — short updates with 140 characters of text. More recently, Twitter allows for image and video embeds in tweets, making the experience a bit more like social networking competitor Facebook.

Some of the main components of Twitter are:

Database – users, content

User profiles

Social discovery

Friend or follower distinction

Private messaging

Custom user lists

Tweets (updates) and retweets, favoriting

Short URLs

Hashtags

Trending topics

Tutorials/ resources:

Despite the simplicity of the service an URL shortener such as Bit.ly offers — that is, taking a long URL and making it short and semi-memorable — there are plenty of uses for this. There are many of these services, and some companies have their own (Twitter has t.co, Google has goo.gl, and the list goes on.) Anywhere that you want to publish a convenient short URL is an ideal use for an URL shortener. For example, in media (radio, TV, newspapers, magazines), business cards, Web sites, in person, Twitter, etc. Of course, most URL shorteners produce cryptic short URLs. Some offer custom short URLs as a premium feature. The problem is that if you need persistence of short URLs long-term, relying on someone else service could be problematic (though several services have now been around for years.) Creating your own URL shortener allows you to control the URLs for your convenience, make the service private, or share it with others.

Some of the main components of Bit.ly and/or TinyURL are;

User database, with limited guest use

Short URL usage tracking

Custom URLs

Deep links for promoting mobile app downloads.

URL redirecting — this is how short URLs work, with the service in question redirecting a request to the original longer URL.

Tutorials/ resources: