Book On Blogging: widget

Add Facebook Like Button To Blogger Blog Posts

Adeniyi Samuel 0 blog, blogger account, Blogger Tutorials, facebook, fan page, magazine style, select design, widget 5:26 AM

Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared with the click of a button without leaving the page. I recently wrote a post on <a href="http://www.bookonblogging.com/add-floating-share-buttons-to-blogspot-blog-sidebar/" target="_blank" title="add floating share buttons to blogger blog">adding floating share  buttons to your blogger blog</a> and I suggest you check it out if you haven’t. Adding facebook like button involves just a couple of steps easy to implement. You can add a like button for your fan page or a like button for each and every blog post. HOW TO ADD LIKE BUTTON TO EACH BLOG POST <img alt="Facebook Like button" class="aligncenter" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYR4sdARCytXc6OMnvqwC6TQpjRPH-zP3cidlc4kpC_5KxbduxhHuXbJT3cVvVR4NiuWvYe5eMH25qM8VD_isNxHmR_jXg-qaZe7_C10Ia_83aWCUhkkQ7xjP1D7f_0jN4GOMyrIvJpkZ/s1600/facebook_like_button_for_blogger.jpg" title="Facebook Like button" width="490" /> This makes it a lot easier for your readers to share your blog posts with just a click. To add facebook like button to every blog posts automatically, follow the steps below: 1. Login to your blogger account and select Design 2. Click on Edit HTML 3. Check the box labelled Expand Widget Template 4. Like I always emphasize, back up your template before making changes in case something goes wrong 5. Press CTRL + F and search for <data:post.body/> If you’re using a magazine style template or used the automatic read more h!ck I posted, you might find two or more <data:post.body/> in your template. You should try both to know which one works. The second works on my template though. 6. If you prefer to have the facebook like button to appear on top of your blog post right below the title, paste this code above <data:post.body/> <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> </blockquote> 7. If you prefer to see the like button below your blog posts, paste this code below <data:post.body> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div> </b:if> </blockquote> 8. You might as well put it in both positions. Save your template and view the change on your blog. Note: You can change the layout written in Bold which is set to standard by default to button_count if you want the like button to show number of likes instead. You can as well set show_faces which is false by default to true. This enables the like button to show photos underneath but it applies to the standard button only. The code above only shows the like button on post pages. It won’t appear on static pages like label search results and home page. To make the like button appear on static pages involves removing two lines of codes: <b:if cond=’data:blog.pageType == &quot;item&quot;’> and </b:if>. With those removed, the facebook like button appears on static pages and on blog post pages as well. How To Make FACEBOOK LIKE BUTTON LINK TO YOUR FACEBOOK FAN PAGE In case you prefer a simple facebook like button that links to your facebook fan page instead of a bogus like box, there’s a slight change than can be made to the code above. You only need to change the URL as shown below: <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/bookonblogging&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> </blockquote> You should change www.facebook.com/bookonblogging to your own facebook fan page full address. Be sure the URL starts with http://. You can also place this code before or after <data:post.body> as explained above. Alternatively, you can add this as a widget by going to your blog’s layout and clicking on add widget on the exact position you want the like button to appear. Select HTML/Javascript and paste the code below: <blockquote><div align="center"><iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/bookonblogging&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true"></iframe></div></blockquote> Hope this helps?

Add Facebook Like Button To Blogger Blog Posts

Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared wi...

How To Add Floating Share Buttons To Blogspot Blog SideBar

Adeniyi Samuel 0 blog, blogger account, Blogger Tutorials, facebook, free traffic, gadget, java script, networking platforms, search engine optimization, social networking, widget 4:57 AM

