LikeCoin
WebsiteDiscord GitHubSupport Us
English
English
  • Decentralize Publishing
  • Liker Land FAQ
  • 📕DePub
    • Decentralized Publishing
    • Liker Land Affiliation Program
      • Stripe Connect Payout Account Status
    • FAQ: Listing ebooks
    • List ebook
      • List PDF
    • Manage ebooks
      • Manage Book Collection
      • Latest Books
      • Bulk create QR codes and Short URLs
      • NFT Authz Grants
      • ebooks Replenishment
      • Modify ebook
      • Burn ebook
    • Purchase ebooks
      • Gift an ebook
      • Read ebooks
      • Import ebook to ereaders
        • Import ebook to Kobo
      • Other ebook Platforms
        • Terminus Press
        • Dung Foo Kei
        • BookForest
    • Register on Liker Land
      • Resetting password
      • Securing your Liker ID
      • Manage logged in devices
      • Edit Avatar and Name
      • Export Wallet Seed Words
      • What is Authcore?
    • Liker Land features
      • My Bookshelf
      • Notifications
      • Follow Creators
      • NFT Details
    • Transfer NFT
      • Batch send NFT to supporters
    • NFT Tools
    • Writing NFT FAQ
    • Publish Writing NFT
      • Email/Social
      • Keplr
      • Cosmostation
      • Cosmostation app
      • Matters
      • Liker.Social
      • illustBuy
      • Publish NFT with ISCN ID
    • Collect Writing NFT
      • Collect Writing NFT by LIKE on desktop
      • Collect Writing NFT by LIKE on mobile
      • One-Click Collect All Writing NFT
      • NFT Widget
      • Dynamic Pricing
      • NFT Marketplace
    • ISCN
      • What is the relationship between ISCN and IPFS?
      • What's the point of decentralization to the content ecosystem?
      • What type of content is supported by ISCN?
      • How to register an ISCN?
        • Email/Social
        • Keplr
        • Cosmostation
        • Cosmostation app
        • Matters
      • Register ISCN in batch
      • ISCN Browser
  • 🧭General Guides
    • On the News
      • Interviews and Features
      • Activities and Events
      • Mentions
      • Awards and Press Release
      • Recommendations
    • Community
      • #Community Call
      • #open-a-ticket
      • #faucet-testnet
      • #translate-wallet-prefix
      • LikeCoin Discord wallet
      • LIKE this message
    • Faucet
    • Wallet
      • LIKE pay
      • Keplr Browser Extension Wallet
        • Install Keplr and create a new wallet
          • Creating a new Keplr wallet via setting up a new recovery phrase
        • Keplr: Deposit and Send LikeCoin
        • Keplr + dao.like.co: Deposit, send, delegate, governance
        • Import wallet into Keplr
      • Keplr Mobile Wallet
        • How to install Keplr Mobile
        • Keplr Mobile: Deposit and Send LikeCoin
        • Import wallet into Keplr Mobile
      • Cosmostation Browser Extension Wallet
        • How to install Cosmostation Browser Extension
        • Cosmostation: Deposit and Send LikeCoin
        • Cosmostation + dao.like.co: Deposit, send, delegate, governance
        • Import wallet into Cosmostation
      • Cosmostation Mobile Wallet
        • How to install Cosmostation app
        • Cosmostation app: Deposit and Send LikeCoin
        • Import wallet into Cosmostation app
      • Leap Browser Extension Wallet
        • How to install Leap Browser Extension
        • Leap: Deposit and Send LikeCoin
        • Import wallet into Leap
      • Multisig
      • Wallet Address
      • Block Explorer
        • dao.like.co
        • Ping.pub
        • ATOMScan
      • Transaction Fee
      • New LikeCoin address prefix "like" - FAQ
      • Migrating from ERC-20
        • Upgrade LikeCoin ERC-20 to LikeCoin chain
        • LikeCoin Migration FAQ
    • Trade
      • Buy LikeCoin
      • Trade in Osmosis
      • Registering on DigiFinex
      • Trade in DigiFinex
      • Trade in MyEthShop
      • OTC
    • Liquidity
      • Osmosis
    • Stake
      • Delegation of LikeCoin
        • Delegate on desktop
        • Delegate on mobile
      • Undelegation of LikeCoin
        • Undelegate on desktop
        • Undelegate on mobile
      • Redelegation of LikeCoin
        • Redelegate on desktop
        • Redelegate on mobile
      • Where comes the LikeCoin rewards?
    • Governance
      • Community Call
      • LikeCoin chain
      • Liquid Democracy
      • Proposal Deposit
      • Direct Voting
        • Vote on desktop
        • Vote on mobile
      • Validator
        • Community Delegation
        • Validator Report
      • Proposals
    • DApp
      • LikeCoin app
        • Download LikeCoin app
        • Like - Reinventing the Like
        • Super Like - Tweeting to the Space
      • Liker ID
        • Register a Liker ID with Keplr
        • Connecting to my social account
      • Civic Liker
        • How to be a Civic Liker
        • Civic Liker Settings
        • FAQ
        • Creators Fund
        • Rationale and benefits
        • ​Civic Liker Web3 Report
      • Web3Press
      • LikeCoin button
        • Matters
        • Self-Host
          • ghost
          • Hexo
          • Hugo
          • Jekyll
          • mdBook
          • October CMS
          • Others
        • Blogging Platforms
          • inmediahk.net
          • illustBuy
          • Tipga
          • Blink
          • Blogspot
          • SteemCN
          • Wix / Weebly
          • Write.as
      • Content Creator Tools
        • Rewards
        • Monthly Achievement
        • Creators Fund Report
        • Reward Release Time
        • Cannot get reward?
      • Liker.Social
      • depub.space
        • Share tweet from From LikeCoin Discord to depub.space
        • Avatar for depub.space
      • Glossary
    • Branding
      • Design Materials
  • 🔬Developer Guide
    • Developer Introduction
    • LikeCoin chain API
      • Cosmos concepts
      • RPC/LCD API
        • ISCN API
        • NFT API
      • Setup local test node
      • Sample
        • Javascript
        • CosmJS (Recommended)
          • Keplr
          • ISCN
    • LikeCoin API
      • Calling API
      • Authetication
      • Reference
    • LikeCoin button
      • Widget & Iframe
      • Javascript CDN
      • Javascript SDK
    • LIKE pay
      • Web Widget
        • Reference
        • Webhook
    • ISCN
      • Specification
      • Chain API
      • JavaScript
        • iscn-js
        • iscn-message-types
      • Web Widget
        • ISCN Widget
          • ISCN Widget Reference
        • ISCN x Arweave Widget
          • ISCN-AR Widget Reference
      • Batch upload tool
      • ISCN Badge
      • ISCN IPFS plugin
    • LikeCoin NFT
      • LikeCoin NFT Module Spec
      • Metadata best practice
      • Writing NFT Spec
      • NFT Book Spec
      • NFT Portal
        • NFT Portal Reference
      • API Reference
    • likecoin-js
    • Ecosystem Statistics Badge
    • Raise Proposal
  • 👥Validator Guide
    • Technical Introduction
    • LikeCoin chain node
      • Setup a node (mainnet / public testnet)
        • Node Security
        • Setup on docker (Deprecated)
        • Setup on cloud platforms
        • Syncing from genesis
      • Node configuration
      • Command line interface
        • Useful commands
    • Become a validator
    • ChungKing++ Upgrade
    • Previous upgrades
      • ChungKing+ Upgrade
      • ChungKing Upgrade
      • StarFerry Upgrade
      • LaiChiKok Upgrade
      • FoTan Upgrade
        • Overview
        • Software Changes Overview
        • For other full node operators
        • Miscellaneous
    • Legacy endpoints
