Templates HTML para Facebook API

📌 ¿Qué contiene este documento?

Los 5 templates HTML necesarios para completar la integración con Facebook API en Django:

base.html - Template base reutilizable
login.html - Página de inicio de sesión
dashboard.html - Panel principal del usuario
publicar.html - Formulario de publicación
error.html - Página de errores

📁 Estructura de Carpetas

⚠️ IMPORTANTE: Antes de copiar los templates, debes crear la estructura de carpetas correcta.

facebook_integration/           # Carpeta raíz del proyecto
├── facebook_integration/        # Carpeta de configuración
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── social_app/                  # Tu aplicación Django
│   ├── migrations/
│   ├── templates/                 # ← CREAR ESTA CARPETA
│   │   ├── base.html             # ← Template 1
│   │   ├── login.html            # ← Template 2
│   │   ├── dashboard.html        # ← Template 3
│   │   ├── publicar.html         # ← Template 4
│   │   └── error.html            # ← Template 5
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── views.py
│   └── urls.py
├── venv/                        # Entorno virtual
└── manage.py

Comandos para crear la carpeta templates:

# Windows (CMD):
cd social_app
mkdir templates

# Mac/Linux:
cd social_app
mkdir templates

# O desde Visual Studio Code:
# Clic derecho en carpeta 'social_app' → Nueva Carpeta → Escribir 'templates'

1 TEMPLATE 1: base.html

📄 Archivo: social_app/templates/base.html

Descripción: Template base que contiene el diseño común (header, footer, estilos CSS). Todos los demás templates heredan de este.

