One Hat Cyber Team

Edit File: _home_instagram.php

<?php
/**
 * Seção de Integração com Instagram
 * 
 * CONFIGURAÇÕES NECESSÁRIAS:
 * 1. Configure suas credenciais do Instagram no arquivo de configuração
 * 2. Certifique-se de que o PHP tem permissão para fazer requisições HTTP
 * 3. Configure o cache para evitar muitas requisições à API
 */

// ========================================
// CONFIGURAÇÕES - ALTERE AQUI SUAS CREDENCIAIS
// ========================================

// Credenciais do Instagram Basic Display API
$instagram_config = [
    'access_token' => 'SEU_ACCESS_TOKEN_AQUI', // Token de acesso do Instagram
    'user_id' => 'SEU_USER_ID_AQUI', // ID do usuário do Instagram
    'client_id' => 'SEU_CLIENT_ID_AQUI', // Client ID da aplicação
    'client_secret' => 'SEU_CLIENT_SECRET_AQUI', // Client Secret da aplicação
    'redirect_uri' => 'SUA_REDIRECT_URI_AQUI', // URI de redirecionamento
    'cache_duration' => 3600, // Cache em segundos (1 hora)
    'posts_limit' => 12, // Quantidade de posts para exibir
    'cache_file' => 'cache/instagram_feed.json' // Arquivo de cache
];

// ========================================
// FUNÇÃO PARA OBTER FEED DO INSTAGRAM
// ========================================

// ========================================
// DADOS DE EXEMPLO (FALLBACK)
// ========================================

function getFallbackInstagramData() {
    return [
        'data' => [
            [
                'id' => 'fallback_1',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/FF6B6B/FFFFFF?text=Instagram+Post+1',
                'permalink' => '#',
                'caption' => 'Post de exemplo do Instagram - Prefeitura Municipal',
                'timestamp' => date('Y-m-d\TH:i:s+0000'),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ],
            [
                'id' => 'fallback_2',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/4ECDC4/FFFFFF?text=Instagram+Post+2',
                'permalink' => '#',
                'caption' => 'Outro post de exemplo - Eventos da Cidade',
                'timestamp' => date('Y-m-d\TH:i:s+0000', strtotime('-1 day')),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ],
            [
                'id' => 'fallback_3',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/45B7D1/FFFFFF?text=Instagram+Post+3',
                'permalink' => '#',
                'caption' => 'Terceiro post de exemplo - Cultura Local',
                'timestamp' => date('Y-m-d\TH:i:s+0000', strtotime('-2 days')),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ],
            [
                'id' => 'fallback_4',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/96CEB4/FFFFFF?text=Instagram+Post+4',
                'permalink' => '#',
                'caption' => 'Quarto post de exemplo - Esportes Municipais',
                'timestamp' => date('Y-m-d\TH:i:s+0000', strtotime('-3 days')),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ],
            [
                'id' => 'fallback_5',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/FFEAA7/FFFFFF?text=Instagram+Post+5',
                'permalink' => '#',
                'caption' => 'Quinto post de exemplo - Educação Pública',
                'timestamp' => date('Y-m-d\TH:i:s+0000', strtotime('-4 days')),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ],
            [
                'id' => 'fallback_6',
                'media_type' => 'IMAGE',
                'media_url' => 'https://via.placeholder.com/400x400/DDA0DD/FFFFFF?text=Instagram+Post+6',
                'permalink' => '#',
                'caption' => 'Sexto post de exemplo - Saúde Municipal',
                'timestamp' => date('Y-m-d\TH:i:s+0000', strtotime('-5 days')),
                'like_count' => rand(50, 200),
                'comments_count' => rand(5, 25)
            ]
        ]
    ];
}

// ========================================
// OBTER DADOS DO INSTAGRAM
// ========================================

$instagram_feed = getInstagramFeed($instagram_config);
$posts = $instagram_feed['data'] ?? [];

// ========================================
// FUNÇÃO PARA FORMATAR DATA
// ========================================

// ========================================
// FUNÇÃO PARA TRUNCAR TEXTO
// ========================================

function truncateText($text, $length = 100) {
    if (strlen($text) <= $length) {
        return $text;
    }
    return substr($text, 0, $length) . '...';
}
?>

