Social Sharing Alternative

For an additional option, check out Social Sharing Alternative 2

 

Working only with Essential Grid 1.5.0+ !!

Some of you wanted to have the same Social Sharing in the Grid Items as we presented in our themepunch.com/essential Header content. So we just wanted to give you a short HOW TO here.

  • Please Create a new Skin by clicking on the Create New Skin button in the Skin Editor.
    createnewskin
  • Set the Skin to Masonry and set the Content background color to gray i.e
    skinsettingsaskinsettingsb
  • Add a new Layer to the Masonry Content part.
    skinsettingsc
  • Change the Source type to HTML and add the following content there:
    skin-setting-1

    <a class="shareme" href="#" data-social='{"type":"facebook", "url":"%eg-demogrid-link%", "text":"All-Purpose Grid Building Solution for WordPress"}' title="Share this">
    <div class="headerlikes hlfblike"><i class="icon-facebook headerlikesicon" style="font-size:17px" ></i>
    <div class="likesamount" data-url="%eg-demogrid-link%" data-liketype="facebook">0</div>
    </div></a><a class="shareme" href="#" data-social='{"type":"twitter", "url":"%eg-demogrid-link%", "text":"All-Purpose Grid Building Solution for WordPress"}' title="Share this">
    <div class="headerlikes hltwlike"><i class="icon-twitter headerlikesicon" style="font-size:17px" ></i>
    <div class="likesamount" data-url="%eg-demogrid-link%" data-liketype="twitter">0</div>
    </div></a><a class="shareme" href="#" data-social='{"type":"pinterest", "url":"%eg-demogrid-link%", "text":"All-Purpose Grid Building Solution for WordPress"}' title="Share this">
    <div class="headerlikes hlpinterest"><i class="icon-s-pinterest headerlikesicon" style="font-size:17px" ></i>
    <div class="likesamount" data-url="%eg-demogrid-link%" data-liketype="pinterest">0</div>
    </div></a><a class="shareme" href="#" data-social='{"type":"plusone", "url":"%eg-demogrid-link%", "text":"All-Purpose Grid Building Solution for WordPress"}' title="Share this">
    <div class="headerlikes hlgplus lastlikes"><i class="icon-gplus headerlikesicon" style="font-size:17px" ></i>
    <div class="likesamount" data-url="%eg-demogrid-link%" data-liketype="google">0</div>
    </div></a>
  • Add some CSS Settings in the Global Styling (note, i named the skin here social shares, so you will may need to correct the prefix of the classitemskin-settings-2
    .eg-socialshares-element-1 .headerlikes { display:inline-block !important}
    .eg-socialshares-element-1 .likesamount { display:inline-block !important}
  • Save the Skin and Create a New Grid
  • Select Sources, and set the Layout of the Grid to Masonry as well
  • Select the New Skin you created as used Skin in the Skin Tab
  • Add the following Scripts to the API / Script Tab:
    grid-api-settings

View Example Here

SOCIAL SHARE ALTERNATIVE EXAMPLE

Download

Json Export File