<!-- ===== social_app/templates/base.html ===== -->

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Integración Facebook{% endblock %}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1877f2 0%, #42b72a 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        header {
            background: linear-gradient(135deg, #1877f2 0%, #42b72a 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        header h1 { font-size: 2.5em; margin-bottom: 10px; }
        main { padding: 40px; min-height: 400px; }
        .btn {
            display: inline-block;
            background: #1877f2;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 8px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .btn:hover { background: #42b72a; }
        .btn-facebook {
            background: #1877f2;
            padding: 12px 24px;
            font-size: 18px;
            font-weight: bold;
        }
        .btn-facebook:before { content: "📘 "; }
        footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .alert {
            padding: 15px;
            margin: 20px 0;
            border-radius: 8px;
            border-left: 5px solid;
        }
        .alert-success {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
        }
        .alert-error {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        .form-group textarea {
            width: 100%;
            min-height: 150px;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
        }
        .form-group textarea:focus {
            outline: none;
            border-color: #1877f2;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🌐 {% block header %}Integración con Facebook{% endblock %}</h1>
            <p>Sistema de Gestión de Publicaciones Sociales</p>
        </header>
        
        <main>
            {% block content %}
            <!-- El contenido específico de cada página va aquí -->
            {% endblock %}
        </main>
        
        <footer>
            <p>© 2026 - Universidad Tecnológica de Hermosillo</p>
        </footer>
    </div>
</body>
</html>

2 TEMPLATE 2: login.html

📄 Archivo: social_app/templates/login.html

Descripción: Página de inicio con botón "Iniciar sesión con Facebook".

<!-- ===== social_app/templates/login.html ===== -->

{% extends 'base.html' %}

{% block title %}Iniciar Sesión con Facebook{% endblock %}

{% block header %}Bienvenido al Sistema{% endblock %}

{% block content %}
<div style="text-align: center; padding: 50px 20px;">
    <h2 style="color: #1877f2; margin-bottom: 20px;">
        Conéctate con tu Cuenta de Facebook
    </h2>
    
    <p style="font-size: 18px; color: #666; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto;">
        Para utilizar este sistema, necesitas autorizar la conexión con tu cuenta de Facebook.
        Esto nos permitirá publicar contenido en tu nombre y obtener estadísticas de tus publicaciones.
    </p>
    
    <a href="{% url 'facebook_login' %}" class="btn btn-facebook">
        Iniciar Sesión con Facebook
    </a>
    
    <div style="margin-top: 40px; padding: 20px; background: #f0f2f5; border-radius: 10px; max-width: 500px; margin-left: auto; margin-right: auto;">
        <h3 style="color: #333; margin-bottom: 15px;">🔐 Seguridad y Privacidad</h3>
        <ul style="text-align: left; color: #666; line-height: 1.8;">
            <li>Solo solicitamos los permisos necesarios</li>
            <li>No almacenamos tu contraseña de Facebook</li>
            <li>Puedes revocar el acceso en cualquier momento</li>
            <li>Tu información está protegida con cifrado</li>
        </ul>
    </div>
</div>
{% endblock %}

3 TEMPLATE 3: dashboard.html

📄 Archivo: social_app/templates/dashboard.html

Descripción: Panel principal que muestra información del usuario, estadísticas y publicaciones recientes.

<!-- ===== social_app/templates/dashboard.html ===== -->

{% extends 'base.html' %}

{% block title %}Dashboard - {{ facebook_account.nombre }}{% endblock %}

{% block header %}Mi Dashboard{% endblock %}

{% block content %}
<div class="dashboard">
    <!-- Información del Usuario -->
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 12px; margin-bottom: 30px;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <img src="{{ facebook_account.foto_perfil }}" 
                 alt="Foto de perfil" 
                 style="width: 100px; height: 100px; border-radius: 50%; border: 4px solid white;">
            <div>
                <h2 style="margin-bottom: 10px;">{{ facebook_account.nombre }}</h2>
                <p style="opacity: 0.9;">{{ facebook_account.email }}</p>
                <p style="opacity: 0.8; font-size: 14px;">
                    Conectado desde: {{ facebook_account.fecha_vinculacion|date:"d/m/Y H:i" }}
                </p>
            </div>
        </div>
    </div>
    
    <!-- Estadísticas Rápidas -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
        <div style="background: #e3f2fd; padding: 25px; border-radius: 12px; text-align: center;">
            <div style="font-size: 36px; color: #1877f2; font-weight: bold;">{{ total_posts }}</div>
            <div style="color: #666; margin-top: 10px;">Publicaciones Totales</div>
        </div>
        <div style="background: #fce4ec; padding: 25px; border-radius: 12px; text-align: center;">
            <div style="font-size: 36px; color: #e91e63; font-weight: bold;">{{ total_likes }}</div>
            <div style="color: #666; margin-top: 10px;">Me Gusta Totales</div>
        </div>
        <div style="background: #f3e5f5; padding: 25px; border-radius: 12px; text-align: center;">
            <div style="font-size: 36px; color: #9c27b0; font-weight: bold;">{{ total_comentarios }}</div>
            <div style="color: #666; margin-top: 10px;">Comentarios Totales</div>
        </div>
    </div>
    
    <!-- Acción Principal -->
    <div style="text-align: center; margin: 40px 0;">
        <a href="{% url 'publicar_facebook' %}" class="btn" style="padding: 20px 40px; font-size: 18px;">
            ✍️ Crear Nueva Publicación
        </a>
    </div>
    
    <!-- Lista de Publicaciones Recientes -->
    <h3 style="color: #333; margin: 30px 0 20px; font-size: 24px;">📋 Publicaciones Recientes</h3>
    
    {% if posts %}
        {% for post in posts %}
        <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 15px; border-left: 5px solid #1877f2;">
            <p style="font-size: 16px; color: #333; margin-bottom: 15px;">{{ post.mensaje }}</p>
            
            <div style="display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px;">
                <span style="color: #666;">❤️ {{ post.likes }} Me gusta</span>
                <span style="color: #666;">💬 {{ post.comentarios }} Comentarios</span>
                <span style="color: #666;">🔄 {{ post.compartidos }} Compartidos</span>
            </div>
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
                <small style="color: #999;">{{ post.fecha_publicacion|date:"d/m/Y H:i" }}</small>
                <span style="padding: 5px 15px; background: #28a745; color: white; border-radius: 20px; font-size: 12px;">
                    {{ post.estado }}
                </span>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div style="text-align: center; padding: 60px 20px; background: #f8f9fa; border-radius: 12px;">
            <p style="font-size: 18px; color: #999;">
                📭 Aún no has realizado publicaciones.<br>
                <a href="{% url 'publicar_facebook' %}" style="color: #1877f2; text-decoration: underline;">
                    ¡Crea tu primera publicación ahora!
                </a>
            </p>
        </div>
    {% endif %}
</div>
{% endblock %}

4 TEMPLATE 4: publicar.html

📄 Archivo: social_app/templates/publicar.html

Descripción: Formulario para crear y publicar mensajes en Facebook con mensajes de éxito/error detallados.

<!-- ===== social_app/templates/publicar.html ===== -->

{% extends 'base.html' %}

{% block title %}Publicar en Facebook{% endblock %}

{% block header %}Nueva Publicación{% endblock %}

{% block content %}
<div style="max-width: 700px; margin: 0 auto;">
    <h2 style="color: #1877f2; margin-bottom: 30px;">✍️ Crear Publicación en Facebook</h2>
    
    <!-- Mensajes de éxito o error -->
    {% if success %}
        <div class="alert alert-success">
            <strong>✅ {{ success }}</strong>
            {% if post_id %}
                <br><small>ID del post: {{ post_id }}</small>
            {% endif %}
            {% if page_name %}
                <br><small>Publicado en: {{ page_name }}</small>
            {% endif %}
            {% if post_url %}
                <br><br><a href="{{ post_url }}" target="_blank" style="color: #155724; font-weight: bold;">
                    📱 Ver publicación en Facebook
                </a>
            {% endif %}
        </div>
    {% endif %}
    
    {% if error %}
        <div class="alert alert-error">
            <strong>❌ {{ error }}</strong>
            {% if detalle %}
                <br><br><strong>Detalles:</strong> {{ detalle }}
            {% endif %}
            {% if solucion %}
                <br><br><strong>💡 Solución:</strong> {{ solucion }}
            {% endif %}
            {% if json_response %}
                <br><br><strong>Respuesta de Facebook:</strong>
                <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; margin-top: 10px;">{{ json_response }}</pre>
            {% endif %}
        </div>
    {% endif %}
    
    {% if nota %}
        <div class="alert" style="background: #fff3cd; border-color: #ffc107; color: #856404;">
            <strong>ℹ️ Nota:</strong> {{ nota }}
        </div>
    {% endif %}
    
    <!-- Formulario de publicación -->
    <form method="POST" action="{% url 'publicar_facebook' %}">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="mensaje">Escribe tu mensaje:</label>
            <textarea 
                name="mensaje" 
                id="mensaje" 
                placeholder="¿Qué estás pensando?

Puedes escribir texto, emojis 🎉, hashtags #WebServices, y más..."
                required
                maxlength="5000"
            ></textarea>
            <small style="color: #999;">Máximo 5,000 caracteres</small>
        </div>
        
        <div style="display: flex; gap: 15px; justify-content: space-between; align-items: center;">
            <a href="{% url 'dashboard' %}" style="color: #666; text-decoration: none;">
                ← Volver al Dashboard
            </a>
            
            <button type="submit" class="btn" style="padding: 12px 30px;">
                📤 Publicar en Facebook
            </button>
        </div>
    </form>
    
    <!-- Consejos para publicaciones efectivas -->
    <div style="margin-top: 40px; padding: 25px; background: #f0f2f5; border-radius: 12px;">
        <h3 style="color: #333; margin-bottom: 15px;">💡 Consejos para publicaciones efectivas</h3>
        <ul style="color: #666; line-height: 1.8;">
            <li>Mantén el mensaje claro y conciso</li>
            <li>Usa emojis para hacerlo más atractivo 🚀</li>
            <li>Incluye hashtags relevantes #EducaciónDigital</li>
            <li>Haz preguntas para fomentar interacción</li>
            <li>Publica en horarios de mayor actividad (12-2pm, 7-9pm)</li>
        </ul>
    </div>
</div>
{% endblock %}

5 TEMPLATE 5: error.html

📄 Archivo: social_app/templates/error.html

Descripción: Página de error amigable con posibles soluciones.

<!-- ===== social_app/templates/error.html ===== -->

{% extends 'base.html' %}

{% block title %}Error - Integración Facebook{% endblock %}

{% block header %}Oops... Algo salió mal{% endblock %}

{% block content %}
<div style="text-align: center; padding: 50px 20px;">
    <div style="font-size: 80px; margin-bottom: 20px;">⚠️</div>
    
    <h2 style="color: #dc3545; margin-bottom: 20px;">{{ error }}</h2>
    
    {% if detalle %}
        <div style="background: #f8d7da; padding: 20px; border-radius: 10px; margin: 30px auto; max-width: 600px; border-left: 5px solid #dc3545;">
            <p style="color: #721c24; font-size: 16px; text-align: left;">
                <strong>Detalles del error:</strong><br>
                {{ detalle }}
            </p>
        </div>
    {% endif %}
    
    <div style="margin-top: 40px;">
        <a href="{% url 'facebook_login' %}" class="btn">
            🔄 Intentar Nuevamente
        </a>
    </div>
    
    <div style="margin-top: 50px; padding: 25px; background: #fff3cd; border-radius: 10px; max-width: 700px; margin-left: auto; margin-right: auto; text-align: left;">
        <h3 style="color: #856404; margin-bottom: 15px;">🛠️ Posibles soluciones:</h3>
        <ol style="color: #856404; line-height: 2;">
            <li>Verifica que la configuración de Facebook Developers sea correcta</li>
            <li>Asegúrate de que la URL de callback coincida exactamente</li>
            <li>Revisa que los permisos solicitados estén aprobados</li>
            <li>Confirma que el access token no haya expirado</li>
            <li>Verifica tu conexión a Internet</li>
        </ol>
    </div>
</div>
{% endblock %}

✅ Instrucciones de Instalación

📝 Pasos para usar estos templates

Crea la carpeta templates:
```
cd social_app
mkdir templates
```
Copia cada template:
- Haz clic en el botón "📋 Copiar" de cada template
- Crea un nuevo archivo con el nombre correspondiente
- Pega el contenido copiado
- Guarda el archivo

Verifica la estructura:

# Windows
dir social_app\templates

# Mac/Linux
ls social_app/templates

# Deberías ver:
# base.html
# login.html
# dashboard.html
# publicar.html
# error.html

Reinicia el servidor Django:

# Presiona Ctrl+C para detener
# Luego ejecuta:
python manage.py runserver

Prueba los templates:
- Ve a: http://localhost:8000/ (verás login.html)
- Inicia sesión con Facebook
- Deberías ver dashboard.html
- Haz clic en "Crear Publicación" (verás publicar.html)

⚠️ Notas Importantes

Respeta los nombres exactos: Los archivos DEBEN llamarse exactamente base.html, login.html, etc.
Ubicación correcta: Deben estar en social_app/templates/ NO en la raíz del proyecto
Django Template Language: Estos templates usan sintaxis de Django ({% %}, {{ }})
URLs configuradas: Asegúrate de tener configurado social_app/urls.py con las rutas correctas

🔗 Relación con views.py

Cada template se corresponde con una vista en social_app/views.py:

Template	Vista en views.py	URL
`login.html`	`inicio(request)`	`/`
`dashboard.html`	`dashboard(request)`	`/dashboard/`
`publicar.html`	`publicar_facebook(request)`	`/facebook/publicar/`
`error.html`	`facebook_callback(request)`	`/facebook/callback/`
`base.html`	Heredado por todos	-

🎉 ¡Templates Completos!

Ahora tienes los 5 templates HTML necesarios para completar tu integración con Facebook API.

Siguiente paso: Configura las vistas en views.py y las URLs en urls.py según la guía principal.