i tried to do that but comment box keeps on increasing i dont know where to insert the code any anyone help me with this 

2. (function(){
4. /* Private variables */
6. var overlay = $('<div id="galleryOverlay">'),
7. slider = $('<div id="gallerySlider">'),
8. comment= $('<div class="fb-comments" data-href="http://www.bluetopten.com" data-width="350" data-num-posts="10">'),
9. prevArrow = $('<a id="prevArrow"></a>'),
10. nextArrow = $('<a id="nextArrow"></a>'),
11. overlayVisible = false;
14. /* Creating the plugin */
16. $.fn.touchTouch = function(){
18. var placeholders = $([]),
19. index = 0,
20. items = this;
22. // Appending the markup to the page
23. overlay.hide().appendTo('body');
24. slider.appendTo(overlay);
26. // Creating a placeholder for each image
27. items.each(function(){
28. placeholders = placeholders.add($('<div class="placeholder">'));
29. });
31. // Hide the gallery if the background is touched / clicked
32. slider.append(placeholders).on('click',function(e){
33. if(!$(e.target).is('img')){
34. hideOverlay();
35. }
36. });
38. // Listen for touch events on the body and check if they
39. // originated in #gallerySlider img - the images in the slider.
40. $('body').on('touchstart', '#gallerySlider img','#fb-comments', function(e){
42. var touch = e.originalEvent,
43. startX = touch.changedTouches[0].pageX;
46. slider.on('touchmove',function(e){
48. e.preventDefault();
50. touch = e.originalEvent.touches[0] ||
51. e.originalEvent.changedTouches[0];
53. if(touch.pageX - startX > 10){
54. slider.off('touchmove');
55. showPrevious();
56. }
57. else if (touch.pageX - startX < -10){
58. slider.off('touchmove');
59. showNext();
60. }
61. });
62. 
    
63. // Return false to prevent image 
64. // highlighting on Android
65. return false;
67. }).on('touchend',function(){
68. slider.off('touchmove');
69. });
71. // Listening for clicks on the thumbnails
73. items.on('click', function(e){
74. e.preventDefault();
76. // Find the position of this image
77. // in the collection
79. index = items.index(this);
80. showOverlay(index);
81. showImage(index);
84. // Preload the next image
85. preload(index+1);
87. // Preload the previous
88. preload(index-1);
90. });
92. // If the browser does not have support 
93. // for touch, display the arrows
94. if ( !("ontouchstart" in window) ){
95. overlay.append(prevArrow).append(nextArrow);
97. prevArrow.click(function(e){
98. e.preventDefault();
99. showPrevious();
100. });
102. nextArrow.click(function(e){
103. e.preventDefault();
104. showNext();
105. });
106. }
108. // Listen for arrow keys
109. $(window).bind('keydown', function(e){
111. if (e.keyCode == 37){
112. showPrevious();
113. }
114. else if (e.keyCode==39){
115. showNext();
116. }
118. });
121. /* Private functions */
124. function showOverlay(index){
126. // If the overlay is already shown, exit
127. if (overlayVisible){
128. return false;
129. }
131. // Show the overlay
132. overlay.show();
134. setTimeout(function(){
135. // Trigger the opacity CSS transition
136. overlay.addClass('visible');
137. }, 100);
139. // Move the slider to the correct image
140. offsetSlider(index);
142. // Raise the visible flag
143. overlayVisible = true;
144. }
146. function hideOverlay(){
147. // If the overlay is not shown, exit
148. if(!overlayVisible){
149. return false;
150. }
152. // Hide the overlay
153. overlay.hide().removeClass('visible');
154. overlayVisible = false;
155. }
157. function offsetSlider(index){
158. // This will trigger a smooth css transition
159. slider.css('left',(-index*100)+'%');
160. }
162. // Preload an image by its index in the items array
163. function preload(index){
164. setTimeout(function(){
165. showImage(index);
166. }, 1000);
167. }
169. // Show image in the slider
170. function showImage(index){
172. // If the index is outside the bonds of the array
173. if(index < 0 || index >= items.length){
174. return false;
175. }
177. $('.placeholder').load($('img').after("<div><i>After</i></div>"));
178. $('.placeholder>div:gt(1)').remove();
181. // Call the load function with the href attribute of the item
182. loadImage(items.eq(index).attr('href'), function(){
183. placeholders.eq(index).html(this);
184. });
185. }
187. // Load the image and execute a callback function.
188. // Returns a jQuery object
190. function loadImage(src, callback){
191. var img = $('<img>').on('load', function(){
192. callback.call(img); });
193. img.attr('src',src);
194. }
196. function showNext(){
198. // If this is not the last image
199. if(index+1 < items.length){
200. index++;
201. offsetSlider(index);
202. preload(index+1);
203. }
204. else{
205. // Trigger the spring animation
207. slider.addClass('rightSpring');
208. setTimeout(function(){
209. slider.removeClass('rightSpring');
210. },500);
211. }
212. }
215. (function(d, s, id) {
216.   var js, fjs = d.getElementsByTagName(s)[0];
217.   if (d.getElementById(id)) return;
218.   js = d.createElement(s); js.id = id;
219.   js.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
220.   fjs.parentNode.insertBefore(js, fjs);
221. }(document, 'script', 'facebook-jssdk'));
222. function showPrevious(){
224. // If this is not the first image
225. if(index>0){
226. index--;
227. offsetSlider(index);
228. preload(index-1);
229. }
230. else{
231. // Trigger the spring animation
233. slider.addClass('leftSpring');
234. setTimeout(function(){
235. slider.removeClass('leftSpring');
236. },500);
237. }
238. }
239. };
241. })(jQuery);

Codes that are mentioned are added by me . Can any one tell me which is the correct place to add that query