Do you want to add the facebook ‘like’ or google plus button on your website? This will work with most blogs, including standard websites, typepad, and wordpress (if wordpress allows custom muckerly, I don’t have a “pro” account so I wouldn’t know).

Here’s how:

Facebook
Go to developers.facebook.com and register yourself (assuming you’ve already got a FB account). For W♥M, it is the link to our FB page. I also only used the “button” and unchecked the “Send Button”.

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxxxxxx&xfbml=1″></script><fb:like href=”https://www.facebook.com/weheartmusic#!/pages/WeMusic/7275117142&#8243; send=”false” layout=”button_count” width=”75″ show_faces=”true” font=”verdana”></fb:like>

I believe you may want to change the width to “150” or “200”, depending on the size of your sidebar. The “xxxxxxx” is the number of your unique FB appID.

Google Plus
This was a little trickier because I had a hard time finding the official how to add G+ to your website (you would think Google would put their website on the top, considering that it is their product). The official page is located at google.com/webmasters.

What I found work for typepad is unchecking “Asynchronous” and adding “href” with your link.

Here’s our code:

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script&gt; <g:plusone size=”small” href=”http://weheartmusic.typepad.com”></g:plusone&gt;

I hope that helps, if you want to place the two side by side, just make a table with two columns and putting the codes in each cell.

<table><TR><td valign=”top”>
(FB item)
</td><td valign=”top” style=”padding-top:4px;”>
(G+ item)
</td></tr></table>

I did have to ‘pad’ the table for G+ a little, which explains why there are four pixels on the second table. Did that make sense at all?

 

Leave a Reply

Discover more from W♥M

Subscribe now to keep reading and get access to the full archive.

Continue reading