Looking to hire someone who can integrate SNS buttons


#1

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.


(Fábio Machado De Oliveira) #2

Did you notice Discourse have a share to facebook/twitter button, in that chain icon?


#3

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.


#5

@Fábio Machado De Oliveira, can I ask you to implement this? Or can you suggest someone to implement this?


(Fábio Machado De Oliveira) #6

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:


#7

Thank you, Fábio Machado De Oliveira,

Let me think about how I deal with this.


(Fábio Machado De Oliveira) #8

I wrote some lines about how to customize it here: How to customize Discourse templates

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


(Fábio Machado De Oliveira) #9

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>

#10

Thnak you, Fabio. Since I am not s programmer, I will pass this post to my programmer. Anyway, thanks again for your help!


(system) #11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.