Facebook page, Twitter updates, Grooveshark Music Player integration in WordPress Blog

wp_int

Facebook page, Twitter updates, Grooveshark Music Player integration in WordPress Blog

Facebook page integration –

WordPress Login -Dashboard -Appearance -Widgets -Facebook Like Box
drag to sidebar

Title – Page Name
Facebook PageURL – URL from Address Bar when you are on a facebook page you created by “Create a page” button, not your home page, since you cannot link your home page or profile page.
Width – 200, Height – 400, Color Scheme – Light, Select – Show Faces, Show Stream, Show Wall
Save

Twitter integration –

Get “Widget ID” from Twitter
Login twitter
Settings -Widgets -Create New
Defaults -Create New
In Address Bar
https://twitter.com/settings/widgets/389688495330971648/edit?focus_textarea=1&notice=WIDGET_CREATED
copy 389688495330971648 -this is widget id

WordPress Login -Dashboard -Appearance -Widgets -Twitter Timeline
drag to sidebar

Title – Twitter Updates
Width – 200, Height – 400, # of Tweets shown – 5
Widget ID – From Twitter
Select – No Borders
Link Color – #ffffff, Border Color – #e8e8e8
Timeline Theme – Light

Grooveshark Music Player integration –

Create account on grooveshark
login (can login with google account)
In Grooveshark got select a song and see icons for adding to playlist and sharing
From the Share menu, select Embed.
(not needed for wordpress – Click ‘Copy to Clipboard’ and the entire HTML code will be added to your clipboard)
copy widget code above preview button

widget code is like this, paste in a text file (except <- is <)

<-object width=”250″ height=”40″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ id=”gsSong149771650″ name=”gsSong149771650″><param name=”movie” value=”http://grooveshark.com/songWidget.swf&#8221; /><param name=”wmode” value=”window” /><param name=”allowScriptAccess” value=”always” /><param name=”flashvars” value=”hostname=grooveshark.com&songID=1497716&style=wood&p=0” /></object>

(not needed for wordpress – To make a widget autostart when the page loads, you need to edit the widget code just a bit. There are two &p=0. Change both to &p=1 )

WordPress Login -Dashboard -Appearance -Widgets -Text
Title – Music
Code – See below

IMPORTANT – Replace     [-      WITH     [     in examples below. They are there only so as to show code in blog instead of player being integrated in the post.

(not needed for wordpress – Single song widget look here: – [-gigya src=”http://grooveshark.com/songWidget.swf&#8221; type=”application/x-shockwave-flash” width=”250″ height=”140″ flashvars=”xxxx” allowScriptAccess=”always” wmode=”window”] )

or multiple songs… (use this)

Replace     [-      WITH     [     below
[-gigya src=”http://grooveshark.com/widget.swf&#8221; type=”application/x-shockwave-flash” width=”250″ height=”140″ flashvars=”xxxx” allowScriptAccess=”always” wmode=”window”]

replace the xxxx with the text following (param name=”flashvars” value=”) like – hostname=grooveshark.com&songID=1497716&style=wood&p=0, and the width and height from your widget code.

For Example for code above, in wordpress like this –

Replace     [-      WITH     [     below
[-gigya src=”http://grooveshark.com/widget.swf&#8221; type=”application/x-shockwave-flash” width=”250″ height=”140″ flashvars=”hostname=grooveshark.com&amp;songID=1497716&amp;style=wood&amp;p=0” allowScriptAccess=”always” wmode=”window”]

playlist embed –

All the songs in your playlist current at anytime will be shown in this widget. It is live like facebook and twitter widgets.

In Grooveshark got select a song and see icons for adding to playlist. Then click on your user name and go to playlists, then use share button on Playlist.
From the Share menu, select Embed.
copy widget code above preview button –

<-object width=”250″ height=”250″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ id=”gsPlaylist9142817220″ name=”gsPlaylist9142817220″><param name=”movie” value=”http://grooveshark.com/widget.swf&#8221; /><param name=”wmode” value=”window” /><param name=”allowScriptAccess” value=”always” /><param name=”flashvars” value=”hostname=grooveshark.com&playlistID=91428172&p=0&bbg=000000&bth=000000&pfg=000000&lfg=000000&bt=FFFFFF&pbg=FFFFFF&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lfgh=FFFFFF&sb=FFFFFF&bfg=666666&pbgh=666666&lbgh=666666&sbh=666666” /></object>

replace the xxxx with the text following (param name=”flashvars” value=”) like – hostname=grooveshark.com&amp;playlistID=91428172&amp;p=0&amp;bbg=000000&amp;bth=000000&amp;pfg=000000&amp;lfg=000000&amp;bt=FFFFFF&amp;pbg=FFFFFF&amp;pfgh=FFFFFF&amp;si=FFFFFF&amp;lbg=FFFFFF&amp;lfgh=FFFFFF&amp;sb=FFFFFF&amp;bfg=666666&amp;pbgh=666666&amp;lbgh=666666&amp;sbh=666666)

For Example for code above, in wordpress like this –

Replace     [-      WITH     [     below

[-gigya src=”http://grooveshark.com/widget.swf&#8221; type=”application/x-shockwave-flash” width=”250″ height=”140″ flashvars=”hostname=grooveshark.com&amp;playlistID=91428172&amp;p=0&amp;bbg=000000&amp;bth=000000&amp;pfg=000000&amp;lfg=000000&amp;bt=FFFFFF&amp;pbg=FFFFFF&amp;pfgh=FFFFFF&amp;si=FFFFFF&amp;lbg=FFFFFF&amp;lfgh=FFFFFF&amp;sb=FFFFFF&amp;bfg=666666&amp;pbgh=666666&amp;lbgh=666666&amp;sbh=666666” allowScriptAccess=”always” wmode=”window”]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s