One Hat Cyber Team

View File Name : _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
// ========================================

function getInstagramFeed($config) {
    // Verificar se existe cache válido
    if (file_exists($config['cache_file']) && (time() - filemtime($config['cache_file'])) < $config['cache_duration']) {
        $cached_data = file_get_contents($config['cache_file']);
        $feed_data = json_decode($cached_data, true);
        if ($feed_data && isset($feed_data['data'])) {
            return $feed_data;
        }
    }
    
    // Se não há cache válido, buscar da API
    try {
        // URL da API do Instagram Basic Display
        $api_url = "https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,like_count,comments_count&access_token=" . $config['access_token'] . "&limit=" . $config['posts_limit'];
        
        // Fazer requisição HTTP
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $api_url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
        
        $response = curl_exec($ch);
        $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        
        if ($http_code === 200 && $response) {
            $feed_data = json_decode($response, true);
            
            // Salvar no cache
            if (!is_dir(dirname($config['cache_file']))) {
                mkdir(dirname($config['cache_file']), 0755, true);
            }
            file_put_contents($config['cache_file'], json_encode($feed_data));
            
            return $feed_data;
        }
    } catch (Exception $e) {
        error_log("Erro ao buscar feed do Instagram: " . $e->getMessage());
    }
    
    // Retornar dados de exemplo se a API falhar
    return getFallbackInstagramData();
}

// ========================================
// 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
// ========================================

function formatInstagramDate($timestamp) {
    $date = new DateTime($timestamp);
    $now = new DateTime();
    $diff = $now->diff($date);
    
    if ($diff->y > 0) {
        return $diff->y . ' ano' . ($diff->y > 1 ? 's' : '') . ' atrás';
    } elseif ($diff->m > 0) {
        return $diff->m . ' mês' . ($diff->m > 1 ? 'es' : '') . ' atrás';
    } elseif ($diff->d > 0) {
        return $diff->d . ' dia' . ($diff->d > 1 ? 's' : '') . ' atrás';
    } elseif ($diff->h > 0) {
        return $diff->h . ' hora' . ($diff->h > 1 ? 's' : '') . ' atrás';
    } elseif ($diff->i > 0) {
        return $diff->i . ' minuto' . ($diff->h > 1 ? 's' : '') . ' atrás';
    } else {
        return 'Agora mesmo';
    }
}

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

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

<!-- Seção de Integração com Instagram -->
<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">
        
        <!-- Header da Seção -->
        <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>

        <!-- Grid de Posts do Instagram -->
        <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">
                    
                    <!-- Imagem do Post -->
                    <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">
                        
                        <!-- Overlay no hover -->
                        <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>
                        
                        <!-- Indicadores de engajamento -->
                        <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>
                        
                        <!-- Tipo de mídia -->
                        <?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; ?>
                        
                        <!-- Botão de ação -->
                        <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>
                    
                    <!-- Conteúdo do Post -->
                    <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>
                        
                        <!-- Data e ações -->
                        <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>

        <!-- Footer da Seção -->
        <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>

<style>
/* Estilos personalizados para o Instagram */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 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>

<script>
// JavaScript para funcionalidades adicionais
document.addEventListener('DOMContentLoaded', function() {
    
    // Lazy loading para imagens
    const images = document.querySelectorAll('img[src*="placeholder"]');
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.classList.add('shimmer');
                // Aqui você pode implementar lazy loading real
                imageObserver.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
    
    // Contador de likes animado
    const likeButtons = document.querySelectorAll('.fa-heart');
    likeButtons.forEach(button => {
        button.addEventListener('click', function() {
            if (this.classList.contains('far')) {
                this.classList.remove('far');
                this.classList.add('fas');
                this.style.color = '#ef4444';
                this.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 200);
            } else {
                this.classList.remove('fas');
                this.classList.add('far');
                this.style.color = '';
            }
        });
    });
    
    // Smooth scroll para links internos
    const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
    smoothScrollLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>