Google Friend Connect + CSS Style Switching

Question

I have been playing around with CSS Style Switching on my blog www.whataboutki.com and have also added Google Friend Connect. I would now like to change the colours of the GFC widget when the user changes styles. This is the script for GFC... the div id="div-1229769625913" does that mean I can access that from my css files? If so how would I go about doing so?

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"&gt;&lt;/script&gt;

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
    var skin = {};
    skin['HEIGHT'] = '385';
    skin['BORDER_COLOR'] = '#cccccc';
    skin['ENDCAP_BG_COLOR'] = '#e0ecff';
    skin['ENDCAP_TEXT_COLOR'] = '#333333';
    skin['ENDCAP_LINK_COLOR'] = '#0000cc';
    skin['ALTERNATE_BG_COLOR'] = '#ffffff';
    skin['CONTENT_BG_COLOR'] = '#ffffff';
    skin['CONTENT_LINK_COLOR'] = '#0000cc';
    skin['CONTENT_TEXT_COLOR'] = '#333333';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
    skin['CONTENT_HEADLINE_COLOR'] = '#333333';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
     { id: 'div-1229769625913',
       site: '10794935298529647173'},
      skin);
</script>

Answer 1

I'd experiment to see if div-1229769625913 changes between pages first. If it doesn't then you could restyle in your CSS files, otherwise you will have to change the colours for skin in your style-switcher (which I assume is JS).

Answer 2

The ID is generated by GFC. It populates the DIV with an iFrame hosting your gadget code on their *.gmodule.com servers

In theory you could access and modify their DOM after it's loaded to change their style

Try changing the values in the "skin" map for style

eg. skin['ALTERNATE_BG_COLOR'] = '#ffffff';

Good luck!

Answer 3

i would like to know, if you had the answers for this:

1. can i hide the 'follow and connect with your friends' links and google friend connect icon at the bottom of the gadget?

2. why there is a one big space after the pictures of the followers in the gadget?

3. can i change the 'follow' text in the gadget to another word?

give me a buzz if you answered this. thanks for advance.

Answer 4

The div id stays the same between pages, however, it generates an iframe and the GFC gadget is displayed within that iframe. Your CSS stylesheets don't have any control over the styling of the contents of that iframe, so the only way to accomplish this would be with some javascript.

The simplest solution would be to rip out all of the values in that hash, and prior to rendering the gadget, substitute whatever values are appropriate based on the currently used stylesheet. That way you don't have to mess with the DOM of the iframe, which would be non-trivial and unreliably fragile, since Google doesn't expect you to do this.

So your code might look something like this:

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"&gt;&lt;/script&gt;

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
    function currentSkin() {
      // Put some real code that detects what the
      // right color scheme is here.
      return 'VERY_BLUE';
    }

    var skins = {};
    skins['VERY_BLUE'] = {};
    skins['VERY_RED'] = {};
    skins['VERY_BLUE']['HEIGHT'] = '385';
    skins['VERY_BLUE']['BORDER_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ALTERNATE_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_SECONDARY_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_SECONDARY_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_HEADLINE_COLOR'] = '#0000ff';
    skins['VERY_RED']['HEIGHT'] = '385';
    skins['VERY_RED']['BORDER_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['ALTERNATE_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_SECONDARY_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_SECONDARY_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_HEADLINE_COLOR'] = '#ff0000';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
     { id: 'div-1229769625913',
       site: '10794935298529647173'},
      skins[currentSkin()]);
</script>