{"id":953,"date":"2025-01-25T01:18:12","date_gmt":"2025-01-25T01:18:12","guid":{"rendered":"https:\/\/tableberg.com\/?p=953"},"modified":"2025-01-25T01:18:17","modified_gmt":"2025-01-25T01:18:17","slug":"how-to-add-buy-on-amazon-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-add-buy-on-amazon-button-in-wordpress\/","title":{"rendered":"WordPress\u3067\u300cAmazon\u3067\u8cfc\u5165\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5\uff083\u3064\u306e\u65b9\u6cd5\uff09"},"content":{"rendered":"<p>Amazon is one of the biggest eCommerce marketplaces both for retailers and wholesalers. Not only vendors and customers but also many affiliate marketers join Amazon to earn commissions by promoting products and services on this platform.<\/p>\n\n\n\n<p>\u30a2\u30de\u30be\u30f3\u3067\u8cfc\u5165\u3059\u308b\u300d\u30dc\u30bf\u30f3\u306f\u3001\u300c\u30a2\u30de\u30be\u30f3\u3067\u8cfc\u5165\u3059\u308b\u300d\u30dc\u30bf\u30f3\u306b\u904e\u304e\u306a\u3044\u3002 <a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-call-to-action-button-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">CTA button<\/a> \u30a2\u30d5\u30a3\u30ea\u30a8\u30a4\u30c8\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u62c5\u5f53\u8005\u306f\u3001\u81ea\u5206\u306e\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u8ffd\u52a0\u3059\u308b\u3002\u3053\u306e\u30dc\u30bf\u30f3\u3092\u4f7f\u3048\u3070\u3001\u30e6\u30fc\u30b6\u30fc\u3092\u7279\u5b9a\u306e\u5546\u54c1\u30da\u30fc\u30b8\u306b\u8a98\u5c0e\u3057\u3001\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5546\u54c1\u3092\u8cfc\u5165\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n<p>In this article, we\u2019ll show you three easy methods of how to add <strong>\u2018Buy on Amazon\u2019<\/strong> button in WordPress. Get ready to explore.<\/p>\n\n\n<div class=\"wp-block-tableberg-wrapper wp-block-tableberg-table\" >\n\t\t\t<div class=\"tableberg-table-wrapper\" style=\"border-color: #abb8c3; \">\n\t\t\t\t<table class = \"has-inner-border\" style=\"border-spacing: 0 0; --tableberg-cell-padding-top: var(--wp--preset--spacing--medium); --tableberg-cell-padding-bottom: var(--wp--preset--spacing--medium); --tableberg-inner-border-top: none; --tableberg-inner-border-right: 1px solid #abb8c3; --tableberg-inner-border-bottom: 1px solid #abb8c3; --tableberg-inner-border-left: none; --tableberg-inner-border-top-first: 1px solid #abb8c3; --tableberg-inner-border-left-first: 1px solid #abb8c3; \" data-tableberg-header=\"\" data-tableberg-footer=\"\" data-tableberg-responsive data-tableberg-rows=\"1\" data-tableberg-cols=\"3\" data-tableberg-mobile-width=\"700\" data-tableberg-mobile-mode=\"stack\" data-tableberg-mobile-direction=\"row\" data-tableberg-mobile-count=\"1\" data-tableberg-mobile-header=\"1\" ><colgroup><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><\/colgroup><tbody><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"0\" data-tableberg-col=\"0\" style=\"--tableberg-block-spacing: var(--wp--preset--spacing--small); \" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Simple-Buy-on-Amazon-Button.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 150px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure>\n\n\n<p class=\"has-text-align-center\"><strong>\u65b9\u6cd51<\/strong>: <a href=\"#Using-the-default-Buttons-Block\">\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30dc\u30bf\u30f3\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u3046<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"0\" data-tableberg-col=\"1\" style=\"--tableberg-block-spacing: var(--wp--preset--spacing--small); \" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-with-Icon.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 150px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure>\n\n\n<p class=\"has-text-align-center\"><strong>\u65b9\u6cd52<\/strong>: <a href=\"#Using-the-Ultimate-Blocks\">\u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af\u306e\u4f7f\u7528<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"0\" data-tableberg-col=\"2\" style=\"--tableberg-block-spacing: var(--wp--preset--spacing--small); \" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Buttons-on-Table.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 150px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure>\n\n\n<p class=\"has-text-align-center\"><strong>\u65b9\u6cd53<\/strong>: <a href=\"#Using-the-Tableberg-Table-Block\">Tableberg\u30c6\u30fc\u30d6\u30eb\u30d6\u30ed\u30c3\u30af\u306e\u4f7f\u7528<\/a><\/p>\n<\/div><\/td>\n<\/tr><\/tbody><\/table>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"Using-the-default-Buttons-Block\">\u65b9\u6cd51\uff1a\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30dc\u30bf\u30f3\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p>The Gutenberg editor comes with a <strong>default button block<\/strong>. With this block, you can create and add a well-functional button on your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 01: Add the Default Button Block to Your Site<\/h3>\n\n\n\n<p>Open a post or page where you want to add this CTA button. Click the <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong> on the editor. Find the <strong>Buttons block<\/strong> by typing it in the search box. Add it to a suitable place in the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-button-block-to-WordPress.webp\" alt=\"Add the button block to WordPress\" class=\"has-border-color has-main-accent-border-color wp-image-453\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-button-block-to-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-button-block-to-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-button-block-to-WordPress-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-button-block-to-WordPress-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>The Buttons block is added. By default, it has no text, and it\u2019s left-aligned. Next, we\u2019ll add a CTA copy with a link and align it centrally.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-Buttons-block-is-added.png\" alt=\"The Buttons block is added\" class=\"has-border-color has-main-accent-border-color wp-image-954\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-Buttons-block-is-added.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-Buttons-block-is-added-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-Buttons-block-is-added-1024x523.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-Buttons-block-is-added-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 02: Add a CTA Copy and Link to the Button<\/h3>\n\n\n\n<p>Place your cursor on the button and type <strong>Buy on Amazon<\/strong>. You can bold the text by pressing the <strong>Bold option<\/strong> on the toolbar. After that, centrally align the button. You may align it on the left or right as well.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-CTA-copy-and-align-the-button-centrally.webp\" alt=\"Add a CTA copy and align the button centrally\" class=\"has-border-color has-main-accent-border-color wp-image-955\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-CTA-copy-and-align-the-button-centrally.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-CTA-copy-and-align-the-button-centrally-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-CTA-copy-and-align-the-button-centrally-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-CTA-copy-and-align-the-button-centrally-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Add a link to the CTA button by clicking the <strong>Link option<\/strong> \u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-link-to-the-button.webp\" alt=\"\u30dc\u30bf\u30f3\u306b\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3059\u308b\" class=\"has-border-color has-main-accent-border-color wp-image-956\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-link-to-the-button.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-link-to-the-button-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-link-to-the-button-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-link-to-the-button-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 03: Customize and Stylize the Buttons Block<\/h3>\n\n\n\n<p>You\u2019ll get the <strong>\u8a2d\u5b9a<\/strong> \u305d\u3057\u3066 <strong>Styles tabs<\/strong> on the right sidebar. The Settings tab will let you <strong>increase the width<\/strong> of the button block as you need.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Change-the-width-settings-of-the-CTA-button.webp\" alt=\"Change the width settings of the CTA button\" class=\"has-border-color has-main-accent-border-color wp-image-957\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Change-the-width-settings-of-the-CTA-button.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Change-the-width-settings-of-the-CTA-button-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Change-the-width-settings-of-the-CTA-button-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Change-the-width-settings-of-the-CTA-button-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>\u3088\u308a <strong>\u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>, you can change the <strong>text<\/strong> \u305d\u3057\u3066 <strong>background color<\/strong> of the button. After that, you you can change the <strong>typography, font size, padding, border, <\/strong>\u305d\u3057\u3066 <strong>radius<\/strong> of the button block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2536\" height=\"1594\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-3081\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block.png 2536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-300x189.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-1024x644.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-768x483.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-1536x965.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-2048x1287.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-Button-using-the-default-Buttons-block-18x12.png 18w\" sizes=\"auto, (max-width: 2536px) 100vw, 2536px\" \/><\/figure>\n\n\n\n<p>Hope you can do them yourself. Thus, you can create the <strong>Buy On Amazon button<\/strong> with this default block.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Using-the-Ultimate-Blocks\">Method Two: Using the Button (Improved) Block<\/h2>\n\n\n\n<p>There are many button plugins online, allowing you to add more features and functionalities to your CTA buttons. <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af<\/a> is one of them. It lets you add animation effects to the button and display it whether in horizontal or vertical orientations.<\/p>\n\n\n\n<p>\u3053\u3061\u3089\u3078 <strong>\u30d7\u30e9\u30b0\u30a4\u30f3 &gt; \u65b0\u3057\u3044\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8ffd\u52a0<\/strong>. Type <strong>\u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af<\/strong> in the search box. <strong>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong> \u305d\u3057\u3066 <strong>\u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/strong> the plugin. Then follow the steps outlined below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp\" alt=\"Ultimate Blocks\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u6709\u52b9\u5316\u3059\u308b\" class=\"has-border-color has-main-accent-border-color wp-image-456\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 01: Find and Add the Button (Improved) Block<\/h3>\n\n\n\n<p>The button block Ultimate Blocks comes up with is named as <strong>Button (Improved)<\/strong>. Find and add it to the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Button-Improved-block-to-the-editor.webp\" alt=\"Add the Button (Improved) block to the editor\" class=\"has-border-color has-main-accent-border-color wp-image-959\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Button-Improved-block-to-the-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Button-Improved-block-to-the-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Button-Improved-block-to-the-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Button-Improved-block-to-the-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 02: Add Copy and Link to the Button (Improved) Block<\/h3>\n\n\n\n<p>Add the CTA copy \u2018<strong>Buy on Amazon<\/strong>\u2018 and a link to the button following the same method described above.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-copy-and-link-to-the-CTA-button.webp\" alt=\"Add a copy and link to the CTA button\" class=\"has-border-color has-main-accent-border-color wp-image-960\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-copy-and-link-to-the-CTA-button.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-copy-and-link-to-the-CTA-button-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-copy-and-link-to-the-CTA-button-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-a-copy-and-link-to-the-CTA-button-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 03: Configure Settings of the Button (Improved) Block<\/h3>\n\n\n\n<p>\u306b\u3064\u3044\u3066 <strong>\u8a2d\u5b9a\u30bf\u30d6<\/strong> on the right sidebar will offer you many options. You can justify the block\u2019s <strong>alignment<\/strong>, define its <strong>orientation<\/strong>, and choose the <strong>size<\/strong> \u305d\u3057\u3066 <strong>width<\/strong> of the button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Configure-settings-of-the-button-improved-block.webp\" alt=\"Configure settings of the button (improved) block\" class=\"has-border-color has-main-accent-border-color wp-image-961\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Configure-settings-of-the-button-improved-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Configure-settings-of-the-button-improved-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Configure-settings-of-the-button-improved-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Configure-settings-of-the-button-improved-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 04: Add an Icon to the Button<\/h3>\n\n\n\n<p>Scroll down the tab a bit. You\u2019ll get the option to <strong>add an icon <\/strong>to the button. You can also change the button\u2019s position, including its size. You can see below we have added the cart icon to the button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2536\" height=\"1386\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-3083\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks.png 2536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-300x164.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-1024x560.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-768x420.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-1536x839.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-2048x1119.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Buy-on-Amazon-button-with-icons-using-Ultimate-Blocks-18x10.png 18w\" sizes=\"auto, (max-width: 2536px) 100vw, 2536px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 05: Add Animation to the Button (Improved) Block<\/h3>\n\n\n\n<p>Scroll down the tab again a bit more. The <strong>Pro option<\/strong> is reserved only for premium users. Once you upgrade to the premium version, you can <strong>add animation effects<\/strong> to the button.<\/p>\n\n\n\n<p>After that, you can set to hide this block for specific devices using the <strong>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30fb\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30fb\u30aa\u30d7\u30b7\u30e7\u30f3<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-animation-effect-to-the-button.webp\" alt=\"Add animation effect to the button\" class=\"has-border-color has-main-accent-border-color wp-image-963\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-animation-effect-to-the-button.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-animation-effect-to-the-button-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-animation-effect-to-the-button-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-animation-effect-to-the-button-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 06: Stylize the Button (Improved) Block<\/h3>\n\n\n\n<p>\u306b\u884c\u304f\u3002 <strong>\u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>. You can select the <strong>button color, text color, hover color, button radius, <\/strong>\u305d\u3057\u3066 <strong>layout style<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Stylize-the-button-improved-block.webp\" alt=\"Stylize the button (improved) block\" class=\"has-border-color has-main-accent-border-color wp-image-964\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Stylize-the-button-improved-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Stylize-the-button-improved-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Stylize-the-button-improved-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Stylize-the-button-improved-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Scrolling down the tab a bit more, you\u2019ll get options to add <strong>button styling <\/strong>\u305d\u3057\u3066<strong> dimension settings<\/strong>. Do these stylizations yourself. Thus, you can create compelling CTA button with the plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-button-style.webp\" alt=\"Add button style\" class=\"has-border-color has-main-accent-border-color wp-image-965\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-button-style.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-button-style-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-button-style-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-button-style-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Using-the-Tableberg-Table-Block\">\u65b9\u6cd53\uff1aTableberg\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3059\u308b<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/a> is a table builder plugin. There are many affiliate marketers who want to promote products through comparisons and product specifications tables. TableBerg could be an ideal plugin for them. It allows you to add CTA buttons to the table.<\/p>\n\n\n\n<p><strong>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong> \u305d\u3057\u3066 <strong>\u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/strong> \u305d\u306e <strong>TableBerg\u30d7\u30e9\u30b0\u30a4\u30f3<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2546\" height=\"1122\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-3084\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg.png 2546w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-300x132.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-1024x451.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-768x338.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-1536x677.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-2048x903.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Installing-Tableberg-18x8.png 18w\" sizes=\"auto, (max-width: 2546px) 100vw, 2546px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b9\u30c6\u30c3\u30d701: Tableberg\u30d6\u30ed\u30c3\u30af\u306e\u691c\u7d22\u3068\u8ffd\u52a0<\/h3>\n\n\n\n<p>The TableBerg plugin comes with a table-builder block. Like any other bock, find the <strong>\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/strong> block and add it to the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"TableBerg\u30d6\u30ed\u30c3\u30af\u3092\u898b\u3064\u3051\u3066\u3001Gutenberg\u30a8\u30c7\u30a3\u30bf\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\" class=\"has-border-color has-main-accent-border-color wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 02: Create Your Table and Add Content to It<\/h3>\n\n\n\n<p>Each cell of the table also has the Gutenberg <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong>. By clicking the button, you can add several types of blocks to the table, allowing you to add different types of content. Please explore and do it yourself.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Use-TableBerg-blocks-to-create-a-table-and-add-content-to-it.webp\" alt=\"Use TableBerg blocks to create a table and add content to it\" class=\"has-border-color has-main-accent-border-color wp-image-972\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Use-TableBerg-blocks-to-create-a-table-and-add-content-to-it.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Use-TableBerg-blocks-to-create-a-table-and-add-content-to-it-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Use-TableBerg-blocks-to-create-a-table-and-add-content-to-it-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Use-TableBerg-blocks-to-create-a-table-and-add-content-to-it-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>You can see that we have created a demo table with the plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-demo-table-with-the-TableBerg-plugin.webp\" alt=\"Create a demo table with the TableBerg plugin\" class=\"has-border-color has-main-accent-border-color wp-image-973\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-demo-table-with-the-TableBerg-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-demo-table-with-the-TableBerg-plugin-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-demo-table-with-the-TableBerg-plugin-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-demo-table-with-the-TableBerg-plugin-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 03: Add CTA Buttons to the Table <\/h3>\n\n\n\n<p>\u3092\u8ffd\u52a0\u3059\u308b\u3002 <strong>\u30dc\u30bf\u30f3\u30d6\u30ed\u30c3\u30af<\/strong> to all the respective cells in the table one by one.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-button-block-to-all-the-respective-cells-of-the-table.webp\" alt=\"Add the button block to all the respective cells of the table\" class=\"has-border-color has-main-accent-border-color wp-image-974\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-button-block-to-all-the-respective-cells-of-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-button-block-to-all-the-respective-cells-of-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-button-block-to-all-the-respective-cells-of-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-button-block-to-all-the-respective-cells-of-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Next, add the copy \u2018<strong>Buy on Amazon<\/strong>\u2018 and customize the buttons. We are not showing the process here again, as we have already explained it in the above two methods.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-CTA-copy-and-customizations-to-the-button-block.webp\" alt=\"Add CTA copy and customizations to the button block\" class=\"has-border-color has-main-accent-border-color wp-image-975\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-CTA-copy-and-customizations-to-the-button-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-CTA-copy-and-customizations-to-the-button-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-CTA-copy-and-customizations-to-the-button-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-CTA-copy-and-customizations-to-the-button-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Learn <a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-product-specification-table-in-wordpress\/\" target=\"_blank\" data-type=\"post\" data-id=\"534\" rel=\"noreferrer noopener\">\u30ef\u30fc\u30c9\u30d7\u30ec\u30b9\u3067\u5546\u54c1\u30b9\u30da\u30c3\u30af\u8868\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u7d50\u8ad6<\/h3>\n\n\n\n<p>Adding CTA buttons to sell Amazon affiliate products isn\u2019t difficult when you have the right tools. While the default block allows you to create mediocre buttons, the other two plugins shown above allow you to create more attractive CTA buttons.<\/p>\n\n\n\n<p>With them, you can improve the shopping experience, increase conversions, and generate income for your site. If you like this article, let us know through the comment box. Plus, if you have any query, also mention it below so we can satisfy you with informative answers.<\/p>","protected":false},"excerpt":{"rendered":"<p>Amazon is one of the biggest eCommerce marketplaces both for retailers and wholesalers. Not only vendors and customers but also many affiliate marketers join Amazon to earn commissions by promoting products and services on this platform. The &#8216;Buy on Amazon&#8217; button is nothing but a CTA button affiliate marketers add to their websites. Using this button, they can direct users to specific product pages, enabling them to buy products with a single click. In this article, we&#8217;ll show you three easy methods of how to add &#8216;Buy on Amazon&#8217; button in WordPress. Get ready to explore. Method 1: Using the Default Buttons Block The Gutenberg editor comes with a default [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[36,33,17],"class_list":["post-953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-button-blocks","tag-button-plugins","tag-cta-button"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Add-Buy-on-Amazon-Button-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":6,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":7055,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/953\/revisions\/7055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7053"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}