How to set social media buttons on Tumblr theme?

Question

Despite not really having much knowledge on html I've somewhat managed to arrange a Tumblr theme for a blog the way I want it thanks to tutorials online etc.

Only thing missing is I would like my posts to have a couple of social sharing buttons.

But following the tutorials I find online doesn't work, I believe it's because this theme is different and already has some buttons set (Tumblr reblog/like/etc)?

I have this code I created following a tutorial and grabbing some custom icons from deviantart.

{block:PermalinkPage}{block:PermalinkPagination}
<a target="_new" href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}"><img style="border: 0pt none;" src="http://orig00.deviantart.net/8cf5/f/2016/316/5/8/twitter_icon_by_aquasparkles-dao40yu.png" width="20" height="20" /></a>
<a target="_new" href="https://www.facebook.com/sharer.php?u={Permalink}{block:Title}&t={Title}{/block:Title}"><img style="border: 0pt none;" src="http://orig10.deviantart.net/5fb3/f/2017/103/f/f/facebook_icon_by_aquasparkles-db5mtq8.png" width="20" height="20" /></a>
<a target="_new" href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}"><img style="border: 0pt none;" src="http://orig03.deviantart.net/49e0/f/2016/181/3/4/pinterest_icon_by_aquasparkles-da86kds.png"> width="20" height="20" /></a>
{/block:PermalinkPagination}{/block:PermalinkPage} 

But putting it before or at the end of {block:Posts} like the site suggests doesn't seem to work.

So I don't know what to do. Ideally it would be great if they could appear behind or after the other buttons already in the theme for every post, but I don't know where they are in the code. If that is too complicated to do, even just appearing under each post will be enough.

The theme I'm using is here . The Tumblr page is here .

Answer 1

Tumblr - Creating informative shares from the index page.

Tumblr lacks the relevant template tags when a share request is made from the index page.

Currently there are variables {PostTitle} and {PostSummary} , but these only rendered on the Permalink page.

The Goal

The goal is to replicate the information Tumblr creates for the Facebook OG meta tags (which is rendered on the permalink page). Although it is possible to generate the correct OG tags on the index page, this only provides support for Facebook, so other networks still need padding out.

Breakdown

For each post type we should generate and include, if possible, the following {Post} information:

1. Title
2. URL
3. Description
4. Image

It is presumed your share urls will be inside the corresponding post type block. For sanity utilise: {Plaintext} and {URLEncoded} for creating strings.

Afaik this covers all post types. That being said, this is not a complete solution. Some things will be missing due to the nature of embeds (Videos / Audio I am looking at you here!).

If you find any problems fork / comment and I will do my best to assist.

---

Text Post Breakdown:

1. {block:Title}{PlaintextTitle}{/block:Title}
2. {URLEncodedPermalink}
3. {PlaintextBody}
4. http://assets.tumblr.com/images/og/text_200.png

Facebook

{block:Text}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:Title}{PlaintextTitle}{/block:Title}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/text_200.png&p[summary]={PlaintextBody}{/block:Text}

Twitter

{block:Text}https://twitter.com/intent/tweet?text={block:Title}{PlaintextTitle}%20-%20{/block:Title}&url={URLEncodedPermalink}{/block:Text}

Google Plus

{block:Text}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Text}

Pinterest

{block:Text}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Title}{PlaintextTitle}{/block:Title}&media=http://assets.tumblr.com/images/og/text_200.png{/block:Text}

Reddit

{block:Text}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Title}{PlaintextTitle}{/block:Title}{/block:Text}

---

Photo Post Breakdown:

1. {PlaintextTitle}
2. {URLEncodedPermalink}
3. {block:Caption}{PlaintextCaption}{/block:Caption}
4. {URLEncodedPhotoURL-250}

Facebook

{block:Photo}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextTitle}&p[url]={URLEncodedPermalink}&p[images][0]={URLEncodedPhotoURL-250}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photo}

Twitter

{block:Photo}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Photo}

Google Plus

{block:Photo}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Photo}

Pinterest

{block:Photo}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}&media={URLEncodedPhotoURL-250}{/block:Photo}

Reddit

{block:Photo}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photo}

---

Photoset Post Breakdown:

1. {PlaintextTitle}
2. {URLEncodedPermalink}
3. {block:Caption}{PlaintextCaption}{/block:Caption}
4. {block:Photos}{URLEncodedPhotoURL-250}{/block:Photos} (* The last image in the set will be used)

Facebook

{block:Photoset}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextTitle}&p[url]={URLEncodedPermalink}{block:Photos}&p[images][0]={URLEncodedPhotoURL-250}{/block:Photos}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photoset}

Twitter

{block:Photoset}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Photoset}

Google Plus

{block:Photoset}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Photoset}

Pinterest

