Add Facebook Recommendation bar to blogger blog

AppId is over the quota AppId is over the quota

The recommendations bar lets people like content, get recommendations and share what they’re reading with their friends. Facebook is probably the largest social networking website in the world. This is the reason why most of the corporate companies utilize Facebook for marketing their material and making it go viral on Social media. Facebook provides various ways of making your content go viral through Facebook like box, Facebook comments, Facebook like button. The recommendation bar is not something new, in fact you see it on many websites, including on myblogger-tricks.com. It’s that box that appears to the right side of your blog or website with links to articles on your site, offered as ‘recommended for reading’ to your visitors. This is a good approach to adopt if you want to increase your pageviews, but bear in mind that not all visitors would like to be interrupted with such a floating box.

 

Step 1. Create Facebook Application

Before you can use the Facebook plugin for blogger, go to the Facebook App page and click on the button Create New App.

1. Go to facebook Developer Page.

2. and create app like setting below.

3. Enter the captcha security code. Click Continue.

Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

 

Now you will land of a new page which would provide you your application details like App ID, App Secret and etc. You need to copy “app ID” and enter them later. ( See Screenshot above )

 

Step 2. Add It To Blogger

 

1. Go to you blogger Dashboard>>Template>>edit html

2. Search for this code.

 

3. Replace with below code.

xmlns:fb='http://ogp.me/ns/fb#'

 

• This will make the recommendation bar compatible in older versions of  browsers also.

 

You are almost done. Make these changes:

• Just replace *************** with your 15 digit App Id that you saved in step1.
• and replace http://www.myblogger-tricks.com with your blog home page link.

More Editing in code above

The plugin is expanded once the trigger parameter requirements are met, and the person has been on the page for at least the duration specified in the read_time parameter. There are three values for the trigger parameter:

• onvisible. The plugin is expanded when people scroll past the exact point where the tag is placed on the page. This is the simplest option and will work best if you place the tag right at the end of your article's main content. This is the default.
• X%, where X is any positive integer less than or equal to 100. This specifies the percent of the page that must be scrolled before the plugin is expanded. For example: 100% would indicate that people need to scroll all the way to the end of the page before the plugin expands. 50% indicates that people need to scroll to the middle point of the page.
• manual. Use this option to manually trigger the plugin. When you want to trigger the plugin, callFB.XFBML.RecommendationsBar.markRead(href); in JavaScript. The href parameter is optional and will default to the current page if not set. If provided, it must match the href parameter on the XFBML tag. The manual trigger is useful when you have more a multipage article. For example on a three-page article, you would add trigger="manual" on pages one and two and never call the markRead JavaScript function on those pages.

The read_time parameter tells the plugin to wait a certain amount of time before it expands. It takes an integer representing the number of seconds. By default this will be set to 30 seconds. The minimum is 10 seconds. Note that in order for the plugin to expand, the trigger condition must be true, and the read_time must be met.

 

The Above Documentation Provided by Facebook Developer Team..

Save your template and see the plugin work correctly. If any thing went wrong just your post query below in comments. I will reply back as soon as time allow. I hope the installation was very simple adn easy. Happy Blogging..!!

add Facebook Popup like box with jquery to your blogger blog

AppId is over the quota AppId is over the quota

This is my first tutorial on popup widget using Jquery  For The Blog And My Blogging Carrier Too.. First Of All Let Me say Thank to jacklmoore for provding A juqery light box. The popup Like box is not designed for make you blog look like professionals, The widget designed for get more Facebook like. This box has also a close botton at the top right corner. Visitor can close this widget by clicking on close button. Popup box widgets really annoy your visitors when they appear again and again, but they help you in developing your blog well when you use them properly. Facebook is a major source of traffic which can send your blog a good traffic flow when you have enough fans on your Facebook page. To expand your Facebook network and to increase your Facebook page's fans, I have brought a very stylish Onetime Facebook Like Popup Widget for your blogger blog which will appear onetime only and thus it will increase your Facebook fans dramatically without annoying your visitor. Facebook popup widget save a cookie in your visitor’s browser. when reader visit your blog first time Facebook like box is appear to your reader and when visitor navigate to another page or visit back later like box never appear again if readers doesn’t there browser cookies.

 

Live Preview

 

Add It To Blogger

You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..So First Backup your Template.

 

1. Go to your Blogger Dashboard>>Template>>Edit Html

2. Find following code in your template.

 

3. and paste the following code before/above

 

• *7 Setting this value will effect cookie refreshment. I have set the likebox to appear once to the visitor and likebox will appear again after 1 week. If you want to display likebox to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.

4. Now Search for .  Click the black arrow to expand the code.

 

5.  and paste following css code before above

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhx7Qvf6fEyZ5yeC4kclyOPsm1uwJyTLjdXF8181a7WI1pOvHnlk1hIfBIyNXqoO_Ty5blD10WN0M5Z2_HCpK77FaLwsg_RIcgmE1kjIXJmSU28VT0E8coWX7kl7SROwVvJxluBBNicFq/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2TXVxEBkDsbGj7g-Qff4DhRVoiT6U4hOepTx-J_BCXQ4CyAKB_e04p89KHYRTIetV39Ne6zz7MRIpndTAzL_5NyGxnLOvL6I_oHMLWkya9FVvPq5vpbl6ljhznttkNCndJHhLq4dfafi/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

 

6. Save your template and you are done second last step! Visit your blog to see it working just perfectly. 

7. Now finally find following code.

 

 

8. and paste the following code before closing tag.

 

Receive All Free Updates Via Facebook.