How to Change the ShareThis Reaction Button with Facebook Emoji Animations

3
49
views

Hello friend blogger! This time Tech Khabri will share about How to Change the ShareThis Reaction Button with Facebook Emoji Animation . How to? Come on, we follow the steps below

As we know, ShareThis is one of the third party services that can be added on the Blogger platform. Broadly speaking, ShareThis functions as a sharing widget to social media with quite complete customization and you can also modify it as needed. One of the features of this ShareThis is the Reaction Buttons feature, this feature serves to provide feedback from readers with a reaction button in the form of Emoji or Emoticons.

How to Change the ShareThis Reaction Button with Facebook Emoji Animations

Before I give tips on replacing the reaction button, you should first create a ShareThis account here: Sign Up ShareThis . After registering, verify the blog address by adding code like this before the code </head>or it could be before </body>editing the HTML of the Blogger page. For example like this:

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5c9c2853fbd80b0011b664f6&product=sop' type='text/javascript'/>

Pay attention to this code 5c9c2853fbd80b0011b664f6, add the code &amp;afterwards. For example like this:

5c9c2853fbd80b0011b664f6&

So that later after clicking the 

Save theme button there is no error warning
After that, click the Save theme button and click the Verify button on the ShareThis site’s user page.

If you have previously created an account on ShareThis, just skip the steps above. For the next step, activate Reaction Buttons on the ShareThis user page as shown below:

How to Change the ShareThis Reaction Button with Facebook Emoji Animations

Add the Reaction Buttons code provided and copy it to the Blogger HTML Edit after the <data:post.body/>bottom code or wrapped with conditional tags on the posting page.

<b:if cond='data:blog.pageType == "item"'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

So the result is like this:

<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

Now, to replace the default ShareThis reaction button with Facebook Emoji Animation. Add the code below before the code</head>

<style type='text/css'>
/*<![CDATA[*/
/* ShareThis Custom Reaction */
#st-1 .st-btn .st-text{display:none!important}
#st-1 .st-btn:hover > span.st-count{display:inline-block!important}
#st-1 .st-btn > svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}
#st-1 .st-btn > span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute}
[data-reaction=slight_smile]{background-image:url(https://3.bp.blogspot.com/-hNfE5e1Qo3c/XMLiPrFuOFI/AAAAAAAAOm8/pl6tOHh_y2AmumaMK6dQOQ36fP6BjC7_QCLcBGAs/s1600/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-HgD0g2IiNLk/XMLiQOHSAxI/AAAAAAAAOnI/tC61Ug_I9zIpIeCVBrcg8QtoGQH7cOoNACLcBGAs/s1600/love.gif)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-liSaUgXsZXo/XMLiP-Z3NkI/AAAAAAAAOnA/idWXMbOdLMIzaz7P_lYvH25NSu6UrPkuQCLcBGAs/s1600/haha.gif)}
[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-8UjP6O6ZBus/XMLiQgaU5BI/AAAAAAAAOnM/mc0GAQW4kZg4BjtdiHFpBStGzMB6LYW6wCLcBGAs/s1600/sad.gif)}
[data-reaction=rage]{background-image:url(https://2.bp.blogspot.com/-aCtZlJ68tps/XMLiP-pNq7I/AAAAAAAAOnE/UTFuQzM58k4SnUvFGBXbh5bTnZsQYTvGACLcBGAs/s1600/angry.gif)}
/*]]>*/
</style>

If so, click the Save theme button and see the results on your blog!

Okay, that’s all from Namina for How to Change the ShareThis Reaction Button with Facebook Emoji Animations . May be useful.

3 COMMENTS

  1. Howdy! This is kind of off topic but I need some help from an established
    blog. Is it hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about setting up my own but I’m not sure where to start.
    Do you have any points or suggestions? Appreciate it

LEAVE A REPLY

Please enter your comment!
Please enter your name here