# Looking to hire someone who can integrate SNS buttons

**URL:** <https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592>\
**Category:** Marketplace\
**Created:** [2015年十月16日 09:58 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592 "2015-10-16T09:58:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)\
**Post date:** [2015年十月16日 09:58 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/1 "2015-10-16T09:58:44Z")

</div>

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.

![](https://global.discourse-cdn.com/meta/original/3X/a/8/a8c19ca56d370c487340e20f42d5a431978a0663.png)

---

<div class="post-metadata">

**Author:** ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)\
**Post date:** [2015年十月16日 18:35 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/2 "2015-10-16T18:35:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)\
**Post date:** [2015年十月16日 18:41 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/3 "2015-10-16T18:41:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)\
**Post date:** [2015年十月20日 07:40 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/5 "2015-10-20T07:40:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)\
**Post date:** [2015年十月21日 23:30 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/6 "2015-10-21T23:30:15Z")

</div>

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](https://meta.discourse.org/t/material-design-for-discourse/28864)

---

<div class="post-metadata">

**Author:** ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)\
**Post date:** [2015年十月22日 06:59 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/7 "2015-10-22T06:59:08Z")

</div>

Thank you, Fábio Machado De Oliveira,

Let me think about how I deal with this.

---

<div class="post-metadata">

**Author:** ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)\
**Post date:** [2015年十月22日 18:14 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/8 "2015-10-22T18:14:15Z")

</div>

I wrote some lines about how to customize it here: [https://meta.discourse.org/t/how-to-customize-discourse-templates/34813](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: [https://developers.facebook.com/docs/plugins/share-button#example](https://developers.facebook.com/docs/plugins/share-button#example)

---

<div class="post-metadata">

**Author:** ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)\
**Post date:** [2015年十月22日 19:03 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/9 "2015-10-22T19:03:38Z")

</div>

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](http://stackoverflow.com/questions/17369855/is-it-possible-to-use-javascript-inside-handlebars-js-template) 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>

```

---

<div class="post-metadata">

**Author:** ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)\
**Post date:** [2015年十月23日 02:21 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/10 "2015-10-23T02:21:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2015年十一月22日 02:22 UTC](https://meta.discourse.org/t/looking-to-hire-someone-who-can-integrate-sns-buttons/34592/11 "2015-11-22T02:22:05Z")

</div>

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