javascript - Discover Meteor Microscope Share It Button -
how add "share" button on left of "discuss" button. wanted button same style/color current "discuss" button.
i added package https://atmospherejs.com/joshowens/shareit
i added {{>shareit}} post_item.html.
<template name="postitem"> <div class="post"> <a href="#" class="upvote btn btn-default {{upvotedclass}}">$</a> <div class="post-content"> <h3>{{title}}</h3> <p> {{pluralize votes "vote"}}, {{author}}, <a href="{{pathfor 'postpage'}}">{{pluralize commentscount "comment"}}</a> {{#if ownpost}}<a href="{{pathfor 'postedit'}}">edit</a>{{/if}} </p> </div> <a href="{{pathfor 'postpage'}}" class="discuss btn btn-default">reply</a> </div> </template>
this suppose configure it. place in post.item.html? if so, how? want twitter button.
shareit.configure({ usefb: true, // boolean (default: true) // whether show facebook button usetwitter: true, // boolean (default: true) // whether show twitter button usegoogle: true, // boolean (default: true) // whether show google+ button classes: "large btn", // string (default: 'large btn') // classes placed on sharing buttons, bootstrap default. icononly: false, // boolean (default: false) // don't put text on sharing buttons applycolors: true // boolean (default: true) // apply classes inherit each social networks background color });
does go in post_item.js enable image cards? couldn't figure out how put in without errors.
template.article.helpers({ sharedata: function() { return { title: this.data, author: meteor.users.findone(this.authorid) } });
here post_item.js file.
template.postitem.helpers({ ownpost: function() { return this.userid == meteor.userid(); }, upvotedclass: function() { var userid = meteor.userid(); if (userid && !_.include(this.upvoters, userid)) { return 'btn-primary upvotable'; } else { return 'disabled'; } } }); template.postitem.events({ 'click .upvotable': function(e) { e.preventdefault(); meteor.call('upvote', this._id); } });
so have template:
<template name="postitem"> ... {{>shareit sharedata}} </template>
which means have template object match somewhere:
template.postitem
this wrapped in following:
if (meteor.isclient) { template.postitem.helpers({ // helper can hang out here: sharedata: function() { return { title: this.data, author: meteor.users.findone(this.authorid) }; }; }); // can put shareit.configure here: shareit.configure({ usefb: false, usetwitter: true, usegoogle: false, classes: "large btn", icononly: true, applycolors: true }); };
the above display twitter icon.
now files put in depends on application structure. if have post_item.js , being send client (for example, in client folders of project, or not in different special use folder of project, described here: http://docs.meteor.com/#/full/structuringyourapp) above should work you. if errors, feel free add them question can help!
Comments
Post a Comment