Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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