Pocket Button Documentation

The Pocket Button allows viewers to quickly and seamlessly save your content to their Pocket list. All you have to do is copy and paste a few lines of code to your site and you'll be ready to go!

Get Your Button Code

To start, you'll want to use the Pocket Button generator to create your button. In most cases you can simply drop the code onto your site and be done!

Create a Pocket Button

Adding Multiple Buttons Per Page

A common place that you may want to include Pocket buttons is alongside multiple links on your homepage or on an index page that lists several articles. This is easy to support with a slight addition to the code that you've already generated.

In order to support multiple buttons on a page, you place the button code anywhere you would like a Pocket button to appear. Then, for each button, you will need to simply add a data-save-url attribute to the <a> in your button code. The value of this attribute should be the url of the corresponding link that you are placing the button next to. 

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="http://yourDomain.com/the/page/to/save.html"
  data-pocket-count="vertical" 
  data-pocket-align="left"
  >Pocket</a>
<script type="text/javascript">...

Note: If you are editing a template on a site or CMS like Wordpress, Tumblr, or Blogger, there often is a template variable that you can use to give the permalink of the page. You would use this instead of an actual url. For example, on Tumblr, you'd update the button code to read: 

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="{Permalink}"
  data-pocket-count="vertical" 
  data-pocket-align="left"
  >Pocket</a>
<script type="text/javascript">...

Adjusting Attributes Dynamically

If you are generating the button code yourself, there are 3 parameters that can be adjusted on each button to configure it's appearance and functionality. Below is an example that shows all 3 in use: 

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="http://yourDomain.com/page.html"
  data-pocket-count="vertical" 
  data-pocket-align="left"
  >Pocket</a>
<script type="text/javascript">...
data-save-url

This is the url that will be saved when the button is clicked. If the data-pocket-count attribute is set to show a counter, the counter will show the number of saves of the provided url.

You generally only need to use this property when you want to display multiple Pocket buttons on the same page, for example, on your homepage that lists several articles.

If the data-save-url property is not set, the button will use the url of the page that the button appears on.

data-pocket-count
Value for data-pocket-count none horizontal vertical
How it looks Pocket Pocket Pocket
data-pocket-align

This property is really only useful when using a button with data-pocket-count set to horizontal. It sets how the button will align inside of the button's iframe.

If you align a Pocket button with a horizontal count to the right side of a page, you should set data-pocket-align to right. This will ensure that the button stays flush to the right side and grows to the left as the counter increases.