This is a follow up from my discussion about customizing the Mobile version of 2.0 communities found here:
TIP/Trick/Hack 2.0: Injecting CSS into Mobile Version & Fixing Mobile Groups Style
What you'll Need To Add Your Groups to a Facebook Page Tab
Snappy Snippet Extension for Chrome
HTML5 App from FBAPPs added to your page
a Ning 2.0 community Mobile Version (add /m to the end of your URL)
What your are Building in less than 5 minutes
Install the chrome extension and the app to your facebook page above..
Step One: Go to the page of your groups on your mobile version (example), scroll all the way down so that all of your groups are in view, right click on the top group and inspect element. Make sure the entire block of groups is highlighted and that your cursor is highlighting the ul.groups selector
Step Two: Click the snappy snippet extension in your console and extract HTML and CSS like this:
Step Three: Head over to your facebook page and click on the HTML Tab > Click Application Settings > REMOVE EVERYTHING from the HTML, CSS and JS boxes
Step Four: Copy the HTML block from the JSFiddle page and place it in the HTML section
Step Five: Add <STYLE> tags to the CSS and copy/paste everything from the CSS section on your JSFiddle in between the style tags and press save..
Live Demo... Here on the I KNow What a Land Surveyor Is. page tab on facebook
Let me know if you have questions or any other clever workarounds..
Replies