Demo Mode

Find Amazing Places
from Instagram Reels

We use Instagram's embed functionality to display Reels, then automatically extract location information from captions to help users discover and save places.

πŸ“· Powered by Meta oEmbed API

Try It Out

See how ReelsPlace will work with Instagram Reel URLs:

ℹ️ Demo Mode: URL input will be enabled after Meta oEmbed Read approval. Currently showing a pre-loaded example Reel to demonstrate the integration.

How We Use Meta oEmbed

ℹ️ Integration Overview

ReelsPlace uses Meta's oEmbed API to provide a seamless experience:

  • Display Instagram Content: We fetch embed HTML from Meta's oEmbed endpoint to properly display Reels with attribution
  • Extract Location Data: We analyze the caption text to find place names and addresses
  • User Benefit: Users can discover and save locations featured in Instagram Reels
1

User Pastes URL

User copies an Instagram Reel URL and pastes it into our app

2

Call oEmbed API

We call Meta's oEmbed endpoint to fetch embed HTML and metadata

3

Display Reel

Instagram Reel is displayed with proper attribution using embed HTML

4

Extract Location

We parse the caption to extract place names and addresses

Live Demo

⚠️ Important - Demo Note

This demo uses demonstration data because we don't have Meta oEmbed Read permission yet.

After approval, our backend will automatically call Meta's oEmbed API to fetch real caption text and extract actual location information.

This follows Meta's official guidance for demonstrating features that require API permissions during the review process.

Below is a real Instagram Reel embedded using Instagram's embed widget, demonstrating our integration:

βœ… Instagram Reel Successfully Embedded

πŸ“Ί Instagram Reel Preview

View this post on Instagram

πŸ“ Extracted Location Information

Example output (demonstration data):

⚠️ Mock Data - For Demonstration
ν‚€μžλ‹ˆμ•„ μ„œμšΈ
μ„œμšΈ μ†‘νŒŒκ΅¬ μ˜¬λ¦Όν”½λ‘œ 240 ν‚€μžλ‹ˆμ•„ μ„œμšΈ
How it will work after approval:
1. Caption text will be analyzed for Korean address patterns
2. Place names and addresses will be extracted
3. Users can save these locations to their collection
4. Locations can be opened in map applications

πŸ”§ Technical Implementation

Our production backend code (Java Spring Boot):

@Service
public class InstagramParsingService {

    @Value("${instagram.app-id}")
    private String appId;

    @Value("${instagram.app-secret}")
    private String appSecret;

    public InstagramEmbedDto getOembedData(String reelUrl) {
        String apiUrl = "https://graph.facebook.com/v22.0/instagram_oembed";
        String accessToken = appId + "|" + appSecret;

        RestTemplate restTemplate = new RestTemplate();
        UriComponentsBuilder builder = UriComponentsBuilder
            .fromHttpUrl(apiUrl)
            .queryParam("url", reelUrl)
            .queryParam("access_token", accessToken);

        // Call oEmbed API
        ResponseEntity response =
            restTemplate.getForEntity(builder.toUriString(),
                                     OEmbedResponse.class);

        // Parse HTML to extract caption
        String caption = extractCaptionFromHtml(
            response.getBody().getHtml()
        );

        // Extract location from caption
        LocationInfo location = parseLocation(caption);

        return InstagramEmbedDto.builder()
            .embedHtml(response.getBody().getHtml())
            .location(location)
            .build();
    }
}

The demo above uses Instagram's public embed widget for demonstration purposes. In production, our Java backend calls Meta's oEmbed API endpoint after approval.