介質牆

建立即時串流內容的媒體牆。

「媒體塗鴉牆」可讓您為網站建立即時的社交塗鴉牆。 使用Livefyre JavaScript SDK的串流桌布套件，將Livefyre社交動態消息顯示為視覺化、全螢幕、並排的內容體驗，非常適合於即時活動、主持像片競賽，以及為網站的社交區段提供動力。

整合

新增媒體塗鴉牆最快的方式，就是使用Livefyre CDN上代管的內建版本。

首先，將Livefyre.js新增至您的網站。

<script src="//cdn.livefyre.com/Livefyre.js"></script> 

然後，定位將顯示介質牆的元素。

<div id="wall"></div>

最後，使用Livefyre.require來建構元件。

<script> 
Livefyre.require([ 
    'streamhub-wall#5' 
], function(MediaWall) {     
    var wall = window.wall = new MediaWall({ 
        el: document.getElementById("wall"), 
        collection: { 
            "network": "client-solutions.fyre.co", 
            "siteId": "364309", 
            "articleId": "answers-mediawall" 
        } 
    }); 
}); 
</script>

你現在有牆了！ 請參閱此範例中的所有實際運作。

是否點擊錯誤？ 請檢查，以確定您正在傳遞正確的環境參數。選項包括livefyre.com（生產）或t402.livefyre.com(UAT)。

配置選項

columns

可讓您在建立塗鴉牆時，定義媒體牆的欄數。 如果設定此選項，則每欄的寬度會自動調整為媒體塗鴉牆的容器大小，同時維持指定的欄數。

var wallView = new MediaWall({ 
    el: document.getElementById('wall'), 
    columns: 5 
});

initial

載入頁面時要演算的內容項目數。 預設為50。

var wallView = new MediaWall({ 
   el: document.getElementById('wall'), 
   initial: 10 
});

minContentWidth

可讓您在「媒體牆」容器元素中設定每欄的最小（像素）寬度。 (您的「媒體牆」會根據容器元素的寬度自動選取適當的欄數。 依預設，「媒體牆」的寬度除以最小內容寬度（若未定義，則為300像素）會決定欄數。)

var wallView = new MediaWall({ 
    el: document.getElementById('wall'), 
    minContentWidth: 300 
});

modal

依預設，當內容有附件時，「媒體牆」會顯示可點選的縮圖。 當按一下時，應用程式會開啟一個模型，顯示整個像片／視訊附件。 若要停用此選項，請將modal設為false。

var wallView = new MediaWall({ 
    el: document.getElementById('wall'), 
    columns: 5, 
    modal: false 
});

postButton

定義要顯示在塗鴉牆上的Post Content按鈕。 此選項要求您傳入opts.collection，並新增Livefyre.js Auth整合至頁面。

postButton 參數:

• false （預設值）:請勿顯示「貼文內容」按鈕。（建立只讀介質牆。）

• true (或 LiveMediaWall.postButtons.contentWithPhotos):加入按鈕，讓使用者可新增文字內容及附加的像片。

• LiveMediaWall.postButtons.content:加入可讓使用者新增文字內容，但不附加像片的按鈕。

• LiveMediaWall.postButtons.photo:加入可讓使用者新增像片但無文字的按鈕。

var wallView = new MediaWall({ 
    el: document.getElementById('wall'), 
    collection: collection, 
    postButton: true, 
    minContentWidth: 300 
});

showMore

定義當您的Show More按鈕被點按時要新增至塗鴉牆的內容項目數。

var wallView = new LiveMediaWall({ 
    el: document.getElementById('wall'), 
    showMore: 10 
});

樣式配置選項

Media Wall也提供數種設定選項，可讓您自訂文字色彩、樣式和大小。 若要實作這些選項，請使用下列語法：

var wall2 = window.wall2 = new MediaWall({ 
   el: document.getElementById("listView1"), 
   collection: collection, 
   cardBackgroundColor: '#333', 
   textColor: 'magenta', 
   linkColor: 'orange', 
   footerTextColor: 'lime', 
   displayNameColor: 'cyan', 
   usernameColor: 'red', 
   fontFamily: 'Helvetica, Arial', 
   linkAttachmentBackgroundColor: '#555', 
   linkAttachmentBorderColor: '#888' 
}); 

如需有效輸入，請參閱CSS 字型系列、字型大小、行高、和Color屬性的W3C標準。

• bodyFontSize （CSS字型大小字串）內 容內文的字型大小。

• bodyLineHeight （CSS線條高度字串）內 容內文的線條高度。

• buttonActiveBackgroundColor *（CSS色彩字串）**作用中按鈕背景的色彩。

• buttonBorderColor *（CSS色彩字串）**按鈕邊框的色彩。

• buttonHoverBackgroundColor （CSS色彩字串）暫 留時按鈕背景的色彩。

• buttonTextColor （CSS色彩字串） 按鈕標籤的色彩。

• cardBackgroundColor （CSS色彩字串） 媒體塗鴉牆內容卡片的背景色彩。

• displayNameColor （CSS色彩字串） 位元中顯示名稱的色彩。

• fontFamily （CSS字型系列字串）內 文的字型系列。

• footerTextColor （CSS色彩字串） 次要文字的色彩（例如頁尾文字和位元中的使用者名稱）。

• linkAttachmentBackgroundColor （CSS色彩字串）連 結附件（堆疊附件）的背景色彩。

• linkAttachmentBorderColor （CSS色彩字串）連 結附件（堆疊附件）的邊框色彩。

• linkAttachmentTextColor （CSS色彩字串）連結 附件文字的色彩。

• linkColor （CSS色彩字串）超 連結的色彩（例如內文中的連結和顯示名稱連結）。

• textColor （CSS色彩字串） 內文的色彩。

• titleFontSize （CSS字型大小字串）內 容標題的字型大小。

• titleLineHeight （CSS線條高度字串）內 容標題的線條高度。

• sourceLogoColor （CSS色彩字串） 來源標誌的色彩。

• usernameColor （CSS顏色字串） 位元中使用者名稱的顏色。