Ning Design Tips Log

I've always has a Thing for Ning

Dig 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 Help

On Demand Ning Assistance

If 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 Help

Need Ning Network Help? Try Something Entirely New! A Real Person and a Phone Call

Many 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

Twitter Trick- Hack: Real-Time Twitter Hashtag Boards for Any #Term 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 ...
Posted May 21, 2015, 8:29 PM by justin b farrow
Add Some POWr to Your Ning Community Introducing POWr Plugins!Are you ready to add some POWr to your Ning Network or any other site you administrate? Last week, I literally fell out of my chair when ...
Posted Mar 5, 2015, 2:14 PM by Jaybird Farrow
Experiments with Flipboard and Ning Networks Using Flipboard for Community BuildingThis Ning tip / trick / hack assumes the following:You use Flipboard as a way to give legs to your posts and content inside your network ...
Posted Feb 22, 2015, 2:00 PM by Jaybird Farrow
How to Add CSS Text Effects to Ning Headers and Titles Text Effects with Just CSS, No ImagesAround this time last year I posted a tip for how to add text effects to your imported Google Fonts and this seemed ...
Posted Sep 24, 2014, 1:38 PM by Jaybird Farrow
How to Add a Responsive Facebook Like Box To Ning Networks How to Embed Responsive Facebook Like BoxThere are times when you might not like to import the posts from a facebook page, but would rather just add a Facebook ...
Posted Sep 6, 2014, 4:52 PM by Jaybird Farrow

Showing posts 1 - 5 of 29. View more »

Subscribe to posts

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:

Try it on these others substituting out NING for other terms to see what I mean:

Surveyors

Geosocial

SEIAD (Survey Earth in a Day)

Get Fancy with Tabs in Ning 3

Enjoy 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!

Are you ready to add some POWr to your Ning Network or any other site you administrate? Last week, I literally fell out of my chair when I discovered what is quite possibly the coolest web service to date mega- plug-in, add-on for any community.. So, over the next week or so I will be whipping up more than a few demonstrations of the POWr plugins on Ning sites to show you the capabilities and possibilities. Let's get right to it

What is POWr

One 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.Imagine having the ability to bring your entire facebook, twitter, instagram or ANY other RSS feed into any page or any module on your Ning Network. Youtube Videos Without Having to Import Entire Channels. Yes

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

1) Before going any further, you will need to sign up for your own POWr account so that you can get your own access token. This token will be the key to making this work and will replace every instance of the "YOURID" mentioned below in the demos

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.

Add POWr to Your Ning Step One:

STEP ONE: Open Custom Code in the Social Site Manager, and paste this script into the Code section.

STEP TWO and THREE:

STEP TWO: You can click and drag to position and resize the Form Builder app on the page.

Click Save, then click Publish to save your changes and publish them on your live site.

STEP THREE: Open any Forum, Blog, or Article post, and switch to the HTML Editor.

STEP FOUR:

STEP FOUR: Paste the following code snippet in the editor, and Publish.

Demo One

DEMO 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"

Now add this code to a HTML Content Box

Demo Two

DEMO TWO: Import RSS Feed into Ning Group Page with Pinterest Style Layout - Live Example

Add the following code provided by POWr to your ""Below Footer HTML"

Now add this code to a HTML Content Box

Demo Three

DEMO THREE: Amazing Customizable Anything Banner Plugin - Live Example

Add the following code provided by POWr to your ""Custom Code <HEAD> section"

Now add this code to a HTML Content Box

Demo Four

DEMO FOUR: Media Gallery Plugin Brings In Anything - LIVE EXAMPLE

Add the following code provided by POWr to your ""Custom Code <HEAD> section"

Now add this code to a HTML Content Box

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 One

Step One: Add something to a magazine on your flipboard like so:

After clicking the title of the magazine you added it to, you will be taken to the page for that magazine. Make note of the URL.

This Example: https://flipboard.com/section/beautiful-nation-project-bddZSO

Step Two

Find a page you'd like to add the magazine to on your site or add a new page to hold the magazine

Step Three

Add 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

Step Four

Add 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.

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 Together

First 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.

HTML

Corresponding CSS

<h2 class="text text_anaglyphic">anaglyphic</h2>
<h2 class="text text_embedded">embedded</h2>
<h2 class="text text_embossed">embossed</h2>
<h2 class="text text_neon">neon</h2>
<h2 class="text text_fire">fire</h2>
<h2 class="text text_retro">retro</h2>

