Укажите другую таблицу стилей для iframe на Facebook - PullRequest
Новая
       2

Укажите другую таблицу стилей для iframe на Facebook

0 голосов
/ 22 марта 2011

Я хочу применить конкретную таблицу стилей для содержимого внешней страницы (которая принадлежит мне), когда она отображается в iframe на Facebook.Из-за ограничений по ширине Facebook, я хотел бы отображать только один столбец на странице, без изменения HTML-кода этой страницы.При прямом посещении страница будет вызывать обычный CSS.При просмотре через iframe он будет вызывать CSS для конкретного Facebook.

Другими словами, как заставить Facebook использовать определенный файл CSS, когда он показывает контент через iframe?Нужно ли использовать javascript, чтобы получить другую таблицу стилей?

Ответы [ 3 ]

2 голосов
/ 23 марта 2011

С помощью PHP вы можете проверить, работает ли ваше приложение внутри фрейма Facebook или нет.Вы должны проверить массив $_REQUEST и найти параметры, которые FB передает в iframe.Обычно они начинаются с fb_ и могут варьироваться в зависимости от настроек, которые вы проверили для своего приложения.

Примерно так должно работать: 

<?php
    $fbFrame = false;

    foreach ($_REQUEST as $key => $value)
    {
       if (strpos($key, "fb_") > -1)
       {
          $fbFrame = true;
          break;
       }
    }

    if (array_key_exists('signed_request', $_REQUEST)
        $fbFrame = true; 
?>

Затем в вашем HTMLhead: 

<head>
<?php if ($fbFrame): ?>
  <link rel="stylesheet" type="text/css" href="PATH_TO_FB_CSS" />
<?php else: ?>
  <link rel="stylesheet" type="text/css" href="PATH_TO_NORMAL_CSS" />
<?php endif; ?>
</head>

Я предполагаю, что у вас нет собственных параметров, начинающихся с fb_ или называемых signed_request в вашем $_GET или $_POST, конечно.

2 голосов
/ 15 августа 2011

Это так же просто, как распечатывать разные стили, когда вы работаете в iframe или нет.Правда, если вы запустите этот сайт внутри iframe на каком-то другом сайте, это тоже повлияет.Но на самом деле, Facebook - это самый важный, пока он работает, неужели тебя это волнует?

это работает для меня.Надеюсь, это сработает и у вас. 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>My Coolest Site</title>
    <link type="text/css" href="/css/my-common-1.css" rel="stylesheet">
    <link type="text/css" href="/css/my-common-2.css" rel="stylesheet">
    <script type="text/javascript">
    if (top === self) {
          document.write('<link type="text/css" href="/css/my-specific-1.css" rel="stylesheet">');
          document.write('<link type="text/css" href="/css/my-specific-2.css" rel="stylesheet">');

    } else { 
          document.write('<link type="text/css" href="/css/my-fb-1.css" rel="stylesheet">');
          document.write('<link type="text/css" href="/css/my-fb-2.css" rel="stylesheet">');
    }
    </script>
0 голосов
/ 22 марта 2011

Поскольку он находится в Iframe, применяется такая же политика происхождения . Вы не можете получить доступ к тому, что приходит из другого домена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...