Picture
Everyone wants to share their work/website/blog to the rest of the world and social media networks are the easiest way from where you can let the whole world know about your website or blog. So if you run a website or blog of any kind, you are always trying to encourage more people to talk about and share your pages, articles, posts or any kind of work through a variety of channels, including social media and e-mail.

Adding social media sharing buttons is a simple and effective way to quickly increase the page views.
Checkout The Floating Social Media Sharing bar Demo on Weebly website: Click here to see the Demo


Here is a quick guide with steps How to add a floating social media sharing bar to your Weebly website.

Step 1:
Go to http://sharethis.com/publishers/get-hovering-buttons here you will find couple of options, first you have to select your platform by default it's 'website' after that you will see a page with couple of more options select the bars on the left. Finally you will see another page where can select the social media sharing buttons you want to use on your website, including whether to have ads or not on your widget also select on which side of the page you want it, left or right. At the same time you can preview your widget.
Picture
Click the image to enlarge
Step 2:
Click the "FINISH: Get the Code" green button at the bottom of the page to get the code. (registration is optional)
Picture
Click the image to enlarge
Step 3:
Once you have the code, Log in to your weebly account and go to the site editor then Design Tab > Edit HTML\CSS.

Step 4:
On the left of your screen select the index.html under Page Types.
Picture
Click the image to enlarge
Step 5:
Copy the first portion of code from the Sharethis.com page and paste the code in between the <head> and </head> tags. Just make sure you paste it right before the </head> tag.

Step 6:
Now again go back to the Sharethis.com page and copy the second portion of the code and paste it at the bottom of the index.html page right before the </body> tag. 

Step 7:
Finally Save your theme and Publish your site.
Picture
Click the image to enlarge
All done! Now enjoy your new social media floating bar.    
If you only want to place the floating bar in selected pages, not on all your weebly website pages then drop a comment below or Contact me and i will get back to you.

If you like this post or you have any question or concerns drop your comments below. 
Also don't forget to Like Us on Facebook.
Thank you.
 


Comments

03/13/2012 1:42pm

Hey! Great stuff, we were looking for how to do this. Simple and effective. Thanks!

Reply
(Web-Support)
03/13/2012 7:33pm

You are welcome Tony! I appreciate your comment.

Reply
john
03/23/2012 11:19am

did exactly as you said and nothing happened I also went over it with somebody and it didn't work for them either.

Reply
03/24/2012 12:26pm

Hi John! I guess maybe you have missed any step. Re-try and let me know if it worked or if not then you can add me as your weebly editor and i will do it for you. Thanks.

Reply
Nick
10/12/2012 3:10pm

After entering the code into the back of your site, pull the site up in the browser as if you were a visitor to the site and see if it is there. I know that on Dreamweaver when I enter the social media buttons I do not see them in the programs view page nor do they show up when I view it in the local browser. But when I go pull up the site they are there.

Reply
04/12/2012 12:35pm

Hi, thanks for the tutorial but I was wondering if you could help me place that share bar some place else? If you go to my website, I'd like it to be placed right above the custom footer. Could you help me out? Thanks in advance!

Reply
04/12/2012 12:39pm

Also, if at all possible, it would be cool if it was above the custom footer but not all the way to the left like it is right now, you know? Just right above the grey footer, on the left side.. Okay, I'll shut up now. Any help is very welcome!:)

Reply
04/12/2012 4:47pm

Yes! it is possible to place the bar right above the footer.
Go to Design tab > Edit HTML/CSS select index.html and simply paste the span tags right above the <div id="footer"> and save your theme.
you can see an example : http://89kj.weebly.com/
I hope that's the answer for your question. If you have more questions or concerns feel free to contact us. Thank you.

04/14/2012 12:26pm

I cant seem to make this work. I did every thing and it doesn't show on the published page. Could you help me?

Reply
04/14/2012 3:36pm

Sure Martin! Tell me what part you don't understand exactly, so i can explain you better.

Reply
04/14/2012 5:38pm

OK I got it fixed, I must have made a mistake with the code positioning. Please check it out to see if it should look like that. Thanks for your helep. Very professional.

Prodyot
05/22/2012 8:35pm

Dear We Support
Mission accomplished.
That was actually breeze to achieve.
Thanks for sharing such a great and helpful post.
Now, the social media buttons will not eat up some space on my pages and it will not even look intrusive.

I have a non-related question but important for me.
The template that you are using for this page has different menu bars and different menu text sizes.
Is this template integral to Weebly templates or you got it from external sources?
I will be happy to get this or exact similar template for my website.
Presently I get only one menu bar and all clumsily bundle up there.
With the possibility of adding different menu bars (as in the case of this page) I can add different menu items on each and they wont even look clumsy.

Reply
Prodyot
05/22/2012 8:39pm

"we Support" = "Web Support"

I apologise for the unintended and accidental typo.

Reply
05/28/2012 10:53am

Thank you Prodyot! I'm very glad our article become helpful to you.
Yes sure you can ask any question you have about customizing your weebly website, we are here to help you.
Our website is fully hosted on Weebly, there is no external sources it is just our creative team creating, customizing and providing new weebly templates and themes.
Soon we will be launching more Weebly themes, so stay connected. Also you can send us your website for free analyzation to help you improve your Weebly website and make it look better and attractive. Thank you

Reply
06/27/2013 6:31pm

hey web support the weebly editor has updated and there is no index, what do I click?

Prodyot
05/22/2012 8:40pm

"we Support" = "Web Support"

I apologise for the unintended and accidental typo.

Reply
05/28/2012 10:56am

No problem Prodyot. :)

Reply
nipun
05/23/2012 11:48pm

thank u brother.... nice and effective post.... it helped me a lot and save me a lots of time.... (Y)

