jQueryプラグインソーシャルフィード

ソーシャルフィード

現在、ほとんどすべてのサイトにはソーシャルブロックがあり、 twitterからの最新の投稿、 instagramからの最新の写真、 facebookからの更新が表示されます。 多くの場合、これらのソーシャルブロックはiframeに基づいて機能します。これは、ソーシャルネットワークからの更新をサイトのメインコンテンツと調和的に統合することを許可しません。 facebookまたはinstagramのみから更新を表示する必要がある場合は、編集可能な外観（ this 、 またはthis ）を持つjQueryプラグインがあります。 複数のソーシャルネットワークからの更新を一度に表示する必要がある場合は、 ソーシャルフィードが役立ちます。

プラグインのオンラインデモhttp://pavelk2.imtqy.com/social-feed/

ソーシャルフィードは、特定のハッシュタグまたはユーザーのソーシャルネットワークからの最新のメッセージを表示する完全なフロントエンドプラグインです。 プラグインでサポートされているソーシャルネットワーク：

• フェイスブック
• Instagram
• Twitter
• Google +
• ヴコンタクテ。

設置

bower.io経由：

bower install social-feed 

または、最新リリースをダウンロードします。
https://github.com/pavelk2/social-feed/releases

プラグイン接続

まず、スタイルを接続します。

 <!-- Social-feed css --> <link href="css/jquery.socialfeed.css" rel="stylesheet" type="text/css"> <!-- font-awesome for social network icons --> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 

メッセージを配置するコンテナを作成します。

 <div class="social-feed-container"></div> 

必要なjavascriptライブラリを接続します。

 <!-- jQuery --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- Codebird.js - required for TWITTER --> <script src="bower_components/codebird-js/codebird.js"></script> <!-- doT.js for rendering templates and moment.js for showing time ago --> <script src="bower_components/doT/doT.min.js"></script> <script src="bower_components/moment/min/moment.min.js"></script> <!-- Social-feed js --> <script src="js/jquery.socialfeed.js"></script> 

プラグインを初期化します。

 <script> $(document).ready(function(){ $('.social-feed-container').socialfeed({ // FACEBOOK facebook:{ accounts: ['@teslamotors','#teslamotors'], limit: 2, access_token: 'YOUR_FACEBOOK_ACCESS_TOKEN' // APP_ID|APP_SECRET }, // TWITTER twitter:{ accounts: ['@spacex'], limit: 2, consumer_key: 'YOUR_CONSUMER_KEY', // make sure to have your app read-only consumer_secret: 'YOUR_CONSUMER_SECRET_KEY', // make sure to have your app read-only }, // VK vk:{ accounts: ['@125936523','#teslamotors'], limit: 2, source: 'all' }, // GOOGLEPLUS google:{ accounts: ['#teslamotors'], limit: 2, access_token: 'YOUR_GOOGLE_PLUS_ACCESS_TOKEN' }, // INSTAGRAM instagram:{ accounts: ['@teslamotors','#teslamotors'], limit:2, client_id: 'YOUR_INSTAGRAM_CLIENT_ID' }, // GENERAL SETTINGS length:400, show_media:true, // Moderation function - if returns false, template will have class hidden moderation: function(content){ return (content.text) ? content.text.indexOf('fuck') == -1 : true; }, //update_period: 5000, // When all the posts are collected and displayed - this function is evoked callback: function(){ console.log('all posts are collected'); } }); }); </script> 

外観

メッセージの表示を編集する場合は、 テンプレート css / jquery.socialfeed.cssとともにtemplate.htmlファイルを編集できます。
プラグインの初期化時に文字列パラメーターtemplate_htmlを追加して、 htmlテンプレートを指定することもできます。

依存関係

• fontawesome.io-ソーシャルネットワークのアイコンを表示するには、
• momentjs.com-投稿公開時間を表示するには、
• olado.imtqy.com/doT-htmlテンプレートのレンダリング用、
• github.com/jublonet/codebird-js-リクエストをTwitter APIに送信します 。

免許

MIT

ソースコード

https://github.com/pavelk2/social-feed/

このプラグインの以前のバージョンについては、 この記事で説明しました。