LOADING

This tutorial is dedicated to managing social icons in the header/navigation menu.

To customize each social icon you should use the following:

For Account 3.0:

  • Facebook: .story nav.story-nav-bar ul.navbar-nav div.social-icons em.facebook;
  • Twitter: .story nav.story-nav-bar ul.navbar-nav div.social-icons em.twitter;
  • LinkedIn: .story nav.story-nav-bar ul.navbar-nav div.social-icons em.linkedin;
  • Pinterest: .story nav.story-nav-bar ul.navbar-nav div.social-icons em.pinterest;
  • Tumblr: .story nav.story-nav-bar ul.navbar-nav div.social-icons em.tumblr.

For Account 2.0:

  • Facebook: .story .account-nav ul.navbar-nav li.social-nav .facebook;
  • Twitter: .story .account-nav ul.navbar-nav li.social-nav .twitter;
  • LinkedIn: .story .account-nav ul.navbar-nav li.social-nav .linkedin;
  • Pinterest: .story .account-nav ul.navbar-nav li.social-nav .pinterest;
  • Tumblr: .story .account-nav ul.navbar-nav li.social-nav .tumblr.

Delete (Hide) Social Icon

To hide a social icon you should:

  1. Create a Code Block in a Story
  2. Add the code snippet with the following style rule: display: block;
  <!-- For Account 3.0-->
<style>
  .story nav.story-nav-bar ul.navbar-nav div.social-icons em.facebook {
    display: none;
  }
</style>

<!-- For Account 2.0-->
<style>
  .story .account-nav ul.navbar-nav li.social-nav .facebook {
    display: none;
  }
</style>

Add a Social Icon

Adding a social icon is bit more complicated - an additional Code snippet should be used.

Step 1.

To generate a new Social Icon, you can use a dedicated service, say https://sharingbuttons.io/.
After generating needed list of social icons, you should add the Code Element to Story, here are the steps:

  1. Copy social icons you created
  2. Wrap them with the div HTML tag
  3. Paste it in the Code block.

Once you complete the first step, the code should look like:

