Кнопка «Мне нравится» на Facebook «Выровнять текст в фрейме вправо»

Question

Я использую кнопку "лайк" на своем сайте через фрейм.

Теперь вам нужно указать ширину фрейма.Из-за различных языков кнопки «Мне нравится» это означает, что мне нужно установить ширину не менее 70 пикселей.

Теперь я хочу, чтобы кнопка «Нравится» была выровнена по правому краю моего сайта, теперь я могу сделатьэто путем добавления «text-align: right» в стиле css в iframe.Iframe показывается справа, но не полностью справа.

Это происходит из-за ширины iframe, ее 70px, и, например, английской кнопки like всего 55px.

Теперь то, что я хочу: выровнять фактическое содержание iframe справа от фактического iframe.

http://pastehtml.com/view/1dnwtbh.html

Здесь янадо построить пример.Он выровнен справа от сборки div ive, но поскольку iframe больше, чем кнопка «Мне нравится», он не совсем выровнен вправо.Я хочу, чтобы кнопка лайка была выровнена по правому краю в iframe.

Я надеюсь, что вы, ребята, можете помочь

Answer 1

Правила CSS применяются только к элементу iframe, а не к содержимому iframe, потому что это полностью другая веб-страница.

Вы можете использовать javascript для добавления таблицы стилей css на страницу iframeс:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink);

Но я не уверен, будет ли это работать во всех браузерах.Лучше всего позвонить на страницу с AJAX.Таким образом, вы можете изменить содержимое страницы перед ее отображением

Пример функции AJAX jquery может выглядеть следующим образом:

$.ajax({
        type: "GET",
        url: "facebookURL",
        dataType: "html",
        success: function(html) {
            processData(html);

        }
    });

function processData(fbData) {
    $('#injectFBLikeHere').html(function() {
        return $(fbData).find('#LikePluginPagelet').html();
    });
}

Примечание. Я не проверял это, используйте только егов качестве отправной точки или руководства

Answer 2

Может быть это будет работать для вас: когда вы генерируете здесь код, установите ширину 0.

Answer 3

Вот что нужно сделать.

Вставьте DIV с именем #like перед тегом, затем вставьте свой код Facebook внутрь, как показано ниже

<div id="like">

  <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  <fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like 

Теперь создайте #like CSS, которыйВы применили к вышеуказанному DIV, как показано ниже, и при необходимости измените его.

/ * CSS для Facebook, как * /

 #like {
        position: fixed;
        top: 300px;
        right: -20px;
        float: right;
        height: auto;
        width: 130px;
}

Примечание: удалите все предыдущие CSS, которые вы применяли к i-кадр, чтобы он не конфликтовал с этим.

Answer 4

Изменение содержимого iFrame обычно невозможно по современным веб-стандартам: http://en.wikipedia.org/wiki/Cross-site_scripting

Поскольку вы не можете определить ширину кнопки «Нравится» внутри iframe, вы не можете изменить размер iframe до минимальной ширины, которая будет вложена справа.

Единственный способ, которым я могу придумать, - изменить размер iframe, но, как вы сказали, он нужен для поддержки нескольких языков, что, я думаю, если вы использовали javascript для определения языка пользователя ( JavaScript для определения языка браузера предпочтение ). Вы можете вручную настроить ширину iframe кнопки «Мне нравится» в зависимости от языка. Я не могу придумать какой-либо автоматизированный способ сделать это из-за межсайтового скриптинга.

Answer 5

Как это?http://d.pr/Cbkd

Если так, вот что я сделал через Firebug

.connect_widget_number_cloud, 
.connect_widget_connect_button {float: right !important;}

Я также изменил ширину iframe на что-то вроде 60px.