Monday, March 12, 2012

BLOGGER and SOCIAL MEDIA Icons: Fast and Easy HTML JavaScript Code Methods and Insertion Ctrl+F Keys

There are two methods used to insert the HTML JavaScript code for social media icons (aka. widgets, buttons, badges, gadgets) such as Twitter and Facebook in to your Blogger blog. The first method is done by using your Blogger's Add A Gadget feature (click on this: (1) Add A Gadget link to jump to the instructions below). The second method is done by using your Blogger's blog template (click on this: (2) Blog Template link to jump to the instructions below).

And, the fastest and easiest way to find current, or to insert new, HTML JavaScript code for social media icons using method (2) Blog Template is to use your computer's Ctrl+F keys (meaning hold down the Ctrl key then hit the letter F) which I will explain in more detail later.

(1) Add A Gadget the first method used to insert HTML JavaScript code into your Blogger blog. I explained in my prior related blog post entitled TWITTER and FACEBOOK: Best Widgets and Buttons for Blogs or Websites at this link: how to use 'Add A Gadget' to add the code for a 'Floating Share Buttons Widget' (a widget that  includes Twitter, Facebook, and other social media icons) in to your blog. Using the following identical steps for adding a 'Floating Share Buttons Widget', you can add any blog HTML JavaScript code gadget. First login to your blog and at the upper right of the screen click on Design>and the 'Add and Arrange Page Elements' gadget screen appears and here are the 'Add A Gadget' steps:

*Under 'Add and Arrange Page Elements' click on one of the 'Add A Gadget' buttons.
*In the 'Add A Gadget' pop-up window>Basics (already selected), scroll down to and select HTML/JavaScript by clicking on the blue + sign to its right.
*Inside of the 'Configure HTML/JavaScript' pop-up window copy the widget html JavaScript code (provided below, or to jump to the code and get it now just click on this link: 'Floating Share Buttons Widget' code:and paste it inside of the 'Configure HTML/JavaScript' 'Content' box.  
*Click on the Save button to save the Floating Share Buttons Widget code.
*Now that you are back on the 'Add and Arrange Page Elements' screen drag and drop the widget and reposition it over (on) top of the 'Blog Posts' page element. NOTE: You may have to scroll down the 'Add and Arrange Page Elements' page to see and get to the 'Blog Posts' page element. 
*Scroll back up and click the Save button (top right hand of screen).
*Click on 'View Blog' and you will see your new 'Floating Share Buttons Widget' appearing on your blog.

<!-- floating share bar Start>
< style type="text/css">
#pageshare {
background: #fafafa;
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover {
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}</style>

< div id='pageshare' title="Get this Widget from">
< div class='sbutton' id='tweet'>
< script src="" type="text/javascript"></script>
< a href="" class="twitter-share-button" data-count="vertical" data-via="YOUR USERNAME">Tweet</a> </div>
< div class='sbutton' id='su'>
< script src=""></script>
< /div>
< div class='sbutton' id='gplusone'>
< script type="text/javascript" src=""></script>
< g:plusone size="tall"></g:plusone> </div>
< div class='sbutton' id='fbshare'>
< div id="fb-root"></div>
< script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
< div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
< div style="clear: both;font-size: 10px;text-align:center;"><a href="">Get Widget</a></div><!-- Do not remove this link --> </div>
< !-- floating share bar End -->

NOTE: Within the above 'Floating Share Buttons Widget' code you will see this in blue lettering: "YOUR USERNAME">Tweet, you must delete the: YOUR USERNAME and replace it with your Twitter username. I entered "PamelaJParr", my Twitter username inside of the quotation marks (do not delete the quotation marks).

(2) Blog Template the second method used to insert HTML JavaScript code in to your Blogger blog. Do so by logging in to your blog, and at the upper right of the screen click on Design>click on Edit HTML (at the upper left of screen). Now click on the small box beside 'Expand Widget Templates' (a check mark appears inside of the small box).  

To quickly copy and paste the HTML JavaScript code for social media icons in to your blog template code, on your keyboard, hold down the Ctrl key and also hit the letter F key (Ctrl+F). The HTML JavaScript code word finder tiny pop-up screen appears (at the upper right) that allows you to type in a word or phrase that will help you quickly jump to a certain part of your existing code that you want to insert your new widget code above or under.

For example, if you already have inserted a Facebook widget code in to your blog template and you want to now insert code for a Twitter widget, above or under it, just hold down the Ctrl key and hit the letter F, and in its pop-up screen type in the word: facebook and you will be quickly directed to the facebook widget location. Insert the Twitter widget code above or under the Facebook widget code.

NOTE: Depending on where you want your new Twitter widget to appear on your blog, if you have more than one facebook widget code already inserted in to your template, you will have to hit the up or down arrow of the Ctrl+F pop-up screen, to place the Twitter widget before or after the first or second Facebook widget. Just beside the Ctrl+F up and down arrows you will see 1 of 2 indicated if you do have more than one facebook widget in your code. In fact, even if you only have one Facebook widget in your code you may still have to hit the up or down arrow, after typing: facebook in to the Ctrl+F pop-up screen, to make it jump to the word facebook.

Assuming that you do have an existing Facebook widget in your code, I will now demonstrate the insertion of the HTML JavaScript code for a Twitter flash (animated) profile widget also in to your blog template using the Ctrl+F key pop-up screen HTML JavaScript code finder. As you can see, at the upper right of my blog under my 'Select Language' gadget, there is a flash (animated) Twitter profile widget and when you click on it my Twitter account appears.

Firstly, login to your blog, and click on this link to get this same widget code: and you will see that mine is the one in the center of this page. Choose it, or another, and click on the link beneath it called 'Get the button'. Resize this widget with the resize scroll bar, if you want to, then type in your Twitter name in the box provided, I entered my Twitter name: PamelaJParr, and click on 'Apply your Twitter name to the code'. Now copy this code, that now also has your Twitter name included, so that you can also paste it in to your blog template code using the next step.

Lastly, at the upper right of your blog click on Design>click on Edit HTML>click on the small box to the left of 'Expand Widget templates'. Hold down your keyboard Ctrl key and hit the letter F key (Ctrl+F) and when the HTML JavaScript word finder pop-up screen appears type in: facebook (or the name/word of another existing widget) where you would like to place the Twitter flash widget below or under. Click on 'Save Template' button, click on 'View Blog', and you will see your new flash Twitter widget. NOTE: Of course, you must place your new Twitter widget code before or after the entire code of another widget not just before or after the word that you used Ctrl+F to search for, in this case, the word: facebook.

NOTE: Internal links within this post will be working later on, March 13, 2012,  since they have to be inserted after publishing a Blogger post. 

NOTE: You can also contact me with any of your computer related questions via my profile at this link:, then just click on: E-mail Pamela j. 

Your Reactions:


Kailyn said...

thanks for the post!