I've always has a Thing for NingDig Deeper into What You Can Do With Ning Networks ![]() As one of the few web developers on the planet specializing in Ning Network Design and Community Development online, I experiment with pushing the limits of what can be done with the Ning framework. If you are a member of the Ning Creators Network, you may have come across my tips and tricks, dating back to early 2007. Below you will find my latest experiments, tips, tricks and hacks for working with and designing on Ning . | Private Ning HelpOn Demand Ning AssistanceIf you are looking for an experienced web developer with over 7 yrs experience building Ning Networks, you have found your guy! Simply fill out the form and I will get back to you ASAP. Also take a look at some canned Ning Services on my Store and be sure to subscribe to my Ning Tips Feed. Ning Design HelpNeed Ning Network Help? Try Something Entirely New! A Real Person and a Phone CallMany Ning Creators out there have ideas which seem to be more complicated than they actually may be. A lot of issues that you may be having might be solved with a simple phone call to someone who will take the time to explain possible reasons for such problems with your Ning network, without talking down to you or overcomplicating your headache. So, I've been thinking about a new method for providing help to NCs who have questions and would rather not post it publically in the forum. Introducing the first ever NC Call-In Support Line If you are having simple issues, give me a call click to call Its SO Simple. Go to my profile, click to call and let's chat! Leave a detailed message if you do not catch me and I'll be back in touch with you as soon as possible. I will never charge you for help over the phone and will try my best to answer your questions. I've been a Ning Creator since 2007 and if you look at my archived discussions, you know the type of support you will receive. If you end up needing development help, we can discuss it when the time comes. If you are suffering from lack of answers, give this new method a try. I'll in turn try my best to help you figure out your options. Recent Ning Tips
Showing posts 1 - 5 of 29.
View more »
|
Ning Design Tips Log
Twitter Trick- Hack: Real-Time Twitter Hashtag Boards for Any #Term
posted May 21, 2015, 8:20 PM by justin b farrow [ updated May 21, 2015, 8:29 PM ]
This is a quick tip for anyone who would like to add a real time twitter hashtag board to any page on their ning site. So first I want you to take a look at this link. I'll wait. Now, analyzing the structure of this URL you can see a few things which can be changed to make a board for any term http://twubs.com/embed/NING/?messagesPerPage=55&headerBgColor=%231c6485&headerTextColor=%23ffffff Change the Red for the term you are wanting the latest tweets about Change this number for number of tweets to show Change this hex color (leaving the %23) for color of header and the other for header text This entire URL can become an iFrame inside a module like so: <iframe src="http://twubs.com/embed/NING/?messagesPerPage=55&headerBgColor=%231c6485&headerTextColor=%23ffffff" style="border:0px #FFFFFF none;" name="NINGtweets" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="600" width="100%"></iframe> Try it on these others substituting out NING for other terms to see what I mean: SEIAD (Survey Earth in a Day) Get Fancy with Tabs in Ning 3Enjoy this time saving hack and let me know if you have any questions... |
Add Some POWr to Your Ning Community
posted Feb 26, 2015, 2:13 PM by Jaybird Farrow [ updated Mar 5, 2015, 2:14 PM ]
Introducing POWr Plugins!

