How to add Social Share Buttons to a Blogger
How to Add Social Media Buttons to You Blogger (Blogspot) Blog: I went through blood, sweat, tears and a lot of different ideas to finally find the right way to add social media buttons to my blog. Since it was so hard for me, I decided to make a tutorial to help you out if you're facing the same problem. You . Aug 09, · How to Add Social Media Buttons to the Top of your Blogger Posts In your Blogger Dashboard click on “Template” in the left menu. (If you’re using the old interface, you will need to click “Design” instead.) Click the “Edit HTML” button.
In this tutorial you will learn how to add social sharing buttons to each of your blogger posts. These responsive social sharing buttons will stick how not to gain weight while pregnant the top or bottom of every blog post.
It helps your blog visitors to share your content on social media networks without leaving your blog page. This sharing gadget for blogspot blogs is a lightweight version of JumboShare Counter.
I will thus call it JumboShare Simplified. It loads faster and takes up negligible load time. I have created this lightweight sharing gadget by aligning all major social media buttons inside a horizontal row. Users can toggle the gadget to expand or collapse the number of sharing buttons displayed. This gadget includes the following social media buttons :.
These buttons have the exact same look and style as their official what does culpable homicide mean. It uses the official stylesheet for Facebook, Google, Twitter and the rest. The viber and whatsapp share buttons will display only in mobile devices such as smartphones. Your visitors can now share your blog posts with their viber contacts and whatsapp friends. I am using IsMobileRequest condition to allow these buttons to display only smartphones instead of using CSS display:none.
You can how to add social networking buttons to blogger to display this social sharing gadget just below blog post title or you can display it at the bottom of every blog post. Lets get straight to work.
Copyright c STCnetwork. Follow these easy steps to add sharing buttons just below every blog post title or the post footer:. This code is located twice, once for mobile view and once for desktop view. Let me know if you have any queries. I would love to answer all your questions. More interesting tutorials on its way because I am back to blogging. Peace buddies! If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost.
Submit your order details by Clicking Here ». Awesome thing brother. Just a quick question, you removed total count from this, was that increasing the load time?
The new blog I am working on have super simple theme with super fast load time. The only things I am adding is this social media plugin. I also use different compression tools to reduce image sizes. Usually, I add images with quotes and other useful things on it, so I want to add Pinterest plugin which allows readers to Pin images A plugin that shows Pinterest button on every image. I am unable to find it on your blog, Let me know if its in the pipeline.
As I don't want to increase the load time. Do you recommend adding it? Thanks :. Pin how to add social networking buttons to blogger. Note: If you are using Jumboshare counters plugin, then you will need to remove them first. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review. Ahsan Arshad Sep 3,PM. Subscribe to: Post Comments Atom.
VARIATION #1: Moving the Social Media Buttons to the Bottom of your Blogger Posts
To install Buttons to a Blogger website, just choose – Social Share Buttons. • Create the custom widget Select the necessary settings that will allow you to feature the social share widget on your website in the preferable way. • Discover the appropriate payment plan. Add Social Media Buttons at Top/Bottom Of Every Blog Post. Follow these easy steps to add sharing buttons just below every blog post title or the post footer: Inside your theme, search for. This code is located twice, once for mobile view and once for desktop view. Therefore consider the second appearance of. Aug 24, · How To Add Social Media Share Buttons to Blogger & Wordpress POST. In this Video we will Tell you % free and easy way to Add Social Media Share Buttons to.
You want your blog visitors to share your great content with their friends, right? So make it easy for them by adding social media buttons to each of your Blogger posts! I found several blogs and websites with instructions; however most show you how to add just the Pin It button — or just a Facebook Like button.
Adding the code for each of them individually results in the icons not lining up very nicely in your post. Below you will find the instructions from that blog post, as well as instructions for some different variations for how the buttons appear in your blog. Before proceeding with the instructions below, I recommend that you backup your Blogger template first! If you just want the Facebook Like button to appear and not the Facebook Send button find this line of code:.
Kim — Are you referring to the ShareThis button? The code they give you is for a widget that appears on the sidebar of your website and not for each individual post ; but if you search their forums, I believe they provide instructions for how to modify the code so that the button appears within each blog post. It only added google plus to top, and on the bottom it only added google plus, twitter and facebook.
Do you think the blogger template is blocking this code? Is there a blog it button code so that people can reblog my posts? Kelly: You are using the Dynamic Views template. Can you please explain further? Can you fix this so there is an even gap. Tom — I tested out the original code and all the variations I posted in this article — and there is not a gap between the Pinterest and Facebook buttons.
Which code version are you using? This will add a 15 pixel gap before the Pin It button. You can make that number higher or lower to change the width of the gap. Tweet, and like it are on the left, and then a big space before pin it. What I would really like to do is center them all, and obviously get rid of the weird space.
Also, how can I hide these on just one post I have the blog set up more like a site, with the first post being my main page. Thanks in advance!
Also, this code adds the code to the top of all posts. Thanks for sharing this! I got the first part with no problem, but when I try to add the StumbleUpon button per the instructions, blogger keeps giving me this message:.
Error parsing XML, line , column 3: The content of elements must consist of well-formed character data or markup. Thanks so much, something that finally works, the stumble upon codes gave some errors though, so i just skipped it.
Great post! With different styles of social sharing buttons! Searching for the codes form longtime and not even worked some codes! Many thanks for doing this. I do notice that the buttons appear below the post text on my home page as desired via Variation 1 , but for some reason in the individual posts, I get the buttons both below and ABOVE the text.
Some little code issue, no doubt, but any ideas on where I should look? That data:post. The number of times this appears varies depending on your template. Try moving your code to the 2nd instance of it and see if that helps.
Took it out, and all is good. Thanks again, Kelly. By the way, do you have any thoughts re mobile? When I look at the mobile version of my blog on my phone, I see only the google-plus share button, not the others. Width issue maybe? Thanks for the help.
Thanks Kelly Ward for share this post , Thanks once again , i have successfully add these code in blogger. Thanks for posting. To the left of the post? Are you looking for some type of social media bar that floats on the left side of the screen? Hello, Kelly! Thank you for this great feature! The code is working but not on my older posts. Turns out all the other ones have that same code.
Hard to check that on an iPhone. Just not on the published page. Figured it out! You know what the problem was? I had the nerve to have text in the Search Description! Thanks very much for the info, Kelly. Any suggestions? Hi Di, I would suggest taking a look at your template for the code. This line of code appears multiple times throughout your template. Thanks for the suggestion, Joey. Hopefully the 3rd instance will be the one that works for me too. Cheers, Di.
Thanks for the suggestion Kelly. I think I had to add them to the second instance to get them on the post. Hi Kelly, I am just revamping my blog site and I wanted to add the social media buttons to my posts. I tried using your code but unfortunately none of the buttons appeared. Can you please help? Thanks for the valuable post. Really helpful. Keep sharing such amazing post. I would like to read all this. Hi, this code worked well for me. I have used the share buttons at the bottom of each post.
If I want to remove these buttons from the homepage, how do I go about doing that? And how do I get all the buttons in a straight line?
Many thanks for your help! Both of those issues would require some extra tweaking of the code. If you want me to fix it for you, you can click the PayPal button above and I can work on that for you. Great tutorial Kelly, thanks a lot! Could you tell me please, how can I rearange the buttons? Is it possible to put FB share button after the FB like button to? And is it possible to place the buttons in the center at the bottom of the posts, because now they are left at the bottom of the posts?
Hi Yana! Yes, you can make those changes. To rearrange the buttons just move the different sections of code for each social media platform — up or down in the code.
To center-align the buttons, you can play around with some CSS code to get the div to center. I tried to Make my website theme better and add some social media sharing buttons butt i fail every time can any one check and guide how can i do it?
Thanks for this code, it worked really nicely. Thank you! Thanks Kelly Ward for sharing this amazing post. I was stuck reading other blogs, but when I read your guide, then my problem was solved, thanks for sharing these great ideas.
That will take you to their website where you can copy the code. Thanks Kelly Ward for sharing this information I have successfully added these button on my blog. Social Media , Websites. Pin Share Tweet 2. This is exactly what we need!
<- How to get the legendary dragon in dragon city - What is the normal progesterone level in early pregnancy->