{"id":5811,"date":"2024-04-14T12:18:39","date_gmt":"2024-04-14T04:18:39","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5811"},"modified":"2024-04-14T12:18:39","modified_gmt":"2024-04-14T04:18:39","slug":"include-inline-social-buttons-with-sharethis","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/include-inline-social-buttons-with-sharethis\/","title":{"rendered":"Include inline social buttons with ShareThis"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>ShareThis enables you to integrate inline social buttons into your Webflow project \u2014 visitors to your site can easily share your content, and you can monitor the shares. This creates a beneficial outcome for everyone involved!<\/p>\n<p>Topics covered in this tutorial:<\/p>\n<ol>\n<li>Add your project to ShareThis<\/li>\n<li>Insert the code snippet into Webflow<\/li>\n<li>Integrate and design the inline buttons<\/li>\n<\/ol>\n<p><\/p>\n<h2>Integrate your project into ShareThis<\/h2>\n<p>If you haven&#8217;t registered yet, please go ahead and <a href=\"https:\/\/sharethis.com\/\">create a ShareThis account<\/a> now.\u00a0<\/p>\n<p>Once you&#8217;ve completed the registration, select <strong>Setup New Property<\/strong> from the drop-down menu located at the top right corner of your ShareThis account, enter your project&#8217;s domain, and then click <strong>ADD<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394561000\"><\/iframe><\/div>\n<\/figure>\n<h2>Insert the code snippet into Webflow<\/h2>\n<p>In this step, you&#8217;ll obtain the code snippet for incorporating inline social sharing. Under <strong>Sharing tools<\/strong> &gt; <strong>Inline social buttons<\/strong>, click on <strong>Get the code<\/strong>, and then click on <strong>Copy<\/strong> to save the snippet to your clipboard.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560902\"><\/iframe><\/div>\n<\/figure>\n<p>Upon returning to Webflow, either through the Dashboard or the Designer, navigate to your <strong>Project settings<\/strong> where you&#8217;ll paste the copied snippet from the previous step.\u00a0<\/p>\n<p>Within the <strong>Custom code<\/strong> section, insert your code in the <strong>Head code<\/strong> field using Command + V (on Mac) or Control + V (on Windows), save your changes by clicking <strong>Save changes<\/strong>, then head to the top right corner and select <strong>Publish<\/strong> followed by <strong>Publish to selected domains<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560844\"><\/iframe><\/div>\n<\/figure>\n<p><\/p>\n<p>You can validate your progress within ShareThis. Under <strong>Sharing tools<\/strong> &gt; <strong>Inline social buttons<\/strong>, choose <strong>Verify manually<\/strong>, input your project&#8217;s URL, click <strong>Verify,<\/strong> and then proceed to <strong>Update<\/strong>.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560813\"><\/iframe><\/div>\n<\/figure>\n<p><\/p>\n<h2>Integrate and customize the inline buttons<\/h2>\n<p>While still in the ShareThis platform under <strong>Sharing tools<\/strong> &gt; <strong>Inline social buttons<\/strong>, simply click on <strong>Copy code<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560783\"><\/iframe><\/div>\n<\/figure>\n<p>\u200d<\/p>\n<p>You can now customize your buttons within that same interface, or you can revisit this customization later. We will get back to this shortly.<\/p>\n<p>Return to your Webflow project. From the left-hand sidebar, use the plus icon and, under <strong>Components<\/strong>, drag an <strong>Embed<\/strong> element to the area where you wish to display the ShareThis buttons.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560736\"><\/iframe><\/div>\n<\/figure>\n<p><\/p>\n<p>When the <strong>HTML embed code editor<\/strong> appears, paste the code snippet from ShareThis and then select <strong>Save &amp; close<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560713\"><\/iframe><\/div>\n<\/figure>\n<p><\/p>\n<p>Since the code snippet you just inserted refers to the one integrated in the previous step, your buttons will not be visible yet. To display them, choose <strong>Publish<\/strong> from the top right corner, proceed with <strong>Publish to selected domains<\/strong>, and then open the live site \u2014 your buttons should now be visible in the designated location.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-height=\"56.25%\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/394560666\"><\/iframe><\/div>\n<\/figure>\n<p>\u200d<\/p>\n<p>You can go back to ShareThis to modify the alignment, color, language, and other aspects of your buttons. Once you are satisfied with the changes, click on <strong>Update<\/strong>. Refresh your Webflow project by pressing Command + R (on Mac) or Control + R (on Windows) to view the recent adjustments.<\/p>\n<p>You can now access the Social Analytics dashboard within your ShareThis account to monitor the performance of your shares over time. Remarkable job!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to add inline share buttons to your Webflow project with ShareThis.","protected":false},"author":2,"featured_media":5812,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-5811","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5811"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5812"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}