This article explains how to add Google Friend Connect (GFC) on a separate WP Page different from the Home one. For adding it on your WP Home Page (in the Sidebar) you can use Google Friend Connect Integration Plugin.
You probably have noticed that GFC does not work if inserted in a new page through your WP Control Panel (Pages > New). This is because it is not the right place for that purpose. Now let’s go step by step.
What you need
We assume that:
- you want to insert GFC on a page named „My Friends„;
- you have created an account (set up a new site) at Google Friend Connect; and hence
- you have uploaded rpc_relay.html and canvas.html files on your web site.
If so you have already got a code similar to this:
<!– Define the div tag where the gadget will be inserted. –>
<div id=“div-1231066965610″></div>
<!– Render the gadget into a div. –>
<script type=“text/javascript“>
var skin = {};
skin['HEIGHT'] = ‘275′;
skin['BORDER_COLOR'] = ‘transparent’;
skin['ENDCAP_BG_COLOR'] = ‘#2E3335′;
skin['ENDCAP_TEXT_COLOR'] = ‘#DDDDDD’;
skin['ENDCAP_LINK_COLOR'] = ‘#24A1CC’;
skin['ALTERNATE_BG_COLOR'] = ‘#2E3335′;
skin['CONTENT_BG_COLOR'] = ‘#DDDDDD’;
skin['CONTENT_LINK_COLOR'] = ‘#24A1CC’;
skin['CONTENT_TEXT_COLOR'] = ‘#334A55′;
skin['CONTENT_SECONDARY_LINK_COLOR'] = ‘#24A1CC’;
skin['CONTENT_SECONDARY_TEXT_COLOR'] = ‘#BBBBBB’;
skin['CONTENT_HEADLINE_COLOR'] = ‘#334A55′;
google.friendconnect.container.setParentUrl(’/’ /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget( { id: ‘div-1231066965610′, site: ‘16557752937099567054′}, skin);
</script>
What to do
1. Make a small amendment in your code. Change the div tag <div id=“div-XXXXXXXXXXXXX“> (where the GFC gadget will be inserted) this way:
Note: „div-XXXXXXXXXXXXX“ presents the id of the div tag in your GFC code.
2. Open page.php file, located in your theme folder (wp-content/themes/<YOUR THEME NAME>/page.php).
3. Find following div tag <div class=“entry“> and Insert your changed GFC Code in it:
<div class="entry">
Paste Your GFC Code Here!
</div>
4. Add following Javascript code right after the first line (<?php get_header(); ?>) of page.php:
window.onload=function() {
if(document.title.indexOf(“My Friends“)!=-1){document.getElementById(“div-XXXXXXXXXXXXX“).style.display=“block“;}
}
</script>
Note: Use the div tag id from your GFC code in the above getElementById() method!
5. Now create the page named „My Friends“ via your WP Control Panel (Pages > New).
How it works
Inserting your GFC code into page.php will cause appearance of GFC on each and every page of yours. That’s why in the first step we made GFC invisible by adding style=“display: none“. The Javascript code (step 4) makes GFC visible only on the specified page.
Final words
If you use jQuery the Javascript code (step 4) should look this way:
$(document).ready(function() {
if(document.title.indexOf(“My Friends“)!=-1){$(“#div-XXXXXXXXXXXXX“).css(“display“,“block“);};
});
</script>
Enjoy it!
P.S.
Any better ideas are welcome!
1 коментар
It all goes by very fast, so be prepared! ,
Добавяне на коментар