{block:Photoset}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}{block:Photos}&media={URLEncodedPhotoURL-250}{/block:Photos}{/block:Photoset}

Reddit

{block:Photoset}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photoset}

---

Quote Post Breakdown:

1. {PlaintextQuote}
2. {URLEncodedPermalink}
3. 4. http://assets.tumblr.com/images/og/quote_200.png

Facebook

{block:Quote}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextQuote}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/quote_200.png{/block:Quote}

Twitter

{block:Quote}https://twitter.com/intent/tweet?text={PlaintextQuote}%20-%20&url={URLEncodedPermalink}{/block:Quote}

Google Plus

{block:Quote}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Quote}

Pinterest

{block:Quote}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={PlaintextQuote}&media=http://assets.tumblr.com/images/og/quote_200.png{/block:Quote}

Reddit

{block:Quote}http://reddit.com/submit?url={URLEncodedPermalink}&title={PlaintextQuote}{/block:Quote}

---

Link Post Breakdown:

1. {PlaintextName}
2. {URLEncodedPermalink}
3. {block:Description}{PlaintextDescription}{/block:Description}
4. http://assets.tumblr.com/images/og/link_200.png

Facebook

{block:Link}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextName}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/link_200.png&p[summary]={block:Description}{PlaintextDescription}{/block:Description}{/block:Link}

Twitter

{block:Link}https://twitter.com/intent/tweet?text={PlaintextName}%20-%20&url={URLEncodedPermalink}{/block:Link}

Google Plus

{block:Link}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Link}

Pinterest

{block:Link}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={PlaintextName}&media=http://assets.tumblr.com/images/og/link_200.png{/block:Link}

Reddit

{block:Link}http://reddit.com/submit?url={URLEncodedPermalink}&title={PlaintextName}{/block:Link}

---

Chat Post Breakdown:

1. {block:Title}{PlaintextTitle}{/block:Title}
2. {URLEncodedPermalink}
3. {block:Lines}{block:Label}{PlaintextLabel}{/block:Label}{PlaintextLine}%0A{/block:Lines}
4. http://assets.tumblr.com/images/og/link_200.png

Facebook

{block:Chat}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:Title}{PlaintextTitle}{/block:Title}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/chat_200.png&p[summary]={block:Lines}{block:Label}{PlaintextLabel}{/block:Label}{PlaintextLine}%0A{/block:Lines}{/block:Chat}

Twitter

{block:Chat}https://twitter.com/intent/tweet?text={block:Title}{PlaintextTitle}{/block:Title}%20-%20&url={URLEncodedPermalink}{/block:Chat}

Google Plus

{block:Chat}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Chat}

Pinterest

{block:Chat}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Title}{PlaintextTitle}{/block:Title}&media=http://assets.tumblr.com/images/og/chat_200.png{/block:Chat}

Reddit

{block:Chat}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Title}{PlaintextTitle}{/block:Title}{/block:Chat}

---

Audio Post Breakdown:

1. {block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}
2. {URLEncodedPermalink}
3. {block:Caption}{PlaintextCaption}{/block:Caption}
4. {block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}

Facebook

{block:Audio}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}&p[url]={URLEncodedPermalink}&p[images][0]={block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Audio}

Twitter

{block:Audio}https://twitter.com/intent/tweet?text={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}%20%3A%20&url={URLEncodedPermalink}{/block:Audio}

Google Plus

{block:Audio}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Audio}

Pinterest

{block:Audio}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}&media={block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}{/block:Audio}

Reddit

{block:Audio}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}{/block:Audio}

---

Video Post Breakdown:

1. {PlaintextName}
2. {URLEncodedPermalink}
3. {block:Caption}{PlaintextCaption}{/block:Caption}
4. {block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}

Facebook

{block:Video}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextName}&p[url]={URLEncodedPermalink}&p[images][0]={block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Video}

Twitter

{block:Video}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Video}

Google Plus

{block:Video}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Video}

Pinterest

{block:Video}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}&media={block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}{/block:Video}

Reddit

{block:Video}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Video}

---

Answer Post Breakdown:

1. {lang:Asker asked}%3A%0A{PlaintextQuestion}
2. {URLEncodedPermalink}
3. {PlaintextAnswer}
4. http://assets.tumblr.com/images/og/chat_200.png

Facebook

{block:Answer}https://twitter.com/intent/tweet?text={lang:Asker asked}%3A%0A{PlaintextQuestion}%20-%20&url={URLEncodedPermalink}{/block:Answer}

Twitter

{block:Answer}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Answer}

Google Plus

{block:Answer}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={lang:Asker asked}%3A%0A{PlaintextQuestion}&media=http://assets.tumblr.com/images/og/chat_200.png{/block:Answer}

Pinterest

{block:Answer}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Answer}

Reddit

 {block:Answer}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Answer}