<h2 class="text text_blurred">
<svg width="100%">
<text class="text_blurred_svg" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="80" text-anchor="left">Blurred</text>
<filter id="textFilter">
<feGaussianBlur stdDeviation="5" />
</filter>
</svg>
</h2>

<h2 class="text text_gradient">
<svg width="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#5e5e5e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#a3a3a3;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="100" text-anchor="left">Gradient</text>
</svg>
</h2>

<h2 class="text text_golden">
<svg width="100%">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f9d400;stop-opacity:1" />
<stop offset="48%" style="stop-color:#f89c00;stop-opacity:1" />
<stop offset="53%" style="stop-color:#f89c00;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f9d400;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad2)" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="100" text-anchor="left">Golden</text>
</svg>
</h2>

<div class="container">
<h2 class="text text_stitched">stitched</h2>

</div>
<h2 class="text text_3d">3-d effect</h2>

.text {
font-size: 60px;
margin: 40px 300px 0;
text-transform: uppercase;
}

.text_anaglyphic {
color: #f9689a;
text-shadow: -4px -4px 0 #77caff;
}

.text_embedded {
color: #111111;
text-shadow: -1px 1px 1px #3e3e3e;
}

.text_embossed {
color: #603624;
text-shadow: -1px -1px 0 #5d5d5d;
}

.text_neon {
color: #f5f5f5;
text-shadow: 0 0 3px #f5f5f5,
0 0 15px #7deaec,
0 0 30px #7deaec;
}

