2011-10-12 31 views
9

Tôi cần phải căn chỉnh nội dung của nút Thích trên Facebook để chúng luôn ngồi đối diện với cạnh của "chiều rộng" được đặt của chúng. Tôi có thể làm điều này trong Firebug bằng cách thiết lập bảng để nổi: right ;, nhưng nó không xuất hiện để làm việc nếu tôi xác định giá trị đó trong CSS.Căn phải nội dung của một iFrame giống như nút Facebook?

Dưới đây là trong hình ảnh để giải thích câu hỏi của tôi: enter image description here

EDIT: Dưới đây là một JSFiddle: http://jsfiddle.net/h66z3/2/

Trả lời

5

Vì bạn đang sử dụng bố cục button_count, có một mẹo nhỏ mà tôi thấy có vẻ như hoạt động. Về cơ bản bạn chỉ cần chờ khung nội tuyến được chèn vào, và sau đó thiết lập chiều rộng của nó là 0. Sau đó nó sẽ tự động thay đổi kích cỡ chính nó thành kích thước thích hợp. Tôi không thể thề công trình này trong mọi trường hợp và với tất cả các chiều rộng, nhưng hãy kiểm tra nó ra và xem nó hoạt động cho bạn.Đây là trang mã mẫu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script type='text/javascript'> 
function loadcode(d, s, id) 
{ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
} 
function init() 
{ 
loadcode(document, 'script', 'facebook-jssdk'); 
setTimeout(initx, 10); 
} 
function initx() 
{ 
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0]; 
if (likeframe) setTimeout(setwidth, 10); 
else setTimeout(initx, 10); 
} 
function setwidth() 
{ 
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0]; 
likeframe.style.width='0'; 
} 
</script> 
</head> 
<body onload='init()' style='margin:10px 50px'> 
<div id="fb-root"></div> 
<div style='text-align:right'>Here is some right-aligned text to compare to.</div> 
<div id='d2' style='float:right'> 
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div> 
</div> 
</body> 
</html> 

Thật không may điều này không phù hợp với bố cục chuẩn, không chắc tại sao nó lại khác biệt.

+0

Nó hoạt động, nhờ người đàn ông bạn là một thiên tài. Tôi biết đó là một hack nhưng là một nhà thiết kế, tôi không thể chịu đựng được bất cứ điều gì khác. Điều duy nhất không hoàn hảo là nếu chúng không giống trang, nó không tự động thay đổi kích thước. – Walker

2

Tôi không tin rằng bạn sẽ có bất kỳ may mắn sử dụng CSS (hoặc bất cứ điều gì khác cho rằng vấn đề) để ảnh hưởng đến nội dung của iFrame của Facebook. Tôi nghĩ rằng tốt nhất bạn sẽ làm là thay đổi chiều rộng của phần tử iFrame để nó CHỈ phù hợp với lượng nội dung Facebook mà bạn muốn hiển thị. Và sau đó phải căn chỉnh toàn bộ iFrame.

Khá chắc chắn rằng ảnh hưởng đến nội dung trong iFrame là không thể bởi vì nó nằm trên một tên miền khác.

Nếu bạn muốn nó hoàn toàn căn chỉnh sang bên phải, không có thêm khoảng trắng trắng nào mà bạn không thêm vào, nó sẽ không xảy ra. Facebook sẽ để lại thêm không gian ở cuối nội dung của họ để chiếm Like # ticker để ngày càng lớn hơn.

Để căn chỉnh hoàn toàn nó (không có khoảng trắng thừa), bạn sẽ cần sử dụng CHỈ nút tương tự với NO ticker. Nút tương tự chính nó là phần tử duy nhất có chiều rộng không đổi.

+0

Có vẻ như đây là giải pháp tôi phải thực hiện! Không lý tưởng (Tôi rất thích chỉ có nó cho thấy [như] <10k] nhưng nó sẽ là tốt! – Walker

+0

@Walker: Nếu bạn không phản đối việc sử dụng hết không gian theo chiều dọc, bạn có thể sử dụng bố cục 'box_count' thay thế Nó có chiều rộng cố định nhưng chiều cao thay đổi: http://jsfiddle.net/namuol/h66z3/14/ – namuol

1

Tôi cũng đã cố thực hiện điều này nhưng bởi vì đó là khung nội tuyến bạn không thể thay đổi nó. Đề nghị của tôi là sử dụng một trong hai mặt phẳng như nút (Tôi tin rằng nút tương tự bạn đang sử dụng sẽ hiển thị thông tin ở bên phải của 169k nói rằng bạn thích nó) hoặc thay đổi thiết kế của bạn để nó là Email | Twitter | Facebook.

Tôi biết nó hút nhưng vì đó là một khung nội tuyến mọi thứ bên trong iframe là tay cho bạn.

1

kiểm tra ví dụ này http://jsfiddle.net/sandeep/h66z3/3/ có thể đó là bạn muốn

.container { 
    padding-bottom: 10px; 
    border-bottom: 1px solid #ccc; 
} 
h1 { 
    display: inline-block; 
} 
ul li{float:right} 
ul{overflow:hidden} 
+0

Ví dụ jsfiddle của bạn chỉ thay đổi thuộc tính 'width' css của iframe. Anh ta cần chiều rộng để thay đổi động dựa trên – namuol

3

Tiếp theo đề nghị của Derek, tôi sử dụng phiên bản HTML5 thay vì để mang lại kết quả này: http://jsfiddle.net/namuol/h66z3/6/

Nguồn dưới đây được tạo ra thông qua Facebook's Like Button generator.

JS

(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

HTML

<div id="fb-root"></div> 
<div class="container"> 
    <h1>Page Title</h1> 
    <ul class="share"> 
     <li> 
      <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div> 
     </li> 
     <li> 
      <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
     </li> 
    </ul> 
</div> 

CSS không thay đổi.

+0

Nhìn vào mã nguồn của jsfiddle của bạn với Firebug Nó cho thấy mã tạo ra một iFrame vẫn còn – jkupczak

+0

Vâng tôi biết, nhưng 'iframe' là kích thước chính xác khi sử dụng phương thức này – namuol

+0

Vẫn còn một số khoảng trắng Tuy nhiên, nếu anh ấy muốn có số lượng thích hiển thị, anh ấy sẽ phải đối phó với nó vì không gian thêm đó sẽ ở đó giải thích cho nó. – jkupczak

0

Như được chỉ ra bởi những người khác không có cách dễ dàng để làm điều này bởi vì nội dung bị khóa bên trong khung nội tuyến. Nhưng nếu bạn thích một thử thách, bạn có thể muốn xem How can I make the Facebook Like button's width automatically resize? cho một ý tưởng mà tôi đã từng làm.

-1

Rất dễ dàng cho bố cục button_count. Chỉ cần đặt một div xung quanh iframe và đặt div thành vị trí hoàn toàn và bên phải. Ví dụ:

<div style="position:absolute;right:0;"> 
<iframe>...</iframe> 
</div> 
Các vấn đề liên quan