Friday, April 13, 2012

Filled Under: , , , , ,

Social Media and Bookmarking Buttons Sets for Blogspot

I have noticed that there are a lot of fellow bloggers that are having problems with their social media button. Most of them use ShareThis and other similar services but it cost some problems on their blogs like displaying some squares or may slow down the loading time of your blog.

I’ve posted the FLOATING SOCIAL MEDIA BUTTONS but there are some who doesn’t like the floating buttons so here’s the buttons I’ve gathered and made for you to use.


IMPORTANT!Before we start, make sure you will download and back up the current theme, look or design of your current working design of your blog. You may be able to do some mistakes later, so just in case you’ve messed up with the design. Just upload the backup theme of your blog.


First, you need to add the script for each social media websites, if you will not do this the buttons (some of it) won’t show up and will not function well. So you must really do this.


ADDING THE SCRIPT AND HTML CODE:

STEP #1 : EDIT HTML

Go to TEMPLATE > EDIT HTML > PROCEED then tap on the EXPAND WIDGETS TEMPLATES just like below.

STEP #2: ADDING FACEBOOK HTML CODE:

We must add the Facebook HTML code just like the image below:


Before you add please check if it’s already there, if you have already done this before please proceed to the next step.

You will find the HTML code right on the very top of the text area code. It will start with is shown.

You could either insert the code right after the word “HTML” or just like the second option where I have placed mine. Below is the code that you will add, just place it before.






STEP #3: INSTALL SCRIPT

Next is adding the script for the buttons. PRESS (on your keyword) the keys “CTRL + F” to find “</body>”, there will be just one result for that so right above it paste the code below:






ADDING THE SOCIAL MEDIA BUTTONS:


IMPORTANT!Before proceeding on the next step, decide whether you want the social media button sets to appear BEFORE the content or AFTER the content of your blog. Each code will only appear on areas where you’ll place them, it won’t automatically do or display the buttons where you want to display it.
Second, is that you also have to decide if you want to display these buttons in all pages and blog posts on your blog. As for here in Bloggers Tech, I only show my buttons on posts. You won’t be able to see these buttons on pages that I have here.

STEP #4: PLACING THE CODE BEFORE THE CONTENT


STEP #4 – A: ALL PAGES AND POSTS

So if you wish to show the buttons in all pages and buttons, right before the content of your post follow these steps.


Find the code <data:post.body/> and what you need to do is check if you’ll find these code right above it,

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

OR

<b:if cond='data:blog.pageType == &quot;item&quot;'>


If you’ll find any of the code above, that is right above the  <data:post.body/>  code just like image below:

Then you can then paste the code of the set of buttons you wish to use, right above the <data:post.body/> code. Just like below:



STEP #4 – B: ON POSTS ONLY

But if you prefer to use the social media buttons on blog posts only just paste the code right above the <data:post.body/> where the code is present.


STEP #5: PLACING THE CODE AFTER THE CONTENT



STEP #5 – A: IN ALL PAGES AND POSTS

If you also want to display the buttons right after the content of a page or post just do the same step on STEP #4-A but this time, PASTE THE CODE BELOW the <data:post.body/>


STEP #5 – B: ON POSTS ONLY

If want to display the buttons right after BLOG POSTS ONLY, then just do the same step on STEP #4-B but this time, PASTE THE CODE BELOW the <data:post.body/>


STEP 6: SAVE IT!

In this step, you can then save the changes you made. Just in case that you’ve encountered an error, go back and double check what you’ve done. You could close the window and do it again OR just click on CLEAR EDITS button and redo it.

Don’t worry if you’ve got some errors, usually Blogspot will not allow you to save it if you’ve done something wrong. But just in case it did allow you and the look of your blog is now totally messed up, just upload the downloaded backup file of your blog template.


SOCIAL MEDIA BUTTONS CODES:

Below are the social media buttons I’ve gathered and made for everyone. All of the buttons have counters and has the vertical and horizontal versions only.


ALL TOP AND KNOWN SOCIAL MEDIA BUTTONS


I didn’t include all social media or social bookmarking buttons, but I have only selected the top known websites I know of.

Ideally, you can use this below the content of your post or page, too much buttons before your content might too messy to look at and possibly will cause the load time of your blog. VIEW DEMO



HORIZONTAL VERSION








VERTICAL VERSION






TOP 4 SOCIAL MEDIA BUTTONS



HORIZONTAL VERSION




VERTICAL VERSION






Video Tutorial




For people who can't still do it, I could do it for you but it will be not of course for free. I'll be spending and consuming my workings hours for you so I can't give it for free. If you want me to do it, just contact me through the fan page or through the contact page here in Bloggers Tech.

I do hope you guys get all these and I've helped you out! Thank you and enjoy!

About the Author


Gay Aida Dumaguing

is a 27 years old Filipina from the Cebu, Philippines. A graduate of B.S. Information Technology from a well-known University, now a SEO (Search Engine Optimization) Expert who serves businesses, entrepreneurs and bloggers from around the globe. She's also the blogger of Exotic Philippines, a blog that promotes the Philippine tourism.


Find me at:
Google+| Twitter | Facebook
Subscribe to: Post Comments (Atom)