Categories
Facebook jQuery PHP WordPress

Loading facebook social plugin into AJAX generated dynamic content. [Solved]

To include Facebook social plugins(ex: Facebook Comments http://developers.facebook.com/docs/reference/plugins/comments/) into our site, we use some java-script and some HTML structure provided by facebook. It works fine until you have AJAXified your pages. If your site refreshes each page on each request then facebook social plugins work perfect.
Problem occurs when the HTML structure is loaded via AJAX and the script used for FB is not called again after the ajax response. This happens because Facebook parses the page only on initial load and so doesn’t pick up the dynamic content. To make it work on AJAXified content, we need to explicitly tell it to re-parse the entire page, or just the new content.

Recently, I used a plugin called “Ajaxify WordPress Site” which makes a wordpress website completly AJAXified semlessly. Really nice plugin to ajaxify WP sites without any hassel, but one problem I faced with this was Facebook Comments not being rendered after AJAX response for which the answer is “FB.XFBML.parse()” function call.

Example:

1. JavaScript SDK which needs to be included once on the page.

2. HTML code to be placed wherever we want facebook plugin to appear on your page.

So, in our case, say this bit of HTML code comes dynamically with AJAX not on page refresh. So how can we display the facebook comments ?

Answer is simple: Call the ” FB.XFBML.parse() ” explicitly inside the AJAX success function, which will re-parse the html and render the Facebook comments section. 🙂

3. Code for AJAX success block with “FB.XFBML.parse()” call.

Hope this will help someone solving facebook social plugin issue with AJAX content.. 🙂

Categories
MySql PHP

[Solved] latin1_swedish_ci collation by default in PhpMyadmin to “utf8_general_ci”

After upgrading to PhpMyAdmin version: 3.4.5 (which comes in XAMPP 1.7.7-VC9), I noticed that the default collation of MySql is set to “latin1_swedish_ci”.Due to this, whenever a new database is created using phpMyAdmin, it sets the collation as latin1_swedish_ci by default(there will be no problem due this though). We can change this to “utf8_general_ci” / “utf8_unicode_ci” by selecting the needed one before creating the database. If we forgot to select the right one, then it will make the collation as “latin1_swedish_ci”. 🙁

Change the default collation to utf8_general_ci in MySql:

  • Open the my.ini file. (C:xamppmysqlbinmy.ini)
  • Find the text [mysqld] and add the below lines.

    The above two lines will select a character set and collation at server startup. These settings apply server-wide and apply as the defaults for databases created by any application, and for tables created in those databases.
  • Save the file and restart the mysql server.(XAMPP Control Panel -> Stop -> Start)


For more info read: Configuring the Character Set and Collation for Applications

Categories
jQuery PHP Social Life Software Tricks Technology

How to display profile image in google search

May be you want to display your google profile image next to the search result for your blogs in Google search. If you google something, you can see some small images next to the search results. These are nothing but the google profile images of the blog authors. When you see that photo show up in your search results, it means Google are verifying that the blog post was written by that person. If you click on the name in the search results, it takes you to that blog author’s Google+ Profile. You can join me on Google+ here!

Thankfully its very easy to configure your site to be compatible with the new author photo snippets that show up on Google Search. However not guaranteed that your photo, or a photo of one of your authors, will appear in Google Search immediately. It is rumored that Google has enabled that feature only for selected blogs and sites based on some criterias.

How to do it ?

  1. Create an author page or “About Me” page on your blog site(same domain).
  2. Add link to this author page from your blogs.
  3. Add a link to your Google profile in the Author page.
  4. Linking Back from Google Profile to your Author page/About Page.Here we need to link back from the Google profile to the about page on the website. Open your Google Profile, click the Profile icon at the top and then the Edit Profile button at the top. Locate links on the right side and select the Add custom link option.

The idea is actually extremely simple. You link from your blog to your Google Profile – Then, from your Google Profile to your blog. This reciprocal linking verifies that the owner of that Google Profile is also the (or an) author on that blog. If you own a multi authored blog it works too. You just need your bloggers to link from their Google Profile, to their author page on your blog.

I’d like you to read the instructions from Google,Google: Adding author information in search results which I followed to add the profile image.

To summarize:
Option 1. Add your name and email to your content (recommended for sites with content by multiple authors)
Option 2. Link your content to your Google Profile, and vice versa

Testing with google’s Rich Snippets Tool:
Once you have followed the instructions, check that you have done it correctly using Google’s Rich Snippets Testing Tool. This tool will let you know if the code is working and show you what your blog will “look” like in Google’s search results, AFTER they have activated it. To use the Rich Snippets Testing Tool, simply paste the URL (address) of one of your blog posts into it and press the preview button .

Then, if everything looks OK and you see your photo in the preview, it’s a matter of waiting… I look forward to seeing your smiling faces when I’m next searching!