Make an Instagram Hashtag Generator Website & Android App 🚀
Build a powerful tool that suggests trending hashtags to help Instagram posts go viral. This guide includes the complete website code, Android app conversion steps, and monetization ideas.
How the Hashtag Generator Works
Our tool will take a keyword (e.g., "travel") and instantly return a list of popular, related Instagram hashtags. It uses a built‑in hashtag database (JavaScript array) that you can easily expand. Users can copy the hashtags in one click and paste them directly into their Instagram posts.
For more dynamic suggestions, you can later connect a free hashtag API (like RapidAPI). But the built‑in database works offline and is fast, making it perfect for a lightweight website or app.
Build the Hashtag Generator Website (Full Source Code)
Copy the following complete HTML file. It includes a stylish design, input field, hashtag database, and a one‑click copy button. Save it as index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Hashtag Generator</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #fafafa; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }
.container { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; max-width: 500px; width: 100%; text-align: center; }
h1 { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.2rem; margin-bottom: 10px; }
.search-box { display: flex; gap: 10px; margin: 20px 0; }
input { flex: 1; padding: 14px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 1rem; outline: none; transition: border 0.3s; }
input:focus { border-color: #E1306C; }
button { padding: 14px 24px; background: linear-gradient(45deg, #f09433, #dc2743); color: white; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform 0.2s; }
button:hover { transform: scale(1.02); }
.hashtags { margin: 20px 0; text-align: left; background: #f9fafb; padding: 15px; border-radius: 12px; min-height: 60px; word-break: break-all; }
.copy-btn { margin-top: 10px; padding: 10px 20px; background: #333; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; }
.copy-btn:hover { background: #555; }
</style>
</head>
<body>
<div class="container">
<h1>📸 InstaTag Generator</h1>
<p>Enter a topic to get the best hashtags</p>
<div class="search-box">
<input type="text" id="keyword" placeholder="e.g., travel, food, fitness">
<button onclick="generateHashtags()">Generate</button>
</div>
<div class="hashtags" id="output">Your hashtags will appear here...</div>
<button class="copy-btn" onclick="copyHashtags()">📋 Copy All Hashtags</button>
</div>
<script>
// Hashtag database (you can add more categories)
const hashtagDB = {
travel: ["travelgram", "wanderlust", "travelphotography", "instatravel", "explore", "adventure", "nature", "travelblogger", "world", "vacation"],
food: ["foodie", "foodporn", "instafood", "yummy", "delicious", "homemade", "foodphotography", "recipe", "cooking", "foodstagram"],
fitness: ["fitness", "gym", "workout", "fitfam", "bodybuilding", "health", "motivation", "exercise", "fitnessjourney", "gymlife"],
fashion: ["fashion", "style", "ootd", "fashionista", "fashionblogger", "instafashion", "trendy", "lookbook", "streetstyle", "whatiwore"],
tech: ["tech", "technology", "innovation", "gadgets", "ai", "startup", "coding", "developer", "software", "programming"],
default: ["instagram", "instagood", "photooftheday", "like4like", "follow4follow", "viral", "trending", "explorepage", "instadaily", "picoftheday"]
};
function generateHashtags() {
const keyword = document.getElementById('keyword').value.trim().toLowerCase();
const outputDiv = document.getElementById('output');
if (!keyword) {
outputDiv.innerHTML = '⚠️ Please enter a topic!';
return;
}
// Search for matching category or use default
const tags = hashtagDB[keyword] || hashtagDB.default;
// Add the keyword itself as a tag
const allTags = [keyword, ...tags];
const hashtagString = allTags.map(tag => `#${tag}`).join(' ');
outputDiv.innerHTML = hashtagString;
}
function copyHashtags() {
const text = document.getElementById('output').innerText;
if (text && text !== 'Your hashtags will appear here...') {
navigator.clipboard.writeText(text).then(() => {
alert('Hashtags copied to clipboard!');
});
} else {
alert('Generate hashtags first!');
}
}
</script>
</body>
</html>
Open this file in any browser. Type a topic (like "fashion" or "travel") and click Generate – you'll instantly see a list of popular hashtags. Click "Copy All Hashtags" to copy them to your clipboard.
hashtagDB object to add your own categories and tags. The more specific your tags, the more useful the tool becomes.
Optional: Use a Free Hashtag API for Dynamic Suggestions
For a more professional tool, you can fetch real‑time trending hashtags from a free API. For example, you can use the Hashtagy API (free tier available on RapidAPI). Replace the hardcoded database with an API call. Here's how you would modify the JavaScript:
// Replace generateHashtags function
async function generateHashtags() {
const keyword = document.getElementById('keyword').value.trim();
const outputDiv = document.getElementById('output');
if (!keyword) return;
const url = `https://hashtagy-generate-hashtags.p.rapidapi.com/v1/instagram/tags?keyword=${encodeURIComponent(keyword)}`;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'YOUR_API_KEY',
'X-RapidAPI-Host': 'hashtagy-generate-hashtags.p.rapidapi.com'
}
};
try {
const response = await fetch(url, options);
const data = await response.json();
const tags = data.tags.map(tag => `#${tag}`).join(' ');
outputDiv.innerHTML = tags;
} catch (error) {
outputDiv.innerHTML = 'Error fetching hashtags. Try again.';
}
}
Sign up for a free RapidAPI account, subscribe to the Hashtagy API, and replace YOUR_API_KEY with your actual key. This gives you thousands of up‑to‑date hashtags.
Turn Your Website into an Android App (WebView)
The fastest way to create an Android app from your hashtag generator is by using a WebView. It wraps your existing HTML file into a native app. Below is the essential code for Android Studio.
package com.yourpackage.hashtaggen;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.loadUrl("file:///android_asset/index.html");
}
}
Place your index.html file in the assets folder of your Android project. Also add internet permission in AndroidManifest.xml if you're using an API. Build the APK and you have a working app!
Monetize Your Generator with Google AdMob
Integrate Google AdMob into your website or Android app to earn revenue from banner and interstitial ads. For the website, simply paste the AdMob ad code into your HTML. For the Android app, use the Google Mobile Ads SDK.
Example of adding a banner ad to the WebView app (modify activity_main.xml):
<LinearLayout ... >
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-xxxxxxxxxxxxxx/yyyyyyyyyy" />
</LinearLayout>
Initialize the Mobile Ads SDK in your MainActivity. You can also use AdSense for the website version. A hashtag generator can attract thousands of daily users, making ad revenue a solid passive income stream.
How to Make Your Tool Go Viral
- Share on social media: Create a short demo video showing how the generator works and post it on Instagram Reels, TikTok, and YouTube Shorts.
- Target influencers: Offer the tool to Instagram influencers for free – they'll share it with their followers.
- SEO: Optimize your website title and meta description for keywords like "Instagram hashtag generator free".
- Content marketing: Write blog posts about Instagram tips and embed your generator.
- App Store Optimization (ASO): If you publish on Google Play, use relevant keywords and a catchy icon.
Consistency is key. Regularly update your hashtag database with trending tags to keep users coming back.
Launch Your Hashtag Generator Checklist
- Website created and tested in browser
- Hashtag database populated with relevant tags
- Optional API integration working
- Android app built and tested on device
- AdMob / AdSense integrated
- App published on Google Play (or direct APK shared)
- Social media promotion started
Key Takeaways
📲 Start Building Your Hashtag Generator Today
Copy the full website code, add your own hashtag database, and turn it into an Android app. It's a perfect tool to build your developer portfolio or earn passive income.
Join the tech debate...
We love a good discussion, but please keep it respectful and relevant to the topic. Vulgarity, personal attacks, and spam will be removed. Let’s keep the community smart, helpful, and welcoming to all tech fans!