Apart from working on traffic and search engine optimization (SEO), there’s a need to intergrate your blog with popular social networking platforms. A floating share buttons (social bookmarking) widget by the right of every page is just one of the gadgets you must add to your blog if you intend to get free traffic from facebook and twitter. I wrote a post last week that went viral thanks to the power of facebook sharing. The post received close to 500 facebook likes in just a week! Underestimating the power of share buttons is like neglecting a major source of traffic to your blog. I’ve already written several posts on integrating your blogger hosted site with facebook, google plus and the rest of them. These posts include adding like buttons to individual blog posts, adding google plus buttons to blog posts, facebook comment box for blogger and large share buttons under blog posts among others. Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting. Unlike the previous ones, it’s easy to get this done as you won’t need to do any sort of HTML editing on your template. The floating sidebar sharing widget comes with the most popular social sites. You can see the widget just at the right side of this page and it scrolls with the page, leaving your visitor no choice but to share your content. Here is What the Share buttons look like <a href="http://www.bookonblogging.com/wp-content/uploads/2012/06/floating-share-buttons.png"><img alt="floating share buttons" class="aligncenter size-medium wp-image-37" height="300" src="http://www.bookonblogging.com/wp-content/uploads/2012/06/floating-share-buttons-231x300.png" title="floating share buttons" width="231" /></a>   How To Add Floating Share Buttons On The Sidebar 1. Log in to your blogger account and click on Design 2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar. 3. Select HTML/Java Script 4. Paste the code below into the box and save. There’s no need for a title. <blockquote> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bookonblogging.com/add-floating-share-buttons-to-blogspot-blog-sidebar/" target="blank">[Get This]</a></div></div> </blockquote> 5. Save the widget and preview your blog. If you already have a google plus button above or below your posts, the one in the widget might not appear. It seems you can’t have two +1 buttons on a page. If you’re using a dark template, you can try out the code below if you don’t quite like the first one: <blockquote> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <div style="clear: both;font-size: 9px;text-align:center;"><a href="<a href="http://www.bookonblogging.com/add-floating-share-buttons-to-blogspot-blog-sidebar/">http://www.bookonblogging.com/add-floating-share-buttons-to-blogspot-blog-sidebar/</a>" target="blank">[Get This]</a></div></div> </blockquote> This floating share bar will definitely help in sharing your blog contents easily, kindly re-share to show appreciation.

How To Add Floating Share Buttons To Blogspot Blog SideBar

Apart from working on traffic and search engine optimization (SEO), there’s a need to intergrate your blog with popular social networking p...

How To Insert Google Adsense Ads Below Blog Post In Blogger Blog

Adeniyi Samuel 0 below blog post, blogger dashboard, code lt, div style, google, google adsense, html parser, Insert Google Adsense, Make Money Blogging, widget 9:50 AM

Inserting Google Adsense Ads below blog post can be a wonderful way to increase CTR as your ads will appear below your blog post before comments. How To Make Google Adsense ADS Appear Below Blog Post In Blogger Blog   <a href="http://www.bookonblogging.com/wp-content/uploads/2012/06/google-adsense-below-blog-post.jpg"><img alt="Insert Google Adsense Below Blog Post" class="aligncenter size-medium wp-image-14" height="196" src="http://www.bookonblogging.com/wp-content/uploads/2012/06/google-adsense-below-blog-post-300x196.jpg" title="google adsense below blog post" width="300" /></a> Before you implement this trick, it is highly recommended that you make a backup of your current blogger template and I hope you already have an approved Google Adsense account? Ok, Lets go on....... STEP 1: Login to your Google Adsense account, and create a new ad of your choice. STEP 2: Before you can insert the adsense in your blog, you will need to "Parse" the code. Hence, we will need an html parser to do that. So, go to <a href="http://www.blogcrowds.com/resources/parse_html.php">http://www.blogcrowds.com/resources/parse_html.php</a> At the page, you will see a box, paste your Adsense code into the box and click the "Parse" button. Copy the parsed code. You will need this parsed code in Step 3. STEP 3:  Login to you Blogger dashboard and navigate to Design > Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <data:post.body/>  and paste the parsed code you already parsed, directlybelow  <data:post.body/>  and save the template. <blockquote>That's all. View any of your blog post and you should now be seeing adsense ads showing in your post. Remember, you can only see maximum of 3 Ad units on a page at a time. Therefore, if you already displaying 3 ad units on your page, the fourth one will not display after adding this new one. Advanced Customization of your adsense code If you are as smart as me, then you can implement this advanced trick...lol. This trick will align the ad to the left,center or right belowyour blog post. Copy the code below into a notepad and fix <div style='float:left;padding:20px;'> before your ads code and </div> at the end of your ads code in your notepad, it should then look like this:  <div style='float:left;padding:20px;'> &lt;script type=&quot;text/javascript&quot;&gt;&lt;!-- google_ad_client = &quot;pub-&quot;; google_ad_host = &quot;pub-&quot;; google_ad_host_channel=&quot;00000+00013+00012+00299&quot;; /* 336x280, created 12/26/09 */ google_ad_slot = &quot;5115307496&quot;; google_ad_width = 180; google_ad_height = 90; //--&gt; &lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt; &lt;/script&gt;  </div></blockquote> Copy and paste it in your blog template as directed in step 3 and you are good to go. I hope it works for you? You can say thank you by simply sharing this tutorial on your social network using the share buttons on this page.

How To Insert Google Adsense Ads Below Blog Post In Blogger Blog

Inserting Google Adsense Ads below blog post can be a wonderful way to increase CTR as your ads will appear below your blog post before com...