<section class="py-16 bg-gradient-to-b from-gray-50 to-white dark:from-slate-900 dark:to-slate-800">
    <div class="container mx-auto px-6">
        
        
        <div class="text-center mb-12">
            <div class="flex items-center justify-center mb-4">
                <div class="w-12 h-12 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 rounded-2xl flex items-center justify-center mr-4">
                    <i class="fab fa-instagram text-white text-2xl"></i>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white">
                    Instagram Oficial
                </h2>
            </div>
            <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                Acompanhe em tempo real as novidades, eventos e momentos especiais da nossa cidade através do nosso Instagram oficial
            </p>
            <div class="mt-6">
                <a href="https://instagram.com/<?php echo htmlspecialchars($instagram_config['user_id'] ?? 'prefeitura'); ?>" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-pink-500 hover:to-purple-500 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
                    <i class="fab fa-instagram mr-2"></i>
                    Seguir no Instagram
                </a>
            </div>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 max-w-7xl mx-auto">
            
            <?php foreach ($posts as $post): ?>
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden group transform hover:-translate-y-2">
                    
                    
                    <div class="relative overflow-hidden">
                        <img src="<?php echo htmlspecialchars($post['media_url']); ?>" 
                             alt="<?php echo htmlspecialchars(truncateText($post['caption'] ?? 'Post do Instagram', 50)); ?>"
                             class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-700">
                        
                        
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        
                        
                        <div class="absolute top-3 right-3 flex items-center space-x-2">
                            <div class="bg-black/50 backdrop-blur-sm rounded-full px-3 py-1 flex items-center text-white text-sm">
                                <i class="fas fa-heart text-red-400 mr-1"></i>
                                <span><?php echo number_format($post['like_count'] ?? 0); ?></span>
                            </div>
                            <div class="bg-black/50 backdrop-blur-sm rounded-full px-3 py-1 flex items-center text-white text-sm">
                                <i class="fas fa-comment text-blue-400 mr-1"></i>
                                <span><?php echo number_format($post['comments_count'] ?? 0); ?></span>
                            </div>
                        </div>
                        
                        
                        <?php if (($post['media_type'] ?? 'IMAGE') === 'VIDEO'): ?>
                            <div class="absolute top-3 left-3">
                                <div class="bg-black/50 backdrop-blur-sm rounded-full p-2">
                                    <i class="fas fa-play text-white"></i>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <a href="<?php echo htmlspecialchars($post['permalink']); ?>" 
                               target="_blank" 
                               rel="noopener noreferrer"
                               class="bg-white/90 backdrop-blur-sm text-gray-800 font-semibold px-6 py-3 rounded-full transform scale-90 group-hover:scale-100 transition-transform duration-300">
                                <i class="fab fa-instagram mr-2"></i>
                                Ver no Instagram
                            </a>
                        </div>
                    </div>
                    
                    
                    <div class="p-4">
                        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-3">
                            <?php echo htmlspecialchars(truncateText($post['caption'] ?? 'Post do Instagram', 120)); ?>
                        </p>
                        
                        
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                <?php echo formatInstagramDate($post['timestamp']); ?>
                            </span>
                            
                            <div class="flex items-center space-x-2">
                                <button class="text-gray-400 hover:text-red-500 transition-colors duration-200">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="text-gray-400 hover:text-blue-500 transition-colors duration-200">
                                    <i class="far fa-comment"></i>
                                </button>
                                <button class="text-gray-400 hover:text-green-500 transition-colors duration-200">
                                    <i class="far fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            
        </div>

<div class="text-center mt-12">
            <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-6 max-w-2xl mx-auto">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">
                    Conecte-se Conosco
                </h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    Siga nosso Instagram para ficar por dentro de todas as novidades, eventos e momentos especiais da nossa cidade!
                </p>
                <div class="flex items-center justify-center space-x-4">
                    <a href="https://instagram.com/<?php echo htmlspecialchars($instagram_config['user_id'] ?? 'prefeitura'); ?>" 
                       target="_blank" 
                       rel="noopener noreferrer"
                       class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
                        <i class="fab fa-instagram text-xl mr-2"></i>
                        <span class="font-medium">@<?php echo htmlspecialchars($instagram_config['user_id'] ?? 'prefeitura'); ?></span>
                    </a>
                    <span class="text-gray-400">•</span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">
                        Atualizado automaticamente
                    </span>
                </div>
            </div>
        </div>

</div>
</section>

/* Animação de loading para posts */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .instagram-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
</style>