Adding Widget

  • 1
  • Question
  • Updated 7 years ago
I want to add the "ADDTHIS" widget for social media to the top of my site above the banner, is this possible?
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello BradH!

This is possible! First go to www.AddThis.com and then you can set up your button.

Here is a screen shot:


Click the image to enlarge it so you can see the step-by-step instructions in the image

Once you have your button set up and you have signed up, then you get the code. Copy the whole entire code in the text area and then paste it into an HTML widget on the Yola site builder. (The HTML widget is in the sidebar under the BASIC category) Then click on "Save" after you pasted it in.

There now will be an "AddThis" button on your website!

Remember to save your page! And to see it live on the web click "Publish to the web"

I hope this helps!

Nathan
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
the response did not help, i know how to add the widget, but i can't seem to post it top right in my website!
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
i want it to appear top right on my webpage above the banner

www.designersforhimandher.com
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Brad, I am sorry, I thought you said that you want to add it to your site.

I see now! You will just need to use some custom HTML to do this, and i can help you to do this. First of all, could you post your code so I can add in the CSS to put it at the top of your site above the banner? I will be able to do this for you, just I need your code so I can put the CSS in it.

When you post your code, please wrap it in <!-- and --> Like this:

<!--

Your ADDTHIS Code here

-->

This is just so it wont render on this forum.

Thanks,
Nathan
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
<!--

<!-- AddThis Button BEGIN -->








<!-- AddThis Button END -->

-->

Not sure how i find my CSS code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, there isn't CSS in it yet, but I am going to add it for you to put it at the top right corner over the banner. But could you re-post the code, but take out the:

<!--AddThis Button BEGIN-->

and the

<!--AddThis Button END-->

Because it rendered and I cannot see the code. But you still HAVE to wrap it in <!-- and--> like you did there.

Thanks,
Nathan
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
ok sorry- new to this: i will try this again and hopefully it works...

<!--<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_...>
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yay! It worked. I will add in the CSS and post it below in about 10 minutes! Stay tuned! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, it's okay, that's how I was when I was new too.
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
appreciate the Help! will be waiting! and hopefully figure out how to work it :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--
Got it! It looks awesome! I even made my TEST WEBSITE set to the style you are using so I can align it perfectly and it works and it looks great!! Just replace your current code with this edited code:

<div style="position:absolute;top:10px;right:23.3%;">
<div class="addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_...>
</div>

You can put it any where on the page and it will put in the right place!

It looks great, and it will look awesome on your site!

I hope this helps & works!

Sincerely,
Nathan

-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@BradH: I just edited the code and edited the reply above so if you already put it in your site please re-copy it, because before it wasn't in the right place, but now it is.
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
Thanks Nathan u are a genius! hope to stay in contact as i'm sure i will require some more of your expertise :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Brad, no problem and thanks! :) I will always be here on the Yola Forum to help so if you ever need any more help with Yola feel free to post your questions/feedback to this forum!

Thanks!
Nathan
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
to think of it i would love the join us on facebook button, not sure where i need to go to get this button tho? any ideas about the facebook joins?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Brad, again! :) Would you like a Facebook "Like" button or a Facebook "Join our Group" button? Once you let me know what you want I will be able to help you further.
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
I would love the Join our group, using it for a clothing company facebook page...if that makes sense!

Thanks, again!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem then! Do you already have a Facebook group set up? If so then you can get this button.

But it looks like there isn't a "Join this group" button to add to your page but there is a "Like" button for your group so people can like your page.

To get the Like button for your website, first login to Facebook.

Then navigate to the Facebook page that you have set up.

Now right under the page icon, it says "Edit Page"



Click on that and then you will be on this page:



On the side, click on "Marketing"

You will then be on this page:



Click on "Add a Like Box to your website"

You will be on this page:



Click on "Like Button" on the side.



Now you will be on this page:



Set it all up and type in all of the details. Then click on "Get Code" A box will pop up, I recommend that you copy and use the second one but it's up to you.

I hope this helps! This took me a while to type out, so I really hope it helps!

Sincerely,
Nathan
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Nathan

Appreciate your helping out on this thread. Looks like you're on the right track here!
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
There should be a join this group button if its a group page correct?

Did you try this on your personally account?

I will have a look on this page and see what i can figure out! Thanks
Photo of BradH

BradH

  • 13 Posts
  • 1 Reply Like
Nathan if you can have a look at my site www.designersforhimandher.com have a look under the "whats styling" tab, scroll down and the difference in the text under the tip for him and her is different in the spacing.. why is this?