Facebook Like 버튼 오른쪽 맞춤 Iframe의 텍스트 맞춤

Question

iframe을 통해 내 사이트의 버튼처럼 페이스 북을 사용하고 있습니다.

이제 iframe의 너비를 지정해야합니다. 같은 버튼의 다양한 언어로 인해, 이것은 적어도 70px 너비를 설정해야한다는 것을 의미합니다.

이제 버튼이 내 사이트의 맨 오른쪽에 정렬되도록하고 싶습니다. 이제 iframe의 CSS 스타일에 "text-align : right"를 추가하면됩니다. iframe은 오른쪽에 표시되지만 오른쪽에있는 모든 표시는 아닙니다.

이는 iframe 너비가 70px이므로 발생하며 예를 들어 영어와 같은 버튼은 55px입니다.

이제 원하는 내용 : 실제 iframe의 실제 내용을 실제 iframe의 오른쪽에 맞 춥니 다.

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

여기에 내가 예를 구축 할 수 있습니다. div의 오른쪽에 정렬되어 있지만 iframe이 실제 버튼처럼 크기 때문에 오른쪽에 완벽하게 정렬되지 않았습니다. iframe의 오른쪽에 정렬되도록 버튼을 표시하고 싶습니다.

나는 너희들이 같이

Answer 1

CSS 규칙은 iframe 요소에만 적용됩니다. iframe 요소의 콘텐츠가 아닌 다른 웹 페이지이기 때문에 iframe 요소에 적용됩니다.

당신과 함께 iframe이 페이지에 CSS 스타일 시트를 추가하는 자바 스크립트를 사용할 수 '수'

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

하지만 그 모든 브라우저에서 작동하는지 모르겠어요. 가장 좋은 방법은 AJAX로 페이지를 호출하는 것입니다.나는 이것을 테스트하지 않은

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

     } 
    }); 

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

참고 만 시작으로 사용 : 당신이

예 JQuery와 AJAX 기능은 다음과 같을 수 표시하기 전에 그런 식으로 당신은 페이지의 내용을 수정할 수 있습니다 포인트 또는 가이드

Answer 2

을 도울 수 있기를 바랍니다? http://d.pr/Cbkd

이 그렇다면, 여기에 나는 또한 60 픽셀 같은 것으로 iframe을 폭을 변경 내가 방화범

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

를 통해 무슨 짓을했는지. 은 iframe의 내용을 수정

Answer 3

는 현대적인 웹 표준에 의해 일반적으로 불가능하다 : 당신은 iframe이 내부 등 버튼의 폭을 확인할 수 없기 때문에 http://en.wikipedia.org/wiki/Cross-site_scripting

, 당신의 최소 폭에 iframe을 크기를 조정할 수 없습니다 오른쪽에 중첩된다.

내가 생각할 수있는 유일한 방법은 iframe의 크기를 조정하는 것입니다.하지만 말했듯이 여러 언어를 지원해야합니다. 자바 스크립트를 사용하여 사용자의 언어 (JavaScript for detecting browser language preference)를 찾은 경우라면 그렇습니다. 언어에 따라 iframe 너비와 같은 버튼의 스타일을 수동으로 지정할 수 있습니다. 교차 사이트 스크립팅으로 인해이 작업을 자동화하는 방법을 생각할 수 없습니다.

Answer 4

여기에 무엇을 할 것입니다.

은 삽입은 DIV는

<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 

아래와 같이 다음 지금 당신이 다음과 같이 필요에 따라 조정할 때 위의 DIV에 적용되는 #like의 CSS를 만들어 내 페이스 북 코드를 넣어, 당신 태그 앞에 #like라고 . */

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

주와 같은 페이스 북에 대한

은/* CSS :이 하나와 충돌하지 않도록 당신이 I-프레임에 적용 이전 CSS를 제거합니다.

Answer 5

아마도 this이 적합합니다. 여기서 코드를 생성 할 때 너비는 0으로 설정하십시오.