مرحبًا،
أتساءل هل يعرف أحدكم مجتمعات Discourse تحتوي على تغذية مدمجة من تويتر؟ لقد قرأت بعض الموضوعات حول هذا الموضوع، لكنني أتساءل عما إذا كانت هناك أمثلة يمكنني الاطلاع عليها.
شكرًا مقدمًا!
يجب عليك التسجيل لمشاهدتها، حيث اضطررت لإزالتها من السمة الافتراضية لأنها تسببت في تعطل الصفحة للمستخدمين غير المسجلين. أنشئ حسابًا واختر السمة الداكنة أو الفاتحة من قائمة الهامبرغر لمشاهدتها مباشرة، أو إليك لقطة شاشة إذا لم ترغب في عناء تسجيل الدخول.
شكرًا لك @smrtey، سأقوم بالتسجيل للحصول على نظرة أقرب، لكن لقطة الشاشة تبدو رائعة!
هذا يبدو رائعًا. أود أن أعرف كيف قمت بإعداده، إذا لم يكن ذلك يزعجك.
قام زميلي بإنشاء سكريبت وإعادة تهيئة لقالب الشريط الجانبي، وقد قمت فقط بإضافة تغذية تويتر وبعض ملفات تعريف الارتباط. قال لي إنه يمكنني نشر السكريبت هنا، لذا فإليك السكريبت مع إضافة محتوى تويتر وملفات التنسيق CSS.
تعديل: حسنًا، هو موجود أدناه، لذا سأتركه يتولى الأمر.
انتظروا قليلاً قبل استخدام أي شخص لهذا الكود. إنه أكبر بكثير مما توقعت أن يتم نشره، ومعظمه غير ضروري تماماً لتضمين تغريدة. سأضع نسخة أصغر بكثير قريباً.
حسناً، هذا يجب أن يوفر تغذية تويتر مدمجة كشريط جانبي أيسر في جميع صفحات القوائم. ستحتاج إلى تعديل السطر 60 باستخدام بعض كود HTML المناسب للجدول الزمني الذي تريد تضمينه.
-
انتقل إلى صفحة تويتر هذه وأدخل ما تريد تضمينه، مثل
https://twitter.com/TwitterDev، ثم انقر على “Embedded Timeline” (الجدول الزمني المدمج) -
ستحصل على كود مثل هذا:
<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 أدناه بالرابط الذي توفره تويتر في هذه الصفحة، مع حذف جزء <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، لذا أضفت هذا الكود لإيقافه عليها
<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}
في الواقع، هذه هي الليلة الأولى التي ألقي فيها نظرة فاحصة على أي من محتوى تويتر. أعتقد أنني رأيت أين يمكن إصلاح الأخطاء المعروفة فيه، لكنني لا أملك الوقت للقيام بذلك الآن.
إذا كان أي شخص يرغب في استخدام هذا، فسأجمع كل شيء في مكون موضوع خلال اليوم أو اليومين القادمين.
ها هو كمكون يبدو مستقرًا
يضيف هذا المكون شريطًا جانبيًا لتويتر إلى ملف Discourse discovery/topics.hbs، بحيث يظهر الشريط الجانبي في جميع الصفحات مثل الأحدث، غير المقروءة، الجديدة، الإشارات المرجعية، وما إلى ذلك. لن يتم تحميله إذا لم يكن المستخدم مسجلاً الدخول لأننا لم نتمكن من جعله يعمل إلا عند تسجيل الدخول. كما أنه لا يعمل على نظام iOS، لذا أعتقد أنه معطل على أجهزة iPad، لكنني لا أستطيع اختبار ذلك.
لتحميل تغذيتك على تويتر بدلاً من تغذية Discourse، عليك اتباع التعليمات في السطر 30 من ملف Desktop head_tag.html وإضافة الكود الصحيح في السطر 39.
أعتقد أن المظهر يكون أفضل بكثير إذا قمت بزيادة عرض الحاوية (wrap) في الصفحات التي تتضمن الشريط الجانبي.
ما هو موقع هذا الملف؟
شكرًا، لقد وجدت
جرب مكون السمة “smartery” المرتبط بعدة منشورات بدلاً من ذلك.
لا أعرف ما الذي أخبرك به. واجهت بعض المشاكل في تحميل التغذية حتى أضفت
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
لكن هذا موجود في المكوّن، لذا إذا لم يعمل معك، فإن الشيء الوحيد الذي يمكنني التفكير فيه هو التحقق من إعدادات الأمان الخاصة بك لإعداد “سياسة أمان المحتوى”، وإذا كان هذا الخيار مُفعّلًا
فإنني لا أعتقد أن سكريبتات تويتر ستعمل.
هذا رائع حقًا. جربته ويعمل بشكل ممتاز. عمل رائع!
عندما رأيت هذا الموضوع لأول مرة، ظننت أنه سيكون مختلفًا بعض الشيء. في مجتمعي، يمتلك العديد من الأعضاء حسابات على تويتر. إن تحفيزهم لإجراء محادثات أعمق وطويلة الأمد على المنتدى حول ما ينشرونه على تويتر يمثل تحديًا. سيكون من المثير للاهتمام وجود واجهة لعرض تغذية (feed) وبدء موضوع حول تغريدة معينة! ربما يمكن أن تكون التغذية مرتبطة بوسم (hashtag) معين؟ أو يمكنهم رؤية تغذيتهم الخاصة على تويتر من خلال ملفهم الشخصي وبدء مواضيع من هناك.
شكرًا لك يا سمرتاي، قمت بإلغاء تحديد سياسة أمان المحتوى، ويبدو أن الأمر يعمل الآن. هل لإلغاء تحديد هذا الخيار أي مخاطر أمنية؟