媒體牆

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

「媒體塗鴉牆」可讓您為網站建立即時的社交塗鴉牆。 使用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)。

注意

您的「媒體塗鴉牆應用程式」轉譯之推文的任何樣式自訂都必須依照Twitter的「顯示 要求」

配置選項

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像素)會決定欄數。)

注意

請勿將此選項與columns選項組合使用。

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 出現在塗鴉牆上的按鈕。 This option requires that you pass in opts.collection, and add a Livefyre.js Auth integration to the page.

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字型系列、字型大小 、行高、色彩屬性的W3C 標準。

  • bodyFontSize (CSS字型大小字串) ** ,內容內文的字型大小。

  • bodyLineHeight (CSS Line Height字串) ** :內容內文的行高。

  • buttonActiveBackgroundColor (CSS Color String) ***作用中按鈕背景的顏色。

  • buttonBorderColor (CSS顏色字串) ***按鈕邊框的顏色。

  • buttonHoverBackgroundColor (CSS色彩字串) ** Hover上按鈕背景的色彩。

  • buttonTextColor (CSS顏色字串) ** ,按鈕標籤的顏色。

  • cardBackgroundColor (CSS Color String) ** :媒體塗鴉牆中內容卡片的背景顏色。

  • displayNameColor (CSS顏 色字串) ,位元中顯示名稱的顏色。

  • fontFamily (CSS字 體系列字串) -內文字的字型系列。

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

  • linkAttachmentBackgroundColor (CSS色彩字串) ** 連結附件(堆疊附件)的背景色彩。

  • linkAttachmentBorderColor (CSS色彩字串) ** 連結附件(堆疊附件)的邊框色彩。

  • linkAttachmentTextColor (CSS色彩字串) ** 連結附件文字的色彩。

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

  • textColor (CSS顏 色字串) -內文的顏色。

  • titleFontSize (CSS字型大 小字串) 內容標題的字型大小。

  • titleLineHeight (CSS Line Height字 串) ,內容標題的行高。

  • sourceLogoColor (CSS顏色字串) ** :來源標誌的顏色。

  • usernameColor (CSS顏色 字串) ,位元中使用者名稱的顏色。

本頁內容