Andrew Bleakley

Have you ever tried to insert Paypal Buy Now buttons into a blog running Thesis ? You follow all the instructions and end up with great big scaled up pay pal buttons that look stupid.

So, how do i fix them ?

The fix is actually very simple. Open the Thesis Custom File Editor. From the drop down list select custom.css and click the green Edit selected file button.

At the end of the file add the following code

.custom .format_text input, #commentform input, #commentform textarea {
    width:auto;
}

if you are having trouble try typing it instead of copy and pasting.

Save the file, and reload you page with the paypal buttons. If everything went to plan your buttons should be the correct size now.

Goodluck, I hope this helps you out. Let me know either way

Google Friend Connect is a set of Google gadgets designed to turn your blog or website into a community with nothing more than copy and paste.

Adding Friend Connect features to a website requires no programming skills; you just copy and paste snippets of HTML code onto your site. You can can also add custom integrations with Friend Connect’s API.

Unfortunately for WordPress users (more specifically Firefox visitors to WordPress blogs) it doesn’t work quite that easily. Simply pasting the provided code into a sidebar text widget won’t work for any of your site visitors using Firefox. Internet Explorer is OK – and that is about the only time that phrase will leave my lips.

Before you start take the opportunity to join my Google community – please- come on it looks sad there with no one in it. My mum checks this blog, I want her to see I have some friends.

How to make Google Friend Connect with Thesis, WordPress and Firefox

Step 1.

Log into Google Friend Connect and get the code for your members gadget.

The code comes in three parts.

The Google Friend Connect Library

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

The DIV tag (marking the insertion point for the gadget)

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>

The skin (or render) JavaScript

<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
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';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-4138360605280xxxxxx',
site: '06043523137538175547' },
skin);
</script>

Step 2.

In WordPress go to Appearance, Widgets and add a new Text widget to the sidebar where you want the gadget to appear.

Leave the title blank (my preference, feel free to do what you like)

In the body of the widget paste ONLY the DIV portion of the Google Friend Connect Code

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>

Step 3.

Go to Thesis Options (/wp-admin/admin.php?page=thesis-options)

Expand the Footer Scripts option panel.

Above any code that may already be in there (like Google Analytics) paste

<script>
window.JSON = {
parse: function(st){
return st.evalJSON();
},
stringify: function(obj){
return Object.toJSON(obj);
}
};
</script>

Below this snippet (required for Firefox) paste the Google Friend Connect Library code and the  skin JavaScript.

<!-- Render the gadget into a div. -->

<script type="text/javascript">

var skin = {};

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';

skin['NUMBER_ROWS'] = '4';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

 { id: 'div-4138360605280xxxxxx',

 site: '06043523137538175547' },

 skin);

</script>

Conclusion

There really isn’t one. I have no idea why Google’s code doesn’t work – I can not understand the management decision making that allowed it to be released.

The code above will work for any WordPress site, but instead of being able to paste the code into a Thesis Option panel, just open your footer.php file in the WordPress Theme Editor and paste it directly above the </body> tag.

Would love to hear from anyone this helps, remember to use the code Google gave you, not my code – sing out if you have any trouble.