Adding Facebook like button as Custom toolbar button in TinyMCE editor

To add a Facebook Like button to the TinyMCE editor, we need to use the setup callback function that enables us to add events to the editor instances before they get rendered.

Set 1: Add a Callback function in your TinyMCE init function

Add a callback function to your TinyMCE init function as follows. Make sure that all of your other configurations are taken care by separating each attribute values with comma (,)

tinyMCE.init({
   ...
   setup : function(ed) {
        ed.addButton('facebook', {
            title : 'Facebook Like',
            image : '[Your path for image]/facebook.png',
            onclick : function() {
                ed.focus();
                ed.selection.setContent('<fb:like send="false" width="450"  show_faces="true"></fb:like>');
            }
        });
    }
});

And add this new button to tool bar as follows:

theme_advanced_buttons4: “facebook"

By Default TinyMCE will strip all invalid tags from editor, to add the Facebook tags as valid tags in TinyMCE add the following line..

valid_elements: "fb:like[send|width|show_faces]"

The valid_elements option defines which elements will remain in the edited text when the editor saves
So, finally your TinyMCE init function looks like as follows

tinyMCE.init({
   ...
    valid_elements: "fb:like[send|width|show_faces]",
   setup : function(ed) {
        ed.addButton('facebook', {
            title : 'Facebook Like',
            image : '[Your path for image]/facebook.png',
            onclick : function() {
                ed.focus();
                ed.selection.setContent('<fb:like send="false" width="450"  show_faces="true"></fb:like>');
            }
        });
    },
     theme_advanced_buttons4: “facebook"
});

Step 2: Include the following JavaScript SDK of Facebook on your default Layout / Master page

<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); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

That’s it; you’ll get a custom toolbar button in your TinyMCE editor!

CSS: Importance of Optimization

A coherent way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most influential measures you can employ is to use each declaration just one time.

Using every declaration just once means making strict use of selector grouping.

For example, you can combine these rules:

h3 {color: #cdcdef ;}
p {color: #cdcdef ;}

into a single rule:

h3, p {color: #cdcdef;}

While this simple example appears obvious, things are getting more interesting and harder to compute when talking about complex style sheets. In our experience, using each declaration just one time can reduce the CSS file size by 20-40% on average.

Let's have a look at another example:

h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }

 

Applying the "any declaration just once" rule here results in:

h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }

 

Note that the !important declaration makes a difference.

There are some things to keep in mind when applying this method:

• First, very long selectors can render this method useless. Repeating selectors like html body table tbody tr td p span.example in order to have unique declarations doesn't save much file size. In fact, since "using each declaration just one time" might mean a higher number of selectors, this could even result in a bigger style sheet. Using more compact selectors would help, and would enhance the readability of your stylesheet.
• Second, be aware of CSS regulations. When a user agent can't parse the selector, it must ignore the declaration block as well. If you run into trouble with this, just bend the " each declaration just one time " rule – and use it more than once.

Third and most importantly, keep the cascade in mind. No matter if you're sorting your style sheets in a convinced way or are very tranquil about the order in which rules appear in your style sheets, using each declaration just one time will make you change the order of the rules in one way or another. This order, however, can be decisive for a browser to decide which rule to apply. The easiest solution if you're running into any issues with this is to make an exception as well and use the declaration in question more than once