メディアウォール

コンテンツをリアルタイムでストリーミングするメディアウォールを作成します。

Media Wallを使用すると、サイトのリアルタイムのソーシャルウォールを作成できます。 Livefyre JavaScript SDKのstreamhub-wallパッケージを使用すると、Livefyreのソーシャルフィードを、ライブイベントのカバー、写真コンテストのホスト、Webサイトのソーシャルセクションのパワーを視覚的に魅力的なフルスクリーンのタイル形式で表示できます。

統合

メディアウォールを追加する最も簡単な方法は、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

メディアウォールのコンテナ要素内の各列の最小（ピクセル単位）の幅を設定できます。 (メディアウォールでは、コンテナ要素の幅に応じて、適切な数の列が自動的に選択されます。 デフォルトでは、メディアウォールの幅をコンテンツの幅の最小値（未定義の場合は300px）で割った値によって列数が決まります。

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 （デフォルト）:「投稿コンテンツ」ボタンを表示しません。（読み取り専用のMedia Wallを作成します）。

• 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 Font Size String) コンテンツの本文のフォントサイズ。

• bodyLineHeight (CSSの行の高さ String)コンテンツの本文の行の高さ。

• buttonActiveBackgroundColor *（CSSカラー文字列）**アクティブなボタンの背景のカラー。

• buttonBorderColor *(CSS Color String)**ボタンの境界線のカラー。

• buttonHoverBackgroundColor （CSSカラー文字列） ：カーソルを合わせたときのボタンの背景のカラー。

• buttonTextColor （CSSカラー文字列） ：ボタンのラベルのカラー。

• cardBackgroundColor （CSSカラー文字列） ：メディアウォール内のコンテンツカードの背景色。

• displayNameColor （CSSカラー文字列） 署名内の表示名のカラー。

• fontFamily （CSSフォントファミリー文字列） 本文のフォントファミリー。

• footerTextColor （CSSカラー文字列） ：セカンダリテキストのカラー（フッターテキスト、バイライン内のユーザー名など）。

• linkAttachmentBackgroundColor （CSSカラー文字列） リンク添付ファイル（スタック添付ファイル）の背景色。

• linkAttachmentBorderColor （CSSカラー文字列） リンク添付ファイル（スタック添付ファイル）の境界線のカラー。

• linkAttachmentTextColor （CSSカラー文字列） ：リンクの添付テキストのカラー。

• linkColor （CSSカラー文字列） ハイパーリンク（本文内のリンク、表示名リンクなど）のカラー。

• textColor (CSS Color String) ：本文のカラー。

• titleFontSize （CSSのフォントサイズ文字列） コンテンツタイトルのフォントサイズ。

• titleLineHeight (CSSの行の高さ String)コンテンツタイトルの行の高さ。

• sourceLogoColor (CSS Color String) ：ソースロゴのカラー。

• usernameColor (CSS Color String) ：バイライン内のユーザー名のカラー。