What is POWrOne of the coolest aspects of POWr is the ability to add its functionality to practically any type of site or content management system. You can now easily take your community into the pages of other websites, as a POWrful Feed. Yes it is customizable, even for the non-est of coders. Yes. There is a free version. The upgraded paid version is 100% worth it and for all you widget lovers, POWr could probably replace everything else you pay for monthly. Yes. You can run multiple instances on pages. After Signing up, try out a few demos and test them out...there are many plugins to choose from. Just add the first part of code from any of the following demos MOST IMPORTANT STEP
2) Changing the Value for "Enter a Label" mentioned in any of the demos below will make that plugin unique inside a page. This gives you the ability to run multiple instances on any page. | Demo OneDEMO ONE: Import Instagram Feed to Ning Page or Group -Live Example HOW-TO: Add the following code provided by POWr to your ""Custom Code <HEAD> section" <script src="//www.powr.io/powr.js" powr-token="YOURID" external-type="html"></script> Now add this code to a HTML Content Box <div class="powr-rss-feed" label="Enter a Label"></div> Demo Two
Add the following code provided by POWr to your ""Below Footer HTML" <script src="//www.powr.io/powr.js" powr-token="YOURID" external-type="html"></script> Now add this code to a HTML Content Box <div class="powr-rss-feed" label="Enter a Label"></div> Demo Three
Add the following code provided by POWr to your ""Custom Code <HEAD> section" <script src="//www.powr.io/powr.js" powr-token="YOURID" external-type="html"></script> Now add this code to a HTML Content Box <div class="powr-banner-slider" label="Enter a Label"></div> Demo Four
Add the following code provided by POWr to your ""Custom Code <HEAD> section" <script src="//www.powr.io/powr.js" powr-token="YOURID" external-type="html"></script> Now add this code to a HTML Content Box <div class="powr-banner-slider" label="Enter a Label"></div> I plan to share more demos |
Experiments with Flipboard and Ning Networks
posted Feb 22, 2015, 2:00 PM by Jaybird Farrow
Using Flipboard for Community Building
This Ning tip / trick / hack assumes the following:
- You use Flipboard as a way to give legs to your posts and content inside your network
- You've added the Bookmarklet to your browser toolbar and regularly add content from your network to your magazines
- You'd like to then embed your magazines into your Ning Site. (For example)
Here's how to do this:
Step OneStep One: Add something to a magazine on your flipboard like so:
This Example: https://flipboard.com/section/beautiful-nation-project-bddZSO | Step TwoFind a page you'd like to add the magazine to on your site or add a new page to hold the magazine Step ThreeAdd the following snippet of code to a HTML Module:Find a page you'd like to add the magazine to on your site or add a new page to hold the magazine <div id="flipboard"></div> | Step FourAdd the following snippet of code into the Above Footer HTML Box on that page, replacing the XXXXX with your own magazine URL from step one. <script> |
And There You Have It
And there you have it! Live Example on Beautiful Nation Project
How to Add CSS Text Effects to Ning Headers and Titles
posted Sep 24, 2014, 1:11 PM by Jaybird Farrow [ updated Sep 24, 2014, 1:38 PM ]
Text Effects with Just CSS, No Images
Around this time last year I posted a tip for how to add text effects to your imported Google Fonts and this seemed to be helpful for other NCs looking to add a little flare to their fonts. But what about those who just want to style their headers and titles but are not importing google fonts? That's what this tip is for. Furthermore, this is mainly geared towards NC's who have sites with darker backgrounds, but will also work on lighter backgrounds as well. This will be a simple tip for those who are even slightly familiar with CSS and how it works on Ning networks.
How HTML and CSS Work TogetherFirst I will show you a little table I whipped up which on the left shows the HTML for actually placing the text in the page and on the right you see the CSS which styles the text, giving it the effect we are going for. This method uses no images or javascript. There are a couple of effects in this list which use SVG and may require a bit more understanding (great article here) but if this is confusing to you don't let it deter you from trying out the others based purely on CSS. I have a codepen set up over here to use as a playground.
| Now for a Practical ExampleNow For Applying These Effects to Headers and Titles Within your Ning NetworkIf you look at this page from Ning indicating the CSS selectors to use when specifying styles, you will see that, for example, if you grab the CSS above for the Fire Text: .text_fire { and add the selector for Page Title h2.module-name you'll have this (note the comma between selectors): h2.module-name, .text_fire { Add this to your advanced CSS in Design Studio and all of your page titles will be set on fire! |
Your Thoughts on This Ning Tip
How to Add a Responsive Facebook Like Box To Ning Networks
posted Sep 6, 2014, 4:49 PM by Jaybird Farrow [ updated Sep 6, 2014, 4:52 PM ]
How to Embed Responsive Facebook Like Box
Sometimes Facebook Like boxes will break out of your layout..
Sometimes you want a like box in a sidebar and sometimes in a larger content area...
So...If you have been looking for a way to simply embed a facebook like box into your 3.0 template but have found yourself frustrated because it overflows your columns, here is a solution.
Solution to Embed Responsive Facebook Like Boxes
<div id="fb-root"></div> *replace the red with your own page url
Code to place inside your Advanced CSS: .fb-wrap {.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; } | Other Cool Tricks for Importing Social Profiles to NingYou can playaround with the code here on codepen or see it full screen here Other cool related things you can do, if so inclined: Import Entire Facebook Page Into Ning Page
Comments and questions below, or contact me for any custom work you may need. |
Tell Me Your Thoughts
Hack to Import Facebook RSS Feeds Into Ning 3.0 Networks
posted Sep 5, 2014, 8:17 PM by justin b farrow [ updated Sep 6, 2014, 5:49 PM by Jaybird Farrow ]
Workaround to Find Facebook RSS Feeds
Steps for Getting Facebook Feeds Into Ning Networks
Step 1 – Getting your page id from Facebook
Everything on Facebook, from users to photos to events, has a numeric id. This id is used internally by Facebook to find different objects in its enormous database. When you request the RSS feed from a page, you’ll need to send the id of the page along with your request. That’s why the first thing you need to do is to find the id of your page. It’s pretty simple. Open any Facebook page and click on the grab the URL of the page. Copy and Paste it here on Find Your Facebook ID When you have that numeric ID paste it into a notepad txt file for Step 2.
Step 2 –Constructing the Facebook RSS Feed URL for the Page
Just replace the numeric ID at the end of the following URL with the id you found in step 1.You can use either Atom or RSS
http://www.facebook.com/feeds/page.php?format=rss20&id=YOURPAGEID
View the Live FB RSS Feed of Beautiful Nation FB Page on this page in the network
For another example:
Here’s the URL to the Ning's Facebook page as an atom feed: http://www.facebook.com/feeds/page.php?format=atom10&id=134541301162
And here’s the URL to the same page using RSS 2.0: http://www.facebook.com/feeds/page.php?format=rss20&id=134541301162
Choosing a RSS format You can choose between an atom feed and RSS 2.0. If you don’t know the difference just go with atom.
To read more about Atom vs RSS 2.0 click here.
Step 3- Importing Your Feed into an RSS Module on Ning Site
This part is easy, simply copy and page your new URL into an RSS Feed Module anywhere on your site, save, sit back and smile.
Bonus: You can of course also have a tabbed module with several FB RSS feeds imported..For example.
Let me know if you have any questions and have a great weekend. As always I am here to help you with any workarounds you might be thinking about.
Tell Me Your Thoughts
How to Add Audio Files Hosted on Google Drive
posted Aug 27, 2014, 4:10 PM by justin b farrow [ updated Aug 27, 2014, 4:11 PM ]
Add Hosted Audio Files from Google Drive to Your Ning Network
The Process: Steps 1 and 2Step One: Upload an audio file to your Google Drive Account and then go to the file inside the drive browser. Step Two: (Works really well using Firefox)Now Click Download and you should see it downloading inside your browser...now here is the trick: Right click on where it is downloading and click Copy Download Location or Copy Source URL > Then click cancel download. Now go over to notepad and paste that URL for the next part. Should look something like this:
| Step 3Now remove everything after the last ? and replace it with &type=.mp3 Should now look like this: Step Four: Go to your profile (provided you have music player on your network) and Click +Add Music. Then on that page click +Add Music by URL Add that entire URL to the first place to insert an address. On the next screen upload an image which represents that audio file and save. You might like to click edit one last time and you'll see a new option called MORE which will allow you to add more relevant info about the track for search engines.. If you like you can try adding the URL above to test. It is a reggae radio show my friend Ras Dave plays on Wednesdays from Noon to 2pm. ENJOY long playing podcasts and radio shows on your ning network!
|
Tell Me Your Thoughts
6 Tricks towards Becoming Youtube Master
posted Aug 25, 2014, 10:40 AM by Jaybird Farrow [ updated Sep 5, 2014, 8:19 PM by justin b farrow ]
On Becoming a Youtube Master
1) A Better Way to Embed Youtube VideosNote: This is a Google Site so embedded videos act differently than on Ning networks due to Gadget Limitations. compared to this: When the user hits the play button, the image thumbnail gets replaced with the standard video player. Thus, the extra player-specific resources are loaded only when the user has decided to play the embedded video and not otherwise. Code: Embed YouTube Videos without Increasing Load TimeThe regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique YouTube ID of the video. <iframe width="320" height="180" And here’s the corresponding on-demand code for YouTube. You have to replace the height, width and the Youtube ID in the code above and then copy-paste it anywhere in your web template. <div class="youtube" id="SFWi_iEKb-A" style="width: 320px; height: 180px;"></div> When you embed any YouTube video on a website using standard IFRAME tags, you’ll be surprised to know how many extra pounds that video adds to your page. Image from Amit of Labnol The web page has to download additional ~400 kB of resources (CSS, JavaSript and Image files) for rendering the video player alone and these extra resources will download even if the site visitor has chosen not to watch the embedded YouTube video. This can be a problem for two reasons. Once, we are indirectly adding extra weight (nearly 0.4 MB) to our pages and second, the visitor’s browser has to make multiple HTTP requests to render the video player. Neat Solution: Load the YouTube Video Player On-DemandGoogle Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can easily incorporate that approach on our sites as well. Instead of embedding the full Youtube video player, Google+ only displays the thumbnail of a YouTube video and then overlays a play icon over the video so the image resembles a video player. Take a look at this sample video embedded below (or on Google Plus). 4) Use Any Youtube Video as a Background for your Ning Site PagesYou are probably using a single static image as the background for your Ning site but it may offer a slightly more richer experience if you could consider placing moving images, like an animation or a self-playing video clip, in the background of your web pages. The Bing homepage, for example, frequently uses video backgrounds, like those penguins jumping out of an ice hole one after another, and so can you on your own website. There are several approaches here:
YouTube Video BackgroundsTo get started, simply paste the code below near the opening <body> tag of your web template. You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background. <div style="xg-p: fixed; z-index: -99; width: 100%; height: 100%"> // Replace ID with the actual ID of your YouTube video Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page. The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript. | 2)Add a Subscribe Button for Your Youtube ChannelDo you have a video channel on YouTube? Then you may want to add this simple “Subscribe” button to your website that will help visitors subscribe to your YouTube channel with a click without having to leave your site for YouTube. For example, here’s a “live” subscription button for my video channel on YouTube: To embed this button to your own website, just copy-paste the following block of HTML code anywhere in your website. Then replace XYX in the subscription URL with your own YouTube username. <iframe src="http://www.youtube.com/subscribe_widget?p=XYZ"
Subscribe to Channel with a Single Click! When you create a link from the website to your YouTube channel, there’s a probability that that visitor may fail to notice the “subscribe” button on the already crowded YouTube channel page. However, if you add “sub_confirmation=1″ to the YouTube channel link, the visitor will get a prompt to subscribe to your channel while they are on the YouTube website. Click here for a live example.
5) Embed YouTube Videos without the YouTube Logo-HackEmbedding Youtube videos on your ning network is a terrific way to curate content which pertains to your site's subject matter. But one problem that can arise will actually drive traffic back away from your network and that is when a member (or non-member) clicks ont he Youtube logo within a video which takes the visitor back to that video on Youtube. Here is a hack that will remove the Youtube logo from the embed. The following post contains two videos that are embedded straight from YouTube. They are essentially the same videos except that one of the embedded video players does not not carry any YouTube-specific branding. Take a look: This video player has a YouTube logo in the control bar (bottom right)..
.. while the player embedded below carries no such logo.
Removing the YouTube Logo from the Video PlayerIf you would like to remove the logo from the YouTube player before embedding it on to your website, you need to make a minor change to the default embed code as outlined below. For the IFRAME version: <iframe width="500" height="300" For the old OBJECT version: <object width="500" height="314"> <param name="movie"
Use the default embed code for a YouTube video and just add modestbranding=1 at the end of the video URL and the YouTube logo won’t show up in the Flash Player. The new “modestbranding” parameter for YouTube is supported for both Flash-based and IFRAME based embed codes (that are HTML5 compatible). Update: The previous version of this article used the “showinfo=0″ parameter with “modestbranding=1″ but for the video player to be completely logoless, the showinfo parameter needs to removed. Brian Glick from the YouTube team shares why:
Thanks to buddy Amit on Labnol for this awesome and useful tip! | 3) Add Your Own Logo to Youtube VideosYou can use any video editing software to add logos or watermarks to your videos before uploading them to YouTube but how do you put them in your existing videos that are already on the web? Well, YouTube has recently added a new feature called InVideo Programming that will help you add any custom image to all your Youtube videos with a few clicks without having to edit the original video. You can choose to display the logo at the start of the video, somewhere in the middle or even for the entire duration of the video. Also, the logo can be placed in either corners of the YouTube player. NOTE: YouTube internally uses annotations to display the images over the video and thus, if you a YouTube viewer has turned off annotations, your logo won’t be visible. 6) Embed a Youtube Playlist Into Ning Network Videos SectionI've seen quite a few questions on how to effectively embed an entire Youtube video playlist into the videos embed section of your Ning Network. Here is how to do it and proof of concept here. It requires a simple hack to the code. This is the code you need to embed a playlist: <iframe src="http://www.youtube.com/embed/videoseries?list=ID" width="520" height="500" frameborder="0"></iframe> Notice the ID above. Now let's suppose you want to embed a playlist found at this url on Youtube: http://www.youtube.com/watch?v=BapoW7wY0yc&feature=rellist&playnext=1&list=PL9117A16250D3CF7B Simply take the list id found after list= in this case PL9117A16250D3CF7B You may need to make adjustments to the width and height BEFORE you embed the code into the site. Percentages like 100% will NOT work so use pixel measurements. It's not perfect but it works and if anyone else has ideas on how to make it better, please feel free to sound off below. And as always, If you happen to be in search of freelance development or expertise, i can be hired. More Youtube and Video Hacks Tricks on My Creators ProfileThanks to Amit for great tips and tricks! Other Youtube Tips and Tricks: URL Tricks for Embedding Youtube Videos How To Embed a Youtube Playlist Into Ning Network Videos Section Videos TIP: Build Your Video Library with Video Alerts Hack To Embed Facebook Videos Into Your Ning Do More with Your Video Embed Option...and Smile. Hack for Using Videos to Drive Group Involvement How To Embed YouTube Videos without the YouTube Logo-Hack Now You Can Upload Photos to Youtube |
Tell Me Your Thoughts
Facebook Tricks and Hacks for Ning Community Managers
posted Aug 20, 2014, 4:21 PM by Jaybird Farrow [ updated Feb 26, 2015, 7:56 PM ]
Handy Facebook Tips and Tricks for Ning Managers
Facebook Trick #1Download Facebook Videos Quickly for Reuse on Youtube or NingThe trick mentioned above-although it still works- is steadily becoming more of a time-suck than anything, but that doesn't mean you can't use Facebook videos to illuminate your network. There's an app for that. Facebookvideoz will help you download the videos you need to make the magic happen! Facebook Trick #2How to Invite All Friends to a Facebook EventSetting up an event on Facebook is one thing, but using an event to drive targeted traffic is another. You may set up an event for the launch of your 3.0 network or simply an online community event or gathering. If you wanna invite all of your friends to it- thus bringing attention to your network- here is how you do it:
By making sure that you mention and point to your network in the event description, you can draw much needed attention to your site Facebook Trick #3Hide Your Last Name on a Facebook Profile
As always, if you need my help, just let me know. Enjoy! | Embed Facebook Videos Into Your Ning with this HackAs we all know, ning has made It quite simple to embed Youtube videos, but how (you might ask yourself) can you embed Facebook videos on your ning network. Facebook videos have links to share the Facebook video on your wall or to your friends wall, but does not provide an embed code. Well, today I'm going to show you how to hack a facebook video url and embed facebook videos into your ning network using either the video embed option or the inline video embed feature within a text box. Here is how to do it.
*additional hack to shortcut much of this at bottom of this post (for slow internet connections) 1. Find a Facebook Video which is relevant to your ning...go to its page.When you are viewing a Facebook video in your news feed / profile and reach the end, these are the options offered.
Click on the “Go to Video” link and you are directed to the Facebook video page. 2. Find and Edit Facebook Video UrlNow look at the long url address in the browser location bar. It will look something like this http://www.facebook.com/video/video.php?v=123456789012345 (not a real video) This is what the url of the Facebook video page looks like and cannot be embedded. We have to edit and shorten this url to get the actual Facebook video url to embed. So this is the shorter url we need (note the changes, number stays same) http://www.facebook.com/v/123456789012345 2. Make the Facebook Video Embed CodeIf you look at the old style embed code for any Youtube video, you find it looks like this
This is a standard embed code for shockwave flash video. I have highlighted the embedded youtube urls. Now replace those youtube urls with the Facebook urls.
Paste in html mode in your post, and your Facebook video is embedded! Enjoy! You can see a live example working on my land surveyors network here: It even retains the cook facebook overlay...remember to copy the title and description of the video from the facebook page to paste in the fields on your ning.
Enjoy!
now for the additional hack... some people just do not watch videos all the way through....so here's how you get the url without having to watch the video:...if you are looking at a facebook video inline (on your wall feed), simplyright click on the textlinked title of the video and copy URL. paste it into a text file, delete all the unnecesssary characters in that url as explained above...paste that URL into the embed code you're making and get the same result...
now for the obvious.... IMPORTANT NOTE: All Facebook videos are NOT in the public domain. Videos posted by Facebook users maybe copyrighted, personal, private, and may NOT be permitted for distribution or illegal to use without permission. So before you go ahead and embed any Facebook video, ALWAYS seek permission from the video owner / creator. |
Tell Me Your Thoughts
How to Add "Under Construction" Banner To Groups in Development
posted Aug 19, 2014, 3:15 PM by Jaybird Farrow [ updated Aug 20, 2014, 4:25 PM ]
Do You Have Ning Groups Under Construction?
This is a simple tip and trick for adding a classy, eye catching Under Construction Banner to any Groups you are working on that are not quite ready for prime-time. This tip uses no images or javascript...just simple HTML and CSS
Example: Makulu Journey Channel