Reply
05/28/2012 10:59am

You are welcome Nipun and thank you for your comment.

Reply
06/05/2012 10:46am

I already have some facebook code that displays the number of people who like the website. Is there anyway to have that removed and those numbers be displayed with this new code? thanks

Reply
06/16/2012 3:58pm

all system change now please explain

Reply
06/29/2012 8:45pm

I am unable to enlarge the screen to show the video I included on my web page. It is my understanding this can be done by using the HTML code. Is this correct and how do you enlarge the window?

Reply
06/30/2012 10:06pm

Is that correct, you can fix it by using HTML code.
Could you please specify the embedded code that you are using?
So i can better assist you.

Reply
07/28/2012 1:19pm

Hi, I used this for my method and it worked great!

I didn't have an index.html page, I had tall-header.html, short-header.html, no-header.html and landing.html. I just copied the code on all the pages.

The only problem I had was I mainly wanted Facebook, Twitter, Pinterest and Youtube and it didn't have Youtube. Is there a way I can add youtube to it?

Reply
Green
08/01/2012 10:27pm

Thanks C, what you suggested worked, I also didnt have the index page. Kudos to all, great post and info here.

Reply
08/16/2012 10:40am

There is no index.html on mine except for some header ones. What do i do?

Reply
Simteks
08/29/2012 11:56am

I am having the same issue. Tried creating one named index.html and no luck

Reply
10/16/2012 5:07pm

I tried to create the floating side bar, and then the floating header bar. Both bars appeared successfully according to your wonderful instructions. (Thanks!) But the one hiccup is that none of the icons appear on the bars. They are just blank. What am I missing?

ShareThis told me to put a third piece of script on the page that I want the bar to appear on. This seemed to work, as it made the header bar appear. (Without it there was no header bar.) And this script includes references to the sharing icons that I chose, but still no icons appear.

Reply
10/16/2012 5:14pm

I did some more troubleshooting and found that the icons only "not appear" in Firefox. It works perfectly in Internet Explorer. I think it's an issue with ShareThis. I'm going to contact them.

Thanks for a great post!

I'll check back for more tricks to customize Weebly pages!

Reply
10/16/2012 5:14pm

I did some more troubleshooting and found that the icons only "not appear" in Firefox. It works perfectly in Internet Explorer. I think it's an issue with ShareThis. I'm going to contact them.

Thanks for a great post!

I'll check back for more tricks to customize Weebly pages!

Reply
10/16/2012 5:15pm

I did some more troubleshooting and found that the icons only "not appear" in Firefox. It works perfectly in Internet Explorer. I think it's an issue with ShareThis. I'm going to contact them.

Thanks for a great post!

I'll check back for more tricks to customize Weebly pages!

Reply
01/22/2013 2:41am

Hi, I have created my floating bar of icons and it is placed just above my footer. Is there a way that it can be placed on the footer itself. Also is there a way of seeing the bar on my page when i am editting my website in weebly. Thanks

Reply
01/25/2013 9:26am

Kindly view this blog post: http://web-support.weebly.com/1/post/2012/02/how-to-add-floating-social-media-share-bar-on-your-weebly-website.html
to add a floating social network bar at the end of the each page.

Also once you are at Sharethis.com page make sure you select the bottom bar option in the STYLE tab.

No you can't view the bar while you are in the weebly editor area.

I hope that's the answer for your question. If you have more questions or concerns feel free to contact us.

Thank you.

Regards,
(Web-Support)

Reply
Alex
03/16/2013 11:01pm

Hey there,

I followed the instructions and the share bar shows up on our home screen but not on the rest of the site.

If there a way to change this so I can have a share bar on all our weebly pages?

Thank you so much!

-Alex

Reply
03/22/2013 3:09am

I would certainly commit 10 on 10 for such incredible cognition.

Reply
03/30/2013 2:05pm

No index HTML

I see I am not the only one and earlier comments unresolved.

Will try from different browser maybe

Reply
Elvis
04/02/2013 6:04pm

Why hasn't anyone resolved the missing index.html?

Reply
Jennifer
04/25/2013 11:20am

Same here...no index.html

Reply
06/02/2013 3:22pm

there is any easier way just go to settings and put the code in the header and footer sections, simple

Reply
07/04/2013 8:35am

I had the same issue as many here, no index. I resolved it by copy/pasting the 2nd part of the ShareThis code in the Settings>SEO>Footer Code section, and then dragging the "Custom HTML" widget onto my page and Copy/Pasting the 1st part of the code there. See the example of what it looks like here: http://www.artspaceport.com

Reply
06/16/2013 7:34pm

How can I have the social sharing appear at the end of each individual blog post? Thanks!

Reply
10/21/2013 1:46pm

Excellent guide, thank you so much!

I thought some of you may be interested in this. Instead of the "index.html" page (because I believe Weebly changed it to the four other pages we now see) in "Page Layouts" I did the exact code under "tall-header.html"

It works flawlessly on ALL of my pages, not just one and even customizes the shared posts well.

Thanks again!

Reply
12/22/2013 9:48pm

Thank you for the post. Will use the instructions for my personal use and will recommend others also.

Reply
03/10/2014 3:00am

Great advice, it works pretty well.
Notice that when do the steps, you will not see the floating bar until you have publised your website.
Thank you very much

Reply



Leave a Reply

     

    Author

    If you need help to customize your weebly websites feel free to ask.
    We have a small team of 3  members Saud, Richard and Jennifer. We Love creating websites and we are still learning everyday, for us solving your problems and challenges would be a great way of learning.

    Archives

    February 2012
    January 2012

    Categories

    All
    Facebook "LIKE" Button
    Floating Social Media Sharing Bar
    Weebly Loading Speed