<div id="additional-social-icons" class="inactive">
<!-- Sharingbutton E-Mail -->
<a class="resp-sharing-button__link" href="mailto:?subject=Amazing%20Storytelling%20platform.&body=https%3A%2F%2Ftutorials.fabl.co%2Fadd-or-delete-social-icons" target="_self" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm8 16c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v8z"/><path d="M17.9 8.18c-.2-.2-.5-.24-.72-.07L12 12.38 6.82 8.1c-.22-.16-.53-.13-.7.08s-.15.53.06.7l3.62 2.97-3.57 2.23c-.23.14-.3.45-.15.7.1.14.25.22.42.22.1 0 .18-.02.27-.08l3.85-2.4 1.06.87c.1.04.2.1.32.1s.23-.06.32-.1l1.06-.9 3.86 2.4c.08.06.17.1.26.1.17 0 .33-.1.42-.25.15-.24.08-.55-.15-.7l-3.57-2.22 3.62-2.96c.2-.2.24-.5.07-.72z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Reddit -->
<a class="resp-sharing-button__link" href="https://reddit.com/submit/?url=https%3A%2F%2Ftutorials.fabl.co%2Fadd-or-delete-social-icons" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9.391" cy="13.392" r=".978"/><path d="M14.057 15.814c-1.14.66-2.987.655-4.122-.004-.238-.138-.545-.058-.684.182-.13.24-.05.545.19.685.72.417 1.63.646 2.568.646.93 0 1.84-.228 2.558-.642.24-.13.32-.44.185-.68-.14-.24-.445-.32-.683-.18zM5 12.086c0 .41.23.78.568.978.27-.662.735-1.264 1.353-1.774-.2-.207-.48-.334-.79-.334-.62 0-1.13.507-1.13 1.13z"/><path d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm6.673 14.055c.01.104.022.208.022.314 0 2.61-3.004 4.73-6.695 4.73s-6.695-2.126-6.695-4.74c0-.105.013-.21.022-.313C4.537 13.73 4 12.97 4 12.08c0-1.173.956-2.13 2.13-2.13.63 0 1.218.29 1.618.757 1.04-.607 2.345-.99 3.77-1.063.057-.803.308-2.33 1.388-2.95.633-.366 1.417-.323 2.322.085.302-.81 1.076-1.397 1.99-1.397 1.174 0 2.13.96 2.13 2.13 0 1.177-.956 2.133-2.13 2.133-1.065 0-1.942-.79-2.098-1.81-.734-.4-1.315-.506-1.716-.276-.6.346-.818 1.395-.88 2.087 1.407.08 2.697.46 3.728 1.065.4-.468.987-.756 1.617-.756 1.17 0 2.13.953 2.13 2.13 0 .89-.54 1.65-1.33 1.97z"/><circle cx="14.609" cy="13.391" r=".978"/><path d="M17.87 10.956c-.302 0-.583.128-.79.334.616.51 1.082 1.112 1.352 1.774.34-.197.568-.566.568-.978 0-.623-.507-1.13-1.13-1.13z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Telegram -->
<a class="resp-sharing-button__link" href="https://telegram.me/share/url?text=Amazing%20Storytelling%20platform.&url=https%3A%2F%2Ftutorials.fabl.co%2Fadd-or-delete-social-icons" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--telegram resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 23.5c6.35 0 11.5-5.15 11.5-11.5S18.35.5 12 .5.5 5.65.5 12 5.65 23.5 12 23.5zM2.505 11.053c-.31.118-.505.738-.505.738s.203.62.513.737l3.636 1.355 1.417 4.557a.787.787 0 0 0 1.25.375l2.115-1.72a.29.29 0 0 1 .353-.01L15.1 19.85a.786.786 0 0 0 .746.095.786.786 0 0 0 .487-.573l2.793-13.426a.787.787 0 0 0-1.054-.893l-15.568 6z" fill-rule="evenodd"/></svg>
    </div>
  </div>
</a>
</div>

Pay attention that Div HTML tag should have ‘id’ attribute. Lately this attribute will be used to assign styles to the div.

Step 2.

Next step is to add created social items to the fabl built-in social menu. To do this, you should add the following code snippet into a Code block:

<script>
cb(function () {
  let socialIcons = document.querySelector('.story nav.story-nav-bar ul.navbar-nav.navbar-right li:first-of-type');
  let newSocialIcon = document.getElementById('additional-social-icons');
  socialIcons.append(newSocialIcon);
  newSocialIcon.classList.remove('inactive');
  newSocialIcon.classList.add('active');
});
</script>

Step 3.

The last step is to assign necessary styles according to steps, described in the very first part of this tutorial.

For instance, basic styles for our example is the next:

<style>
    .story nav.story-nav-bar ul.navbar-nav.navbar-right li:first-of-type > a {
      margin-right: 0px;
    }
    
    .story nav.story-nav-bar ul.navbar-nav.navbar-right li:first-of-type,
    #additional-social-icons.active {
      display: flex;
      align-items: center;
    }
      
    #additional-social-icons.inactive {
      display: none;
    }
      
    #additional-social-icons a.resp-sharing-button__link div.resp-sharing-button__icon {
      width: 18px;
      height: 18px;
    }
      
    #additional-social-icons a.resp-sharing-button__link {
      padding: 0 8px;
    }
      
    #additional-social-icons a.resp-sharing-button__link svg {
      fill: #00b881;
    }
    
    @media (max-width: 768px) {
      .story nav.story-nav-bar ul.navbar-nav.navbar-right li:first-of-type {
        justify-content: center;
      }
    }
</style>

The result is presented on the image below

Powered by

Share In Social Networks

Next

How to Open Hyperlinks in a New Browser Tab or Window

in Fabl stories