Web Analytics

Clone 15 Well-Known Sites With These Tutorials

Clone 15 Well-Known Sites With These Tutorials

Tutorials

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:

  1. Crowdfunding
  2. Classifieds and ecommerce
  3. Jobs board
  4. Multiblogging
  5. News: news blocks/portals, river of news, social news
  6. Social photo sharing/ visual social networking/ image and video hosting
  7. Q+A (question and answer)
  8. Social bookmarking and visual social bookmarking
  9. Real-world social discovery
  10. Microblogging
  11. 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:

  1. 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.
  2. 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).
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.).
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. Gamification and incentives – Badges, points and other incentives create a game-playing experience that draws users back. Example: StackOverflow.
  14. 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:

  1. Start from scratch using purely custom code.
  2. Start partly from scratch but use a “clone script” (PHP or JavaScript) available online — free or paid, depending on the script and the source.
  3. Use a CMS such as WordPress, Drupal or Joomla! and add clone-like themes and plugins.
  4. 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.

1. Crowdfunding: Kickstarter

kickstarter

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:

  1. Building Kickstarter Clone provides a detailed analysis of the features and business model of Kickstarter.
  2. Selfstarter is an open source crowdfunding platform and meant as a Kickstarter clone. Instructions at the site.
  3. Crowdtilt Open is a crowdfunding platform with a basic free version and a premium version, plus code on GitHub.
  4. FreedoSponsors is an open source crowdfunding platform for open source projects
  5. 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.)
  6. Crowdfounder is a platform for the British market.
  7. Goteo is open source platform for the Spanish language market [GitHub repo].
  8. 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:

  1. IgnitionDeck is a WordPress-based crowdfunding platform (plugin-based) that comes in free and premium flavors.
  2. Fundify is a premium (paid) WordPress theme that integrates with the IgnitionDeck plugin.
  3. Backer – The Modern WordPress Crowdfunding Theme is a premium (paid) WP theme for crowdfunding.
  4. How To Build A Crowdfunding Website With WordPress provides a list of five WP themes or plugins (including IgnitionDeck, Backer and Fundify, mentioned above).
  5. 8 Best Crowdfunding Solutions (Plugins & Themes) for WordPress has some overlap with the above lists, with a few more options.
  6. 10+ Best Crowdfunding WordPress Themes lists still more WP crowdfunding themes, mostly premium.
  7. Crowdfunding is an extension for the Joomla! CMS.

2. Classifieds: Craigslist

craigslist

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:

  1. 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.
  2. ClassiPress — Premium WordPress classified ads theme – $99.
  3. Like Craigslist — Tutorial for ClassiPress WordPress theme.
  4. Tutorial for a Drupal-based classified ads site
  5. Top 5 Craigslist Clone Scripts — A list of free PHP-based scripts that produce classified ad-style sites.

3. Ecommerce: Etsy

etsy

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:

  1. Fatbit has a detailed analysis of Etsy, including the business model, features, competitors.
  2. NCrypted, a web clone design service, has several articles on their EtsyClones site analyzing the features (and improvements) for an Etsy clone.
  3. CloudCommerce Factory has an open source freemium (free and paid versions) Etsy clone solution and detailed technical specs and documentation.
  4. 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.
  5. 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.
  6. 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

monster

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:

  1. Many of the top job sites have an affiliate program that includes a Web widget (or suitable code) which can be embedded into your Web pages. This is the simplest way to have a jobs board and possibly earn revenue. Run a Web search for job board affiliate programs for options, or check out these lists of career affiliate programs as a starting point.
  2. 20 Best Job Board Themes and Plugins for WordPress To Create Awesome Job Sites is recent list of plugins and themes for job boards. The list includes some very fresh, attractive themes not listed in the other resources below — some free, some paid. The list also includes some “freelance job board” templates.
  3. How To Create Your Own Job Board Using WordPress discusses several WordPress themes and plugins.
  4. JobRoller is a premium WordPress jobs website theme – $99.
  5. Smart Job Board is a fairly pricey solution that has accompanying paid templates, plugins and mobile apps.

5. Multiblogging: WordPress.com, Blogger, Tumblr

wordpress

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:

  1. 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.
  2. 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.
  3. 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

alltop

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:

  1. 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.)
  2. WordPress Themes Like AllTop & PopURLs has a recent shortlist of relevant WordPress themes.
  3. 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.
  4. SimplePie has a tutorial on building a news blocks type of site, with links to an example and source code.
  5. WPForests offers a paid newsblocks type of WordPress theme that looks a lot like PopURLs.

7. News Portal/ River of News: Techmeme River