Powered by GitBook
On this page
  • Instructions
  • Sample Repository
  • Integration Examples
Export as PDF
  1. Developer Guide
  2. LikeCoin button

Widget & Iframe

WidgetEmbed LikeCoin button using <iframe>

PreviousLikeCoin buttonNextJavascript CDN

Last updated 2 years ago

LikeCoin button is available as either an embedded page which can be used in an iframe, or a widget which can be used as a clickable link or popup.

Instructions

Construct an URL according to the following format:

  • Iframe base URL:

https://button.like.co/in/embed/{{LikerID}}/button?iscn_id={{iscn_id}}&referrer={{referrer}}&type={{type}}

  • Widget base URL:

https://button.like.co/in/like/{{LikerID}}?iscn_id={{iscn_id}}&referrer={{referrer}}&type={{type}}

Parameter

Type

Required?

Description

LikerID

string

required if using referrer, set to iscn if using iscn_id

The LikerID of the content author. Set to iscn if using iscn_id

iscn_id

string

either referrer or iscn_id is required

The ISCN ID of the content, overrides referrer

referrer

string

either referrer or iscn_id is required

The source (canonical) URL of the content in encodeURIComponent() format (this also works as the content key)

type

string

optional

wp for WordPress site, omit for the others

preview

number

optional

Set to 1 to set the button to preview mode. This stop the button from automatically calling like.co API. Useful for develop/staging environment e.g. to prevent leaking dev server's address.

For testing purpose, you may use button.rinkeby.like.co instead of button.like.co

Example links:

  • Widget with referrer :

  • Iframe embbed with iscn_id :

In case of iframe sandbox, allow-scripts, allow-same-origin, allow-popups allow-popups-to-escape-sandbox, allow-top-navigation-by-user-activation, allow-storage-access-by-user-activation are needed for proper register/login functionality.

Extra feature for embedded Iframe

  • CSS Style

The LikeCoin button <iframe>'s src (especially the referrer param) should be updated to when the URL is changed. In case updating <iframe>'s src is not possible (e.g. for some SPA usecases), you may call postMessage() to the <iframe> with following payload to update the referrer.

{
  action: 'SET_REFERRER',
  content: { referrer: `${ newReferrer||window.location.href }` }
}, 'https://button.like.co'

Sample Repository

Integration Examples

Embed the and replace {{ src }} with the embed URL into your HTML, include the for recommended display style.

Update referrer via

(Chinese article)

🔬
https://button.rinkeby.like.co/in/like/williamchong-du/?referrer=https%3A%2F%2Fmedium.com%2F%40likecoin_fdn%2Ftest-776059ed593523322
https://button.rinkeby.like.co/in/embed/iscn/button?iscn_id=iscn%3A%2F%2Flikecoin-chain%2Fy4JWyvv9mW6zo9rB0Pp-aPw6_655ljCFJI-B19R6F-g%2F1
sample HTML
CSS code
postMessage
https://github.com/likecoin/LikeCoinButton-integration
https://medium.com/likecoin/likecoin-button-%E6%95%B4%E5%90%88%E6%96%B9%E6%B3%95%E5%92%8C%E7%A4%BA%E7%AF%84-579045858eae