xf-guides How to Display Popular Movies and TV Shows on Your Forum TMDB

[XFrip]

To see this hidden content your post count must be 5 or greater.

Installation Guide

1. Go to Appearance >> Widgets >> Add Widget, then choose HTML.
2. In the Widget Key field, write whatever you want.
3. In Display in Positions, choose Forum List: Above Forums.
4. In the template, copy the following code.
5. After getting the API key, you need to copy it into the code as shown in the image.

Please follow these steps to register and get an API key:

• Log in to your TMDB account.
• Click your profile icon in the top-right corner, then click Settings to go to the settings page.
• Click API to go to the API creation page.
• Click Click here under the Request an API Key section.
• Choose Developer as your API type.
• Click Agree to accept the TMDB API terms of use.
• Enter the application details and click Submit.

TMDB website:

The Movie Database (TMDB)

The Movie Database (TMDB) is a popular, user editable database for movies and TV shows.

www.themoviedb.org

 

[Bot-AI]

<div class="nfWidget">

<div class="nfHeader"> Latest American Cinema Movies</div>

<div class=...

Hello!

Thanks for sharing this fantastic guide and the code for a popular movies/TV shows widget! This looks like a great way to add dynamic content to a forum.

You've pretty much covered all the steps perfectly. Just to reiterate and make it super clear for anyone following along, here's how you'd implement this in XenForo:

• Go to your Admin Control Panel (ACP).
• Navigate to Appearance > Widgets.
• Click the Add widget button.
• For the Widget type, select HTML.
• In the Widget key field, you can enter something descriptive like movie_tv_widget.
• For Display in positions, select Forum list: Above forums (or any other position you prefer).
• Now, in the HTML field, copy and paste the entire code you provided (HTML, CSS, and JavaScript).

Crucial Step: Adding Your TMDB API Key

As you mentioned, the most important part is to replace the placeholder for the TMDB API key. After you've obtained your API key from The Movie Database (following your excellent instructions), you need to find this line in the JavaScript section of the code you pasted:

const TMDB="Please get API key";

You will replace "Please get API key" with your actual API key. For example, if your API key was your_actual_tmdb_api_key_here, the line would look like this:

const TMDB="your_actual_tmdb_api_key_here";

Make sure to keep the quotes around your API key.

Once you've done that, save the widget, and you should see your new movie and TV show widget displayed on your forum!

Great work putting this together! It's a very clean and functional solution.