こんにちは、
Discourse のコミュニティで、Twitter のフィードを埋め込んでいるものをご存知の方はいらっしゃいますか？この件についてはいくつかトピックを読んだのですが、実際に確認できる例があれば教えていただけないでしょうか。
よろしくお願いいたします！
表示するには登録が必要です。ログインしていないユーザーのページ表示が壊れてしまうため、デフォルトテーマから削除しました。アカウントを作成し、ハンバーガーメニューからダークテーマまたはライトテーマを選択するとライブで確認できます。ログインが面倒な場合は、こちらでスクリーンショットをご覧ください。
@smrtey ありがとうございます。詳しく見るためにサインアップしますが、スクリーンショットは素晴らしいですね！
とても素晴らしい出来ですね。もしよろしければ、どのように作成されたのか教えていただけますか。
私の同僚がサイドバー用のスクリプトとテンプレートオーバーライドを作成し、私はそこにTwitterフィードとクッキーを追加しました。彼はここでスクリプトを投稿してもよいと言ってくれたので、Twitter関連の要素とCSSを加えたものをここに載せます。
編集：はい、下の投稿者が彼ですので、彼に任せることにします。
そのコードを使う前にちょっと待ってください。予想していたよりもはるかに多くのコードが投稿されており、そのほとんどは埋め込みツイートには不要です。もう少し小さくしたバージョンをすぐにご紹介します。
OK、これですべてのリストページに左サイドバーとして埋め込みTwitterフィードが表示されるはずです。埋め込みたいタイムラインに合ったHTMLで60行目を編集する必要があります。
-
このTwitterページ にアクセスし、埋め込みたいURL（例：
https://twitter.com/TwitterDevなど）を入力して、「埋め込みタイムライン」をクリックします。 -
次のようなコードが表示されます：
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -
<script>の部分を削除し、以下のようにします：
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a> -
下の60行目に貼り付け、XXXXXXXXXX を置き換えます。
これを Desktop - </head> に追加します。
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}
(document, "script", "twitter-wjs"));
</script>
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("twitter-sidebar") );
});
</script>
<script type="text/x-handlebars" data-template-name="discovery/topics">
{{#if redirectedReason}}
<div class="alert alert-info">{{redirectedReason}}</div>
{{/if}}
{{#if showDismissAtTop}}
<div class="row">
{{#if showDismissRead}}
<button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics-top' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
{{/if}}
{{#if showResetNew}}
<button id='dismiss-new-top' class='btn btn-default dismiss-read' {{action "resetNew"}}>{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
{{/if}}
</div>
{{/if}}
{{#if model.sharedDrafts}}
{{topic-list
class="shared-drafts"
listTitle="shared_drafts.title"
top=top
hideCategory="true"
category=category
topics=model.sharedDrafts
discoveryList=true}}
{{/if}}
{{bulk-select-button selected=selected action=(action "refresh") category=category}}
<!-- ***********************************************************************
このテンプレートのうち変更されるのはこの部分だけです。
下の XXXXXXXXXX を、Twitter のこのページで提供されたリンクに置き換えてください。ただし、<script> の部分は含めないでください：
https://help.twitter.com/en/using-twitter/embed-twitter-feed
************************************************************************* -->
<div id="sidebar">
XXXXXXXXXX
<div id="twitter-sidebar"></div>
</div>
{{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount}}
{{#if top}}
<div class='top-lists'>
{{period-chooser period=period action=(action "changePeriod")}}
</div>
{{else}}
{{#if topicTrackingState.hasIncoming}}
<div class="show-more {{if hasTopics 'has-topics'}}">
<div class='alert alert-info clickable' {{action "showInserted"}}>
<a tabindex="0" href="" {{action "showInserted"}}>
{{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
</a>
</div>
</div>
{{/if}}
{{/if}}
{{#if hasTopics}}
{{topic-list
highlightLastVisited=true
top=top
showTopicPostBadges=showTopicPostBadges
showPosters=true
canBulkSelect=canBulkSelect
changeSort=(action "changeSort")
toggleBulkSelect=(action "toggleBulkSelect")
hideCategory=model.hideCategory
order=order
ascending=ascending
bulkSelectEnabled=bulkSelectEnabled
selected=selected
expandGloballyPinned=expandGloballyPinned
expandAllPinned=expandAllPinned
category=category
topics=model.topics
discoveryList=true}}
{{/if}}
{{/discovery-topics-list}}
<footer class='topic-list-bottom'>
{{conditional-loading-spinner condition=model.loadingMore}}
{{#if allLoaded}}
{{#if showDismissRead}}
<button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
{{/if}}
{{#if showResetNew}}
<button id='dismiss-new' class='btn btn-default dismiss-read' {{action "resetNew"}}>
{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
{{/if}}
{{#footer-message education=footerEducation message=footerMessage}}
{{#if latest}}
{{#if canCreateTopicOnCategory}}<a href {{action "createTopic"}}>{{i18n 'topic.suggest_create_topic'}}</a>{{/if}}
{{else if top}}
{{#link-to "discovery.categories"}}{{i18n 'topic.browse_all_categories'}}{{/link-to}}, {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}} {{i18n 'or'}} {{i18n 'filters.top.other_periods'}}
{{top-period-buttons period=period action=(action "changePeriod")}}
{{else}}
{{#link-to "discovery.categories"}} {{i18n 'topic.browse_all_categories'}}{{/link-to}} {{i18n 'or'}} {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}}
{{/if}}
{{/footer-message}}
{{/if}}
</footer>
</script>
次に、これを Desktop - CSS に追加します：
topic-list {
width: auto;
}
#sidebar {
width: 28%;
float: left;
margin-right: 20px;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
#sidebar {
display: none !important;
}
}
これで動作するはずですが、当サイトには他に CSS が存在する可能性があり、それがあなたの環境にはない場合もあるため、すべての方にとって完璧に動作するとは限りません。
上記の問題により、ログインしていないユーザーがタイムラインを表示するにはページの再読み込みが必要です。これは既知のバグであり、まだ修正できていません。
iPad でも動作しなかったため、iPad 向けに無効化するよう以下を追加しました
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
var is_iPad = navigator.userAgent.match(/iPad/i) != null;
if(is_iPad) {
document.getElementById("sidebar").classList.add("hide-it");
}
});
</script>
CSS
#sidebar.hide-it {display:none !important}
実は今夜、初めてTwitter関連のものを詳しく見てみました。既知のバグの修正箇所はわかりましたが、今はその時間がないんです。
もし anyone がこれを使いたい場合は、今後 1〜2 日以内にテーマコンポーネントとしてまとめておきます。
これが安定していると思われるコンポーネントです。
このコンポーネントは、Discourse の discovery/topics.hbs に Twitter サイドバーを追加します。そのため、最新の投稿、未読、新規、ブックマークなどのすべてのページでサイドバーが表示されます。ログインしていないユーザーには読み込まれません。ログイン状態でないとうまく動作しなかったためです。また、iOS では動作しないため、iPad では無効化されていると思われますが、私はそれをテストできませんでした。
Discourse の代わりにあなたの Twitter フードを読み込ませるには、Desktop head_tag.html の30行目の指示に従い、39行目に正しいコードを追加する必要があります。
サイドバーを含むページの wrap の幅を広げると、見た目が大幅に良くなると思います。
このファイルの場所はどこですか？
ありがとう、を見つけました
代わりに、テーマコンポーネントのスマートeyをいくつかの投稿にリンクしてみてください。
何と言えばいいか分かりません。フィードの読み込みに問題がありましたが、以下のコードを追加することで解決しました。
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
ただし、これはコンポーネント内の設定なので、もしあなたの方で動作しない場合は、セキュリティ設定の content security policy を確認してください。もしこの項目がチェックされている場合
Twitter スクリプトは動作しない可能性があります。
これはかなり素晴らしいですね。試してみましたが、よく機能しています。お疲れ様でした！
このトピックを初めて見たとき、少し違う内容になるかと思いました。私のコミュニティでは、多くのメンバーがTwitterも利用しています。彼らがツイートした内容について、フォーラムでより深く、長期的な議論を促すのは課題です。ツイートのフィードを表示し、それについてトピックを開始できるインターフェースがあれば面白いでしょう！フィードはハッシュタグベースにするのもありかもしれません。あるいは、プロフィールに自分のTwitterフィードを表示し、そこからトピックを開始できるようにするのも良いですね。
Smertey さん、ありがとうございます。コンテンツセキュリティポリシーのチェックを外したところ、今は問題なく動作しているようです。このオプションのチェックを外すことによるセキュリティ上のリスクはありますか？