Confession: I can’t code. Don’t know anything about it.
Yet, I want only one thing for my Casper themed Ghost site… well, actually two things.
I want that little button that offers the readers to share an individual post on facebook or twitter.
And it would be nice to offer a comments section, but I don’t want to ask too much.
I’m on the $9 monthly plan, and I have no idea how to get these simple things integrated into my site.
What do you know, and what secrets are you willing to share?
For Sharing Buttons: I would use AddThis following @ericalli 's method below which requires only copy-and-paste code into the Footer code injection in your Ghost site settings…
Built-In/Native Comments are now provided in Ghost…
I looked at ADDThis, and it’s really straight forward. I built everything, then injected the code into the footer @ the casper theme. Nothing happens. What on earth could I be doing wrong by simply copying and pasting the code like they say?
Your screen that says “Commenting,” Mine doesn’t have that.
Is it because I’m on the cheap plan?
In order to help further I would need the URL to your site where you are having the problem.
Can you please confirm that your site is running Casper v5.3.0 on Ghost v5.9.1?
Also, can you please post a screenshot of your Site footer injection field where you put the AddThis code?
Hi, I looked around my site. I just downloaded Casper today, and it says I’m using 5.2.3
Also, my Ghost appears to be 5.8.3.
As you might guess, I’m not sure how to update these. I gave it a shot, but the answer eludes me.
you may want to try:
i am using it for my Ghost site, with some slight code modify in the theme.
a way you could try:
add this to the header code injection:
<style>
.resp-sharing-button__link,
.resp-sharing-button__icon {
display: inline-block
}
.resp-sharing-button__link {
text-decoration: none;
color: #fff;
margin: 0.5em
}
.resp-sharing-button {
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}
.resp-sharing-button__icon svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: top
}
.resp-sharing-button--small svg {
margin: 0;
vertical-align: middle
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
stroke: #fff;
fill: none
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
fill: #fff;
stroke: none
}
.resp-sharing-button--twitter {
background-color: #55acee
}
.resp-sharing-button--twitter:hover {
background-color: #2795e9
}
.resp-sharing-button--pinterest {
background-color: #bd081c
}
.resp-sharing-button--pinterest:hover {
background-color: #8c0615
}
.resp-sharing-button--facebook {
background-color: #3b5998
}
.resp-sharing-button--facebook:hover {
background-color: #2d4373
}
.resp-sharing-button--tumblr {
background-color: #35465C
}
.resp-sharing-button--tumblr:hover {
background-color: #222d3c
}
.resp-sharing-button--reddit {
background-color: #5f99cf
}
.resp-sharing-button--reddit:hover {
background-color: #3a80c1
}
.resp-sharing-button--google {
background-color: #dd4b39
}
.resp-sharing-button--google:hover {
background-color: #c23321
}
.resp-sharing-button--linkedin {
background-color: #0077b5
}
.resp-sharing-button--linkedin:hover {
background-color: #046293
}
.resp-sharing-button--email {
background-color: #777
}
.resp-sharing-button--email:hover {
background-color: #5e5e5e
}
.resp-sharing-button--xing {
background-color: #1a7576
}
.resp-sharing-button--xing:hover {
background-color: #114c4c
}
.resp-sharing-button--whatsapp {
background-color: #25D366
}
.resp-sharing-button--whatsapp:hover {
background-color: #1da851
}
.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }
.resp-sharing-button--vk {
background-color: #507299
}
.resp-sharing-button--vk:hover {
background-color: #43648c
}
.resp-sharing-button--facebook {
background-color: #3b5998;
border-color: #3b5998;
}
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
background-color: #2d4373;
border-color: #2d4373;
}
.resp-sharing-button--twitter {
background-color: #55acee;
border-color: #55acee;
}
.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
background-color: #2795e9;
border-color: #2795e9;
}
</style>
create a snippet (Content snippets) from this:
<!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank" rel="noopener" aria-label="Facebook">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg></div>Facebook</div>
</a>
<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=POST_TITLE&url=YOUR_URL" target="_blank" rel="noopener" aria-label="Twitter">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg></div>Twitter</div>
</a>
replace YOUR_URL = your post url
replace POST_TITLE = title of your post
you may need to add in the snippet every time you make a new post, but it avoids messing with code.