.text_fire {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

.text_retro {
color: #7d4217;
text-shadow: 3px 2px 0 #333333,
6px 4px 0 #999999;
}

.text_blurred {
height: 80px;
margin: 40px auto;
text-align: center;
}

.text_blurred_svg {
fill: #a7a7a7;
filter:url(#textFilter);
}

.text_gradient {
height: 80px;
margin: 40px auto;
text-align: center;
}

.text_golden {
height: 100px;
margin: 40px auto;
text-align: center;
}

.container {
display: inline-block;
padding: 13px;
margin: 0 0 0 300px;
background: #555555;
-webkit-box-shadow: 1px 1px #111111;
-moz-box-shadow: 1px 1px 3px #111111;
box-shadow: 1px 1px 3px #111111;
text-align: center;
}

.text_stitched {
display: inline-block;
padding: 25px 37px;
border: 3px dashed #777777;
margin: 0;
text-align: center;
color: #dddddd;
background: #555555;
}

.text_3d {
color: #b50e00;
text-shadow: 1px 0 0 #510300,
2px 0 0 #510300,
3px 0 0 #510300,
4px 1px 0 #510300,
5px 2px 0 #510300,
6px 3px 0 #510300,
8px 4px 0 #510300,
9px 5px 0 #510300,
10px 6px 0 #510300;
}

Now for a Practical Example

Now For Applying These Effects to Headers and Titles Within your Ning Network

If 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 {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

and add the selector for Page Title h2.module-name

you'll have this (note the comma between selectors):

h2.module-name, .text_fire {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

Add this to your advanced CSS in Design Studio and all of your page titles will be set on fire!

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

There are times when you might not like to import the posts from a facebook page, but would rather just add a Facebook Like Box to your Ning community. However...

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

Code to place inside an HTML textbox in Site Manager:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-wrap">
<h1>Responsive Facebook Like Box</h1>
<div class="fb-like-box" data-href="http://www.facebook.com/landsurveyorsunited" data-width="992" data-show-faces="true" data-show-border="false" data-colorscheme="light" data-stream="false" data-header="false"></div>
</div>

*replace the red with your own page url

Code to place inside your Advanced CSS:

.fb-wrap {
  width:50%;
  margin: 0 auto;
}

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

Other Cool Tricks for Importing Social Profiles to Ning

You 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
Find Out How Here

Import Google+ Photos and Photo Albums Into a Ning Page:
Find Out How Here

Add Pinterest Boards To a Ning Page: Tip Here

Comments and questions below, or contact me for any custom work you may need.

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

We once were able to use FBRSS.COM to grab the feeds of Facebook Pages we follow. What FBRSS did was simply parse the RSS feeds on Facebook and then they generated new RSS feed URLs on their own server, but that no longer works. There were some cool things you could do with the feeds on Ning networks, but FBRSS is seemingly no more. But here is a nifty workaround for finding the Facebook Page 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.

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

Here's something that I discovered a while back which may make your life easier when trying to add music to your ning network, but cannot get around the upload limits. This solution will allow you to upload full length podcasts, radio shows and LARGE audio files.

The Process: Steps 1 and 2

Step 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:

https://doc-14-50-docs.googleusercontent.com/docs/securesc/o4i44a00ltj285itshdsm99qc5ns1pa0/qstnm8o2iv2t1f9aat4fg2n7ks6ggghl/1360022400000/04703270868129371595/04703270868129371595/0B6bBKXhAxENpTkhuaUphcmtYWms?e=download

Step 3

Now 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!

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

In the past, I have shown you some interesting tricks for embedding youtube videos into your site. For example, How to Embed without Youtube Logo and how to embed playlists (more at bottom of the post). Today I am going to show you 4 new tricks for becoming a Youtube Master on your Ning network.

1) A Better Way to Embed Youtube Videos

Note: 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 Time

The 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.

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.

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-Demand

Google 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 Pages

You 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:

Bing uses the standard HTML5 <video> tags to serve videos on the homepage. The embedded video has a fixed size and it doesn’t resize itself with the browser.
There are ready-to-use jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, as page backgrounds.
The other more simple approach, as you can see in this demo, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background.

YouTube Video Backgrounds

To 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.

// 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 Channel

Do 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.

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-Hack

Embedding 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 Player

If 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:

For the old OBJECT version:

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:

The reason why the video “YouTube” logo overlay appears is because the modestbranding option normally, by itself, still shows some branding – in the form of a small “YouTube” text overlay in the upper-right corner of the video, when you hover over it while the video’s paused. But since you explicitly asked for showinfo=0, we have no place to show the “YouTube” text overlay. So the alternative is to communicate that it’s a YouTube video player via the video overlay.

Thanks to buddy Amit on Labnol for this awesome and useful tip!

3) Add Your Own Logo to Youtube Videos

You 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 Section

I'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.

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

For my fellow creators who use facebook to drive traffic to their networks, there are plenty of tactics that work and many that simply do not. A good while back I showed you a hack to embed facebook videos into your site, but the three tricks I am about to show you happen ON facebook and if used correctly, could result in some great boosts in traffic to your network. Overall, you may not use these tricks everyday, but it is always good to know what is possible.

Facebook Trick #1

Download Facebook Videos Quickly for Reuse on Youtube or Ning

The 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 #2

How to Invite All Friends to a Facebook Event

Setting 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:

Go to your Event Facebook page and click on Invite friends.
Scroll down your friend list until the end to ensure you have loaded all the friends you want to invite.
On Chrome, press CTRL + SHIFT + J (Windows) or CMD + Opt + J (Mac).
Copy and paste this javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()} followed by an Enter in the console space. You will then see all your friends name automatically ticked.

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 #3

Hide Your Last Name on a Facebook Profile

You may not want to showcase your birth name or surname as leader of your community for various reasons. Facebook needs you to declare your first and last name, that’s two names, but if you want to have your account bear only one name (or just your first name), you can. Indonesians can register an account with only one name since many of them actually go with just one name. So for you to have a single name like single named Neo here, check out the instructions below.

Login to your Facebook account.
Grab any Indonesian proxy from this list here then change your proxy on your browser.
On Chrome for PC head to Settings > Show advanced settings > under Network, click on Change proxy settings > click on Lan Settings and tick "Use Proxy Server for your LAN".
Fill in the address box with the proxy, and the port box accordingly. For example, if your proxy is 180.250.160.58:8080, "180.250.160.58" goes into the address box and "8080" is the port.
Tick on Bypass Proxy Server For Local Addresses. Press OK.
Now, go to your Facebook Account settings page, change the language to "Bahasa Indonesia" and save changes.
Remove your Facebook last name and save changes again.
Once you have complete everything, revert to your original language.

As always, if you need my help, just let me know. Enjoy!

Embed Facebook Videos Into Your Ning with this Hack

As 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 Url

Now 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 Code

If you look at the old style embed code for any Youtube video, you find it looks like this

<object width="500" height="314"> <param name="movie" value="http://www.youtube.com/v/kdjuyfQijs0?fs=1&hl=en_US"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/kdjuyfQijs0?fs=1&hl=en_US" type="application/x-shockwave-flash" width="500" height="314" allowscriptaccess="always" allowfullscreen="true"></embed> </object>

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.

<object width="500" height="314"> <param name="movie" value="http://www.facebook.com/v/123456789012345"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.facebook.com/v/123456789012345" type="application/x-shockwave-flash" width="500" height="314" allowscriptaccess="always" allowfullscreen="true"></embed> </object>

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.

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

The gadget spec URL could not be found

1-10 of 29