First, The Tip!
Add the following CSS to your Custom CSS (or if you are bringing in an external style sheet for a group, add it there)
#construction {
position: absolute;
width: 100%;
text-align: center;
z-index: 1000;
font-size: 2.7em;
color: black;
font-weight: bold;
-webkit-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-moz-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-o-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-ms-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
background-image: repeating-linear-gradient(55deg, rgb(255, 255, 255), rgb(255, 255, 255) 50px, rgb(248, 174, 94) 50px, rgb(252, 144, 3) 110px);
-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
}
#construction p {
margin: 0;
/* color: #F2F2F2; */
border-top: 1px solid #eee;
}
Now the Trick...
Add the Following HTML inside the box where you place the description of the group, so it disappears after a site member has seen it. In other words, add =editPages after the Group URL and add it to the description box in HTML view.
<div id="construction">
<p> Under Construction</p>
</div>
Note: You can obviously change the wording to something other than Under Construction
- You can also add this HTML to a text box inside the group if you'd like for it to continue to display.
- Don't forget to remove it when your group is ready.
I was going to add this to my How Did You Do That Group on Creators, but those posts just don't seem to be indexed yet and have not made it into the stream. For Example: Tip: Magic Inline Facebook Style Dropdowns with CSS Only
Tell Me Your Thoughts