techmeme

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:

  1. 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.
  2. 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.
  3. River4 is a node.js version which either stores info locally on your computer or can be configured to work with Amazon S3 remotely.
  4. Check out Dave Winer’s rivers as examples of the River2 and River4 code.
  5. 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.
  6. 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

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:

  1. 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.
  2. Koken offers a free platform, with paid plugins and beautiful themes available through their store.
  3. Cloneidea.com lists several more options for paid scripts that emulate Flickr or 500px.
  4. NCrypted is a design studio that offers a custom Flickr Clone platform with two revenue models.

9. Social Photography/ Social Networking: Instagram

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:

  1. Easygram is a premium WordPress plugin from Obox Themes that creates photo galleries which can optionally include your Instagram photos. Obox indicates that Easygram works with any WP theme.
  2. Ultimate instagram style responsive wordpress themes – 2015 lists some recent premium WordPress themes that emulate Instagram.
  3. 20 WordPress Themes Instagram has an even longer list of premium themes, though a few items are no longer available.
  4. Instamate is a WordPress theme from Graph Paper Press that offers optional Instagram image integration.
  5. Stacked is a theme for the Tumblr blogging platform which lets you to integrate images from Instagram, Flickr and Dribbble into a grid or “masonry” (staggered grid) layout.
  6. If you are adventurous, Hack.hands offers a detailed tutorial for building an Instagram clone using Node.js, AngularJS, MongoDB and other technologies, with code available at GitHub.

10. Question and Answer: StackOverflow, Quora

stackoverflow

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:

  1. Coordino is a free open source Q+A system.
  2. OSQA – Free Q+A system from AnswerHub for sites with “limited needs,” Looks similar to StackOverflow – http://www.osqa.net/
  3. AnswerHub is a premium Q+A system from the OSQA team.
  4. Askbot is another premium Q+A option, with a 30-day free trial.
  5. 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. Social Bookmarking: Delicious

delicious

There are a number of different bookmarking services. Delicious is one of the early options and is a more sophisticated way to keep tracking of a set of web pages. A link can be saved with tags to categorize the web page content, as well as comment or annotation. Links can be saved privately or made public.

Somme of the main components of Delicious are:

  • Database — users and bookmarks
  • User profiles
  • Social graph and social discovery (find friends to follow)
  • Tags
  • Bookmarks
  • Discovery and trending links
  • Settings

Tutorials/ resources:

  1. Shaarli is a personal Delicious clone with basic features
  2. Shaarli configuration tutorial.
  3. Charles Wood offers a 24-minute video tutorial that builds a Delicious clone using Ruby, Compass, SASS, and the 960 Grid system.
  4. Ncrypted, a Web development and design studio, offers a paid custom Delicious clone script.
  5. ReadWrite reviews three options for a personal Delicious alternative, although some of the options have code bases that are no longer supported.
  6. Selficious – If you’re adventurous, this code uses App Engine and Tornado and has not been updated in five years.

12. Social Bookmarking: Visual – Pinterest

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:

  1. Pinderful is a free PHP-based system that has similar look and feel as Pinterest, and can be customized to not just images but video.
  2. Pinboard from Themify is a premium WordPress theme similar to Pinterest.
  3. 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.
  4. Ericulous offers a premium WordPress theme, iPin Pro – The Social Network Edition, which emulates Pinterest’s layout.
  5. 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>

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:

  1. 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.
  2. Readwrite discusses Ushahidi in an article.
  3. 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

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:

  1. If you are running WordPress, the P2 theme is the simplest way to achieve a Twitter-like clone.
  2. If for any reason you need to start from scratch, IBM developerWorks offers a tutorial for using PHP and MySQL to build Twitter-like microblogging into your Web site or Web app.
  3. Pixellar discusses a clone script, PHP Social Microblogging, which will make a site look similar to Twitter. (Note: the other scripts discussed in the article are to replicate the look of Facebook.)
  4. Might be outdated: http://www.websitehomework.com/how-to-create-website-like-twitter.html
  5. Firefeed is an open source Twitter clone that uses the Firebase backend Web service (not free). Codebase at GitHub.

15. URL Shorteners: Bit.ly, TinyURL

bitly

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:

  1. Stretch Projects has a five-part video tutorial series on YouTube about creating your own bit.ly clone from scratch.
  2. From a few years back, Kvz.io offers code and a tutorial on creating YouTube-like IDs with PHP/ Python/ JavaScript/ Java/ SQL.
  3. About as old is Saush.com’s tutorial on cloning TinyURL with 40 lines of Ruby and Sinatra (alternative to Rails), with code on GitHub. Caveat: last update six years ago (at time of writing).
  4. If you prefer PHP, another old open source code base (last updated two years ago) is Brian Cray’s PHP URL Shortener on GitHub.