I am looking for someone who can integrate a SNS button shown here.
The button should be shown on every post, but not on replies.
Did you notice Discourse have a share to facebook/twitter button, in that chain icon?
1 Like
Yes, but once I shared, those SNS buttons didn’t appear on my post. Should they appear on it? Also I want those buttons to have the number of people sharing in them.
1 Like
@Fábio Machado De Oliveira, can I ask you to implement this? Or can you suggest someone to implement this?
I don’t work with design, a webdesigner would be the correct person for doing that. I could put these buttons in one of Discourse templates for US$ 20 bucks, in the exact way it is shown in Facebook’s website example.
You should get a quote with someone like @rewphus, that can customize Discourse like this:
https://meta.discourse.org/t/material-design-for-discourse/28864
Thank you, Fábio Machado De Oliveira,
Let me think about how I deal with this.
I wrote some lines about how to customize it here: https://meta.discourse.org/t/how-to-customize-discourse-templates/34813
With that, all you have to do for Facebook is to identify in Discourse’s templates where you want your buttons, and get the code generated at Facebook’s website here: Share Button - Social Plugins - Documentation - Facebook for Developers
I did some test and there was some problem I couldn’t figure to add the Facebook button in a handlebar template.
First I needed this workaround I found on StackOverflow to put javascript in a handlebar tempalte, but it still didn’t work.
This is what I had before I stopped trying:
<script type='text/x-handlebars' data-template-name='topic'>
{{#if model}}
<div class="container">
{{discourse-banner user=currentUser banner=site.banner overlay=view.hasScrolled hide=model.errorLoading}}
</div>
{{/if}}
abcde
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));<{{!}}/script>
<div data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div>
fghij
{{plugin-outlet "topic-above-post-stream"}}
{{#if model.postStream.loaded}}
{{#if model.postStream.firstPostPresent}}
<div id="topic-title">
<div class="container">
<div class="title-wrapper">
{{#if editingTopic}}
{{#if model.isPrivateMessage}}
<span class="private-message-glyph">{{fa-icon "envelope"}}</span>
{{autofocus-text-field id="edit-title" value=buffered.title maxLength=maxTitleLength}}
{{else}}
{{autofocus-text-field id="edit-title" value=buffered.title maxLength=maxTitleLength}}
<br>
{{category-chooser valueAttribute="id" value=buffered.category_id source=buffered.category_id}}
{{/if}}
{{plugin-outlet "edit-topic"}}
{{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
{{else}}
<h1>
{{#unless model.is_warning}}
<span class="private-message-glyph">{{fa-icon "envelope"}}</span>
{{/unless}}
{{#if model.details.loaded}}
{{topic-status topic=model}}
<a href="{{unbound model.url}}" {{action "jumpTop"}} class="fancy-title">
{{{model.fancyTitle}}}
</a>
{{/if}}
{{#if model.details.can_edit}}
<a href {{action "editTopic"}} class="edit-topic" title="{{i18n "edit"}}">{{fa-icon "pencil"}}</a>
{{/if}}
</h1>
{{#unless model.isPrivateMessage}}
{{topic-category topic=model}}
{{/unless}}
{{/if}}
</div>
{{plugin-outlet "topic-title"}}
</div>
</div>
{{/if}}
<div class="container posts">
{{view "selected-posts"}}
<div class="row">
<section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
<div class="posts-wrapper">
{{render "topic-progress"}}
{{conditional-loading-spinner condition=model.postStream.loadingAbove}}
{{#unless model.postStream.loadingFilter}}
{{cloaked-collection itemViewClass="post"
idProperty="post_number"
defaultHeight="200"
content=model.postStream.posts
slackRatio="15"
loadingHTML=""
preservesContext="true"
uncloakDefault="true"
offsetFixedTop="header"
offsetFixedBottom="#reply-control"}}
{{/unless}}
{{conditional-loading-spinner condition=model.postStream.loadingBelow}}
</div>
<div id="topic-bottom"></div>
{{#conditional-loading-spinner condition=model.postStream.loadingFilter}}
{{#if loadedAllPosts}}
{{view "topic-closing" topic=model}}
{{#if session.showSignupCta}}
{{! replace "Log In to Reply" with the infobox }}
{{signup-cta}}
{{else}}
{{view "topic-footer-buttons" topic=model}}
{{/if}}
{{#if model.pending_posts_count}}
<div class="has-pending-posts">
{{{i18n "queue.has_pending_posts" count=model.pending_posts_count}}}
{{#if currentUser.show_queued_posts}}
{{#link-to "queued-posts"}}
{{fa-icon "check"}}
{{i18n "queue.view_pending"}}
{{/link-to}}
{{/if}}
</div>
{{/if}}
{{plugin-outlet "topic-above-suggested"}}
{{#if model.details.suggested_topics.length}}
<div id="suggested-topics">
<h3>{{i18n "suggested_topics.title"}}</h3>
<div class="topics">
{{basic-topic-list topics=model.details.suggested_topics postsAction="showTopicEntrance"}}
</div>
<h3>{{{view.browseMoreMessage}}}</h3>
</div>
{{/if}}
{{/if}}
{{/conditional-loading-spinner}}
</section>
</div>
</div>
{{else}}
<div class="container">
{{#conditional-loading-spinner condition=noErrorYet}}
{{#if model.notFoundHtml}}
<div class="not-found">{{{model.notFoundHtml}}}</div>
{{else}}
<div class="topic-error">
<div>{{model.message}}</div>
{{#if model.noRetry}}
{{#unless currentUser}}
{{d-button action="showLogin" class="btn-primary topic-retry" icon="user" label="log_in"}}
{{/unless}}
{{else}}
{{d-button action="retryLoading" class="btn-primary topic-retry" icon="refresh" label="errors.buttons.again"}}
{{/if}}
</div>
{{conditional-loading-spinner condition=retrying}}
{{/if}}
{{/conditional-loading-spinner}}
</div>
{{/if}}
{{render "share"}}
{{#if currentUser.enable_quoting}}
{{render "quote-button"}}
{{/if}}
{{#if currentUser.canManageTopic}}
{{show-popup-button action="showTopicAdminMenu" class="show-topic-admin" title="topic_admin_menu" icon="wrench"}}
{{#popup-menu visible=adminMenuVisible hide="hideTopicAdminMenu" title="admin_title"}}
<li>
{{d-button action="toggleMultiSelect" icon="tasks" label="topic.actions.multi_select"}}
</li>
{{#if model.details.can_delete}}
<li>
{{d-button action="deleteTopic" icon="trash-o" label="topic.actions.delete" class="btn-danger"}}
</li>
{{/if}}
{{#if showRecover}}
<li>
{{d-button action="recoverTopic" icon="undo" label="topic.actions.recover"}}
</li>
{{/if}}
<li>
{{#if model.closed}}
{{d-button action="toggleClosed" icon="unlock" label="topic.actions.open"}}
{{else}}
{{d-button action="toggleClosed" icon="lock" label="topic.actions.close"}}
{{d-button action="showAutoClose" icon="clock-o" label="topic.actions.auto_close"}}
{{/if}}
</li>
{{#unless model.isPrivateMessage}}
{{#if model.visible}}
<li>
{{#if isFeatured}}
{{d-button action="showFeatureTopic" icon="thumb-tack" label="topic.actions.unpin"}}
{{else}}
{{d-button action="showFeatureTopic" icon="thumb-tack" label="topic.actions.pin"}}
{{/if}}
</li>
{{/if}}
{{/unless}}
<li>
{{d-button action="showChangeTimestamp" icon="calendar" label="topic.change_timestamp.title"}}
</li>
<li>
{{#if model.archived}}
{{d-button action="toggleArchived" icon="folder" label="topic.actions.unarchive"}}
{{else}}
{{d-button action="toggleArchived" icon="folder" label="topic.actions.archive"}}
{{/if}}
</li>
<li>
{{#if model.visible}}
{{d-button action="toggleVisibility" icon="eye-slash" label="topic.actions.invisible"}}
{{else}}
{{d-button action="toggleVisibility" icon="eye" label="topic.actions.visible"}}
{{/if}}
</li>
{{plugin-outlet "topic-admin-menu-buttons"}}
{{/popup-menu}}
{{/if}}
</script>
1 Like
Thnak you, Fabio. Since I am not s programmer, I will pass this post to my programmer. Anyway, thanks again for your help!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.