Featured Discussions - FORUM - Ning Creators Social Network2024-03-29T04:51:47Zhttps://creators.ning.com/forum/topics/feed/featuredOff Topic Rant - Self Hosted - The Good, the Bad And The Infuriatinghttps://creators.ning.com/forum/topics/off-topic-rant-self-hosted-the-good-the-bad-and-the-infuriating2018-08-29T20:22:04.000Z2018-08-29T20:22:04.000ZAmber Nelsonhttps://creators.ning.com/members/AmberNelson<div><p>Ning, you are lucky you are in existence. In short, self hosted for those of you whose curious about going down this road, isn't all it's cracked up to be.</p><p>Rather than complain about what doesn't work, and give prays to what does. I'm going to just put it out there. Here are facts related to self hosted solutions that make Ning more attractable as a company every day.</p><p>1. Email delivery. Forget newsletters. If you run your own email such as admin@mycompany.com for example, or info@myproduct.net, the first newsletter you send out will never work. And you'll lose sending abilities through your organization's email address. I found that out the hard way. You need to buy dedicated email hosting, just so that you can use the head ache that is SMTP services to do anything with the customer base that's already subscribed to your network. Especially, when you're moving from one server to another. Or if you've decided to archive your content, and take your actual network to another company altogether.</p><p>2. Database issues. Say, 3 months in to your company. Everything's going well, until you need support for an upgrade that broke your site. If you have to buy a dedicated server, or VPS, chances are it's unmanaged. You have to first of all, ensure your server is running the minimum requirements for your platform. then troubleshoot the platform issue itself. Which can often happen unexpectedly at times when you expect it not to. Especially when installing an incompatible non up to date add on for your site. Something said company doesn't tell you about.</p><p>3. Pricing. You think Ning is expensive? It's more expensive than it used to be, yes. but the average cost for a Ning site is about the same as a high end VPS. that's virtual private server. Which is, ironically, exactly what you get, as a managed solution or script. Accept, it is on a shared IP, making it a hybrid of sorts between shared hosting or really expensive web hosting, and virtual private networking functionality.</p><p>4. Support. Forget it, if you have no technical admin on your side. you're on your own. Ning has excellent support agents. Sometimes it takes awhile, but if you persistently handhold anyone willing to help you through an issue, together, you walk yourselves out of any problems you face. Working together as a team is key with any support agent. Some companies, such as Name Cheap, offer support only to do with some server basics. Taking it online and offline, as well as payment plans. But that's where it ends. Unless you pay for a managed solution.</p><p>5. Liability. Now days, this is more on par with other hosting solutions. But you're liable if something happens to your site with self hosted. not so much, if you have a managed hosting like Ning. If something breaks, you don't necessarily have to fix it if you tell someone who manages your site for you, what happened.</p><p>Ning is more of a guardian, or protector if you will, than they are a hinderence. Think about how many times you've wanted to do something but couldn't on Ning? then think about the alternative. If I'm liable for it, why then must I be on my own for everything? Here's some top 5 reasons to choose shared hosting to coexist with Ning.</p><p>1. Company email only. You want a brandable email, you got it. The difference is, you pay to have it. Subsequently, with a brandable email, you also have a brandable domain. This is something you can use for any type of redirection to your site you want, if you know how to configure DNS records in the zone editor of your domain control panel. Similarly, Cpanel provides the best interface to do just that.</p><p>2. Cpanel itself. With the ability to host an unlimited amount of add on domains, technically, your server could be used to add more domains to your Ning site than the 3 permitted through Ning's domain mapping tool. This lets you branch out as a company, and support your own infrastructure. Something you could host many networks on through Ning, especially given their new light.ning.com plans and pricing structure at potentially no extra cost to you. while keeping your company organization intact and on budget.</p><p>3. Brandable support. Having john@mycompany.com and lisa@yourcompany.net as an email address to reach out to your own, in house support team, offers security benefits. The key difference being, you separate your regular web hosting, from your brand email. This way, they are on separate servers so the day to day business requirements for communicating directly with customers, is never interrupted.</p><p>4. Sellable networks. Users, if you plan to sell your site, won't need to remember a new domain. this keeps your existing business in tact. this could become a bottle neck if you forget to pay your site. but in time, the new company taking over your domain, will have their own results in search engines should the branding change. this is why it is very important to brand your site, for maximum customer engagement opportunities internet wide.</p><p>5. custom spam filters. On some servers, you have the ability to obtain WHM access. this means, you're able to regulate what spam filters are enabled for your account and what ones are not. This means you have no need to sift through spam sent to your publicly available brandable email address, as a custom score threshhold for automatically dealing with problematic emails, is something you can fine tune. This cannot be done on email addresses hosted by Google, Outlook or Yahoo.</p><p>All in all, ning is perfect if you are willing to agree to their terms of service, and provide feedback where necessary to keep both Ning team members, and other network creators and our sites running smoothly for years to come. Ning is truly, one of a kind. And it is home to the internets best social networks.</p></div>Changes on facebook, and new instructions how the app should be set uphttps://creators.ning.com/forum/topics/changes-on-facebook-and-new-instructions-how-the-app-should-be-se2018-06-05T12:20:25.000Z2018-06-05T12:20:25.000ZKyryl_Ning_Supporthttps://creators.ning.com/members/GlushchenkoKyryl<div><p>Hi there!</p>
<p>I guess you all aware about the last news regarding the facebook and data leak. Because of that, they are making the usage of the API more strict, that is why please check the updated instructions how the Facebook login APP should be created:</p>
<ol>
<li>Please follow this link to <a href="https://developers.facebook.com/apps" target="_blank" rel="noopener">Facebook</a></li>
<li>Please press "+Add New app" at the top right corner of the screen</li>
<li>On the next screen, you should choose the name of the app, for example, you can use your network's name or something else, it doesn't matter just depends on what name would be more convenient for you in order to manage another app you have, and don't forget to enter contact email address, and press "Create App id"</li>
<li>After you have filled the captcha on the left side of the screen you will see the menu. Please press "Settings" button.</li>
<li>On the next screen you will see the settings of your app, however, you should take a look at the left side of the screen once again and press "Advanced". It would be located just under the "Settings" button that you have found in the previous step</li>
<li>When the advanced settings would be opened please scroll down the page a little and find "Allow API Access to App Settings" and turn it on (there is the trigger just to the left from that text please click on it once to turn on). Please don't forget to save changes as well.</li>
<li>Then please take a look at the menu on the left side of the screen and press "+Add product"</li>
<li>On the next screen, please choose Facebook Login, and then press "www"</li>
<li>In the field which is called "Site URL" please enter the following link (<a class="external-link" href="https://yoursubdomain.networkauth.com/" rel="nofollow">https://YourSubDomain.networkauth.com</a>). And click "Save".</li>
<li>Then please take a look at the menu on the left side of the page, end just under "Facebook Login" you will see the button "Settings". Please press it.</li>
<li>On the screen that would be opened, please enter the same link mentioned in step 9 into the field called "Valid OAuth redirect URIs". Also using the link mentioned in step 9 as the base please add to it /connect_start (the result will look like this <a href="https://YourSubDomain.networkauth.com/facebook/connect_start">https://YourSubDomain.networkauth.com/facebook/connect_start</a> or something similar), and add to the "Valid OAuth redirect URIs" as well. Then add to the base /facebook/callback (the result will look like this <a href="https://YourSubDomain.networkauth.com/facebook/callback">https://YourSubDomain.networkauth.com/facebook/callback</a>) and add to the "Valid OAuth redirect URIs".</li>
<li>Please press "Settings" button, in the left menu and click "Basic" from the drop-down which will appear under "Settings" button you have just pressed.</li>
<li>Please paste into the field "App Domains" the URL provided in step 9, and insert the link to your terms and conditions and the privacy policy into the appropriate fields. Those links could be obtained on teh network just follow the link in the footer of the page or change the following link <a href="https://YourSubDomain.ning.com/main/authorization/termsOfService">https://YourSubDomain.ning.com/main/authorization/termsOfService</a> so it would correspond to the subdomain you have registered with us. Since teh privacy policy is optional and if you haven't created one you can paste the link to the terms and conditions into the "Privacy Policy URL" field.</li>
<li>Your app is almost ready, please choose "App review" from the menu on the left side of the screen and make your app public by switching on the trigger "Make name of the app public?" where "name of the app" is the name that you have chosen for your app.</li>
<li>The list of items would appear and just under it, you will see the conditions that your app should fulfill in order to be submitted for the review. Click "settings" link there and upload the icon of your app, and just under the icon choose the "Business Use"</li>
<li>Now your app is ready, please go to the Settings -> Basic on Facebook and you will see app id and secret you need.</li>
<li>Please enter App id and app secret, and save the changes.</li>
<li>The only thing left is to wait until Facebook will approve your app, and after the users will be able to use it. (this paragraph is not relevant anymore, it's related to the apps created before teh changes we have made recently on 2018-07-12)</li>
</ol>
<p>Hope these instructions would, help.</p>
<p>Best wishes,</p>
<p>Ning team.</p>
</div>Tip: How to Add an Easy to Manage News Tickerhttps://creators.ning.com/forum/topics/tip-how-to-add-an-easy-to-manage-news-ticker2018-05-19T23:23:16.000Z2018-05-19T23:23:16.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Several community managers have <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">contacted me</a> and asked for a simple news ticker to add to their community. So....This is a tip for anyone who would like to add a simple and easy to manage news ticker to their Ning Community. It is easy to manage because all you have to do to change out the messages are alter 4 lines of code in the HTML What we are building looks like this but is 100% customizable:</p><p><iframe src="//codepen.io/JFarrow/embed/qNpJAB/?height=300&theme-id=3719&default-tab=result&embed-version=2" height="300" frameborder="no">See the Pen <a rel="nofollow" href="https://codepen.io/JFarrow/pen/qNpJAB/">jQuery News Ticker</a> by JFarrow (<a rel="nofollow" href="https://codepen.io/JFarrow">@JFarrow</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.</iframe></p><p><span style="text-decoration: underline; font-size: 14pt;">Add the following HTML inside a HTML module on your site's backend (change the wording on each <li> line with your own):</span></p><p><div class="news-ticker" data-speed="5000"><br/><ul><br/><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1</li><br/><li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 2</li><br/><li>Contact jbirds.co for help with your Ning Community</li><br/><li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 4</li><br/></ul></p><p><span class="close-ticker"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50" id="svg2"> <defs id="defs4"/> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(0,-1002.3622)" id="layer1"> <rect width="5" height="35" ry="0.025385702" x="741.69556" y="691.34021" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" id="rect2987" style="fill:#ffffff;fill-opacity:1;stroke:none"/> <rect width="5" height="35" ry="0.025385702" x="706.34021" y="726.69556" transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" id="rect2987-1" style="fill:#ffffff;fill-opacity:1;stroke:none"/> </g></svg></span></p><p></div></p><p> </p><p> </p><p><span style="font-size: 14pt;"><strong><span style="text-decoration: underline;">Add the following CSS to your Design Studio (change background color #111 to anything you like):</span></strong></span></p><p>.news-ticker,<br/>.news-ticker li {<br/>width: 100%;<br/>position: absolute;<br/>padding: 0;<br/>margin: 0;<br/>-webkit-box-sizing: border-box;<br/>-moz-box-sizing: border-box;<br/>box-sizing: border-box;<br/>}</p><p>.news-ticker ul {<br/>list-style: none;<br/>padding: 0;<br/>margin: 0;<br/>}</p><p>.news-ticker {<br/>height: 50px;<br/>top: 0;<br/>left: 0;<br/>background-color: #111;<br/>color: #fff;<br/>font-family: 'Open Sans', sans-serif;<br/>}</p><p>.news-ticker li {<br/>text-align: center;<br/>top: 50%;<br/>-webkit-transform: translateY(-50%);<br/>-moz-transform: translateY(-50%);<br/>-o-transform: translateY(-50%);<br/>transform: translateY(-50%);<br/>}</p><p>.close-ticker {<br/>width: 50px;<br/>height: 50px;<br/>position: absolute;<br/>right: 0;<br/>top: 0;<br/>cursor: pointer;<br/>}</p><p> </p><p> </p><p><span style="text-decoration: underline; font-size: 14pt;"><strong>Add the following jquery code to your Custom Code (bottom):</strong></span></p><p><script>jQuery(document).ready(function(x$){</p><p>var tickerSpeed = x$('.news-ticker').attr('data-speed');</p><p>x$('.news-ticker ul li').hide();<br/>x$('.news-ticker ul li:first').show();</p><p>var currentSlide = 0;<br/> var slideCount = (x$('.news-ticker li').length) - 1;</p><p>var startTicker = setInterval(function(){</p><p>x$('.news-ticker ul li').eq(currentSlide).fadeOut(500)</p><p>if (currentSlide < slideCount) {<br/> currentSlide += 1;<br/> } else {<br/> currentSlide = 0;<br/> }</p><p>x$('.news-ticker ul li').eq(currentSlide).fadeIn(500)</p><p>}, tickerSpeed);</p><p>x$('.close-ticker').on('click', function(){<br/> clearInterval(startTicker);<br/>x$('.news-ticker').fadeOut(500, function(){<br/>x$(this).remove();<br/> });<br/> });</p><p>});</p><p></script></p><p> </p><p>Enjoy! <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">Let me know</a> if you need help with any aspect of your Ning Community...</p><p> </p></div>TIP: How to Quickly Change Network Background and Track Pageloadshttps://creators.ning.com/forum/topics/tip-how-to-quickly-change-network-background-and-track-pageloads2015-01-27T01:16:34.000Z2015-01-27T01:16:34.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Ok guys... in the past week I have had 4 separate community managers ask me the best way to switch out a background image in both Ning 2.0 and 3.0 networks. Here is the way that I do it.</p>
<p>This method will also double as a pageview tracker using <a rel="nofollow" href="https://goo.gl/" target="_blank">goo.gl URL shortener</a>.</p>
<p><strong>The CSS</strong> you'll need for the perfect full width background image is as follows:</p>
<p>body {<br> background: url(<span style="color: #ff0000;"><a href="http://goo.gl/OQQeTw">http://goo.gl/OQQeTw</a></span>) no-repeat top center fixed;<br> -webkit-background-size: cover;<br> -moz-background-size: cover;<br> -o-background-size: cover;<br> background-size: cover;<br> }</p>
<p><em>*don't forget to change the image link in red with your own</em></p>
<p></p>
<p><strong>The process</strong> is simply to 1) upload an image through a blog post 2) <a rel="nofollow" href="https://goo.gl/" target="_blank">shorten the link</a> for that image url and 3) snap it into place.</p>
<p>Here is a little animation for exactly how to do this:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558106?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558106?profile=original" width="100%" class="align-full"></a></p>
<p></p>
<p>Let me know if you have any further questions or need <a rel="nofollow" href="http://www.jbfarrow.com/projects/ning-help" target="_blank">help with your Ning development</a>. Enjoy!</p></div>Tip 3.0: Simple Social Bar (HTML+CSS)https://creators.ning.com/forum/topics/tip-3-0-simple-social-bar-html-css2017-12-14T21:51:25.000Z2017-12-14T21:51:25.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><strong>So you want a simple bar which takes your members to your social profiles. Here it is..</strong></p><p><strong>What we are creating:</strong></p><p><a rel="nofollow" href="https://www.awesomescreenshot.com/upload//307673/a5b5e8c0-241c-49f8-4de0-f4d9cad1c3d0.png" target="_blank"><img src="https://www.awesomescreenshot.com/upload//307673/a5b5e8c0-241c-49f8-4de0-f4d9cad1c3d0.png" class="align-full"/></a></p><p></p><p><strong>HTML (can go in your ABOVE FOOTER HTML box on any page- change to your links)</strong></p><p><ul class="spicesocialwidget"><br/> <li class="facebook"><br/> <a rel="nofollow" href="https://www.facebook.com/" target="_blank" title="facebook"><br/> <div class="tooltip"><span>Facebook</span></div><br/> </a><br/> </li><br/> <li class="googleplus"><br/> <a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a><br/> </li><br/> <li class="pinterest"><br/> <a rel="nofollow" href="https://pinterest.com/" target="_blank" title="pinterest"></a><br/> </li><br/> <li class="twitter"><br/> <a rel="nofollow" href="https://twitter.com/" target="_blank" title="twitter"></a><br/> </li><br/> <li class="rss"><br/> <a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a><br/> </li><br/> <li class="skype"><br/> <a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a><br/> </li><br/> <li class="vimeo"><br/> <a rel="nofollow" href="https://www.vimeo.com/" target="_blank" title="vimeo"></a><br/> </li><br/> <li class="dribbble"><br/> <a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a><br/> </li><br/> <li class="flickr"><br/> <a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a><br/> </li><br/> <li class="linkedin"><br/> <a rel="nofollow" href="https://www.linkedin.com/" target="_blank" title="linkedin"><br/> </a><br/> </li><br/> <li class="youtube"><br/> <a rel="nofollow" href="https://www.youtube.com/" target="_blank" title="youtube"></a><br/> </li><br/> </ul></p><p></p><p></p><p></p><p><strong>CSS (Goes in your Design Studio Advanced CSS)</strong></p><p>ul.spicesocialwidget {<br/> /*float:right;*/<br/> margin: 140px 0;<br/> padding: 0;<br/> width: auto;<br/> height: 32px;<br/> border: 1px solid rgba(0,0,0,0.1);<br/> text-align: center;<br/> font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;<br/> }<br/> ul.spicesocialwidget li {<br/> /*float:left;*/<br/> list-style:none outside none;<br/> border:none;<br/> display: inline-block;<br/> }<br/> ul.spicesocialwidget li a {<br/> background-color:transparent;<br/> background-image:url('<span><a rel="nofollow" href="https://goo.gl/FxfviT">https://goo.gl/FxfviT</a></span>');<br/> background-repeat:no-repeat;<br/> background-size:auto 96px;<br/> border:0 none;<br/> display:block;<br/> height:32px;<br/> /*overflow:hidden;*/<br/> text-align:left;<br/> text-decoration:none;<br/> /*transition:all 0.2s ease 0s;*/<br/> width:32px;<br/> position: relative;<br/> display: flex;<br/> }</p><p><br/> .tooltip {<br/> visibility: hidden;<br/> opacity: 0;<br/> position: absolute;<br/> top: -25px;<br/> left: 50%;<br/> z-index: 1;<br/> -webkit-transition: all 0.3s ease;<br/> -moz-transition: all 0.3s ease;<br/> transition: all 0.3s ease;<br/> -webkit-backface-visibility: hidden;<br/> -moz-backface-visibility: hidden;<br/> -ms-backface-visibility: hidden;<br/> backface-visibility: hidden;<br/> <br/> }<br/> .tooltip span {<br/> position: relative;<br/> left: -50%;<br/> padding: 6px 8px 5px 8px;<br/> border-radius: 3px;<br/> font-size: .7rem;<br/> z-index: 1;<br/> line-height: 1;<br/> }<br/> .tooltip span:after {<br/> position: absolute;<br/> content: " ";<br/> width: 0;<br/> height: 0;<br/> top: 100%;<br/> left: 50%;<br/> margin-left: -8px;<br/> border: 8px solid transparent;<br/> }<br/> .spicesocialwidget a:hover .tooltip {<br/> display: block;<br/> visibility: visible;<br/> opacity: 1;<br/> -webkit-transform: translate(0, -10px);<br/> -moz-transform: translate(0, -10px);<br/> -ms-transform: translate(0, -10px);<br/> transform: translate(0, -10px);<br/> }</p><p>.ie7 ul.spicesocialwidget li a,<br/> .ie8 ul.spicesocialwidget li a {<br/> background-image:url('<span><a rel="nofollow" href="https://goo.gl/FxfviT">https://goo.gl/FxfviT</a></span>');<br/> }<br/> ul.spicesocialwidget li.facebook a { background-position:0 0; }<br/> ul.spicesocialwidget li.flickr a { background-position:-32px 0; }<br/> ul.spicesocialwidget li.dribbble a { background-position:-64px 0; }<br/> ul.spicesocialwidget li.googleplus a { background-position:-96px 0; }<br/> ul.spicesocialwidget li.linkedin a { background-position:-128px 0; }<br/> ul.spicesocialwidget li.pinterest a { background-position:-160px 0; }<br/> ul.spicesocialwidget li.rss a { background-position:-192px 0; }<br/> ul.spicesocialwidget li.skype a { background-position:-224px 0; }<br/> ul.spicesocialwidget li.twitter a { background-position:-256px 0; }<br/> ul.spicesocialwidget li.vimeo a { background-position:-288px 0; }<br/> ul.spicesocialwidget li.youtube a { background-position:-320px 0; }</p><p>ul.spicesocialwidget li.facebook a:hover { background-position:0 -32px}<br/> ul.spicesocialwidget li.flickr a:hover { background-position:-32px -32px}<br/> ul.spicesocialwidget li.dribbble a:hover { background-position:-64px -32px}<br/> ul.spicesocialwidget li.googleplus a:hover { background-position:-96px -32px}<br/> ul.spicesocialwidget li.linkedin a:hover { background-position:-128px -32px}<br/> ul.spicesocialwidget li.pinterest a:hover { background-position:-160px -32px}<br/> ul.spicesocialwidget li.rss a:hover { background-position:-192px -32px}<br/> ul.spicesocialwidget li.skype a:hover { background-position:-224px -32px}<br/> ul.spicesocialwidget li.twitter a:hover { background-position:-256px -32px}<br/> ul.spicesocialwidget li.vimeo a:hover { background-position:-288px -32px}<br/> ul.spicesocialwidget li.youtube a:hover { background-position:-320px -32px}</p><p>.spicesocialwidget .facebook span { background: #3b5a9b; color: #dce5ed; text-shadow: 0px 1px 0px #2f487c; }<br/> .spicesocialwidget .facebook span:after { border-top-color: #3b5a9b; }</p><p></p><p><span class="font-size-5">Happy Holidays! <a href="https://creators.ning.com/members/JFarrow" target="_blank">Let me know</a> if you need help with your Ning Community design or custom ideas! ..</span></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>Auto Post Newly Uploaded Photos to Social Siteshttps://creators.ning.com/forum/topics/auto-post-newly-uploaded-photos-to-social-sites2017-10-25T00:21:44.000Z2017-10-25T00:21:44.000ZScott Bishophttps://creators.ning.com/members/ScottBishop<div><p>Is there anyway to have new photos that are uploaded to our sites from our members to automatically post to our social sites like Facebook or Google+? </p>
<p>Wordpress has a plugin that does it called Jetpack. Any ideas for Ning? </p>
</div>3rd party integrationhttps://creators.ning.com/forum/topics/3rd-party-integration-12017-07-10T15:59:07.000Z2017-07-10T15:59:07.000ZKyryl_Ning_Supporthttps://creators.ning.com/members/GlushchenkoKyryl<div><p>Hi there!</p>
<p>At the moment we are considering adding new services to 3-rd party integration. But as you are the one who would be using them instead of just adding the most popular ones we would like to kindly ask you to share your thought regarding which services should be added and which of them would be most useful for you in the first place.</p>
<p>Thanks in advance.</p>
<p>Best regards,</p>
<p>Ning Team.</p>
</div>Facebook share button, Ning 3.0https://creators.ning.com/forum/topics/facebook-share-button-ning-3-02017-07-20T23:37:14.000Z2017-07-20T23:37:14.000ZKyryl_Ning_Supporthttps://creators.ning.com/members/GlushchenkoKyryl<div><p>Hi there!</p>
<p>As the share from Facebook comments doesn't work, I have been thinking is there any way around, so you could share discussions/blogs etc to your Facebook timeline. And basically I'm not guru (actually I think I'm not even on beginner level) of javascript, CSS and so on, however here you will see one solution that I have been able to create myself, as our developers are really busy right now (and also I told myself "why not").</p>
<p>Probably this solution isn't the best, as unfortunately, I'm not aware of all functions available in javascript and jQuerry. But anyway I haven't seen such post on creators so something is better than nothing, and probably more experienced creators would be able to adjust the code so it would work better.</p>
<p>So let's start. As I have mentioned before I have used the mix of javascript and JQuerry so it's necessary to add the library for the last one.</p>
<p>Copy and paste this code on the custom code page into <head> section:</p>
<p><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></p>
<p>Next step as easy as the previous one. Copy the code below and past it on the code page into End of Page Code section:</p>
<p><!–– Facebook share ––></p>
<p><script><br> x$(".socialActions.cf").attr("id","socialActionscf");<br> </script></p>
<p><script ><br> x$(document).on("click", "#fbsharebutton", function(){FB.ui({method: 'feed', link: window.location.href, caption: 'Share to facebook',}, function(response){});});<br> </script></p>
<p><script type="text/javascript"><br> var $ = function (id){<br> return document.getElementById(id);<br> }<br> var shareButton = document.createElement("BUTTON");<br> var socialActions = $("socialActionscf");<br> var text = document.createTextNode("F share");<br> shareButton.appendChild(text);<br> socialActions.insertBefore(shareButton, socialActions.childNodes[0]);<br> shareButton.setAttribute("id", "fbsharebutton");<br> shareButton.className = "fbsharebutton";<br> </script></p>
<p><strong>Note:</strong> if you wish to change the text that would be displayed on the button, just change "F share" to something you else you want to be there. Unfortunately, I haven't had enough of time to find out how to assign the background image to this button, so probably somebody would be able to suggest some solutions in comments, if not I would try to do this later and update the post.</p>
<p>Next step is styling of your button as right now it looks really strange. Here is the code I used for this purpose, it should be pasted in design studio into the custom CSS field:</p>
<p>/* Facebook share button */</p>
<p>.fbsharebutton {height: 20px; background-color:#3b5998;border-width:0px; border-radius:3px; color: #ffffff;letter-spacing:-1px;padding:0px;line-height: 0.6;float:left; margin-right: 10px;}</p>
<p>button.fbsharebutton:hover { background-color:#5b72a5;}</p>
<p><strong>Note:</strong> if you need to change the initial color of the button, just replace #3b5998 with the other color code. If you are not familiar with color codes you can use for example the next color picker <a href="http://htmlcolorcodes.com/color-picker/">http://htmlcolorcodes.com/color-picker/</a>. There the code you need would be displayed on top and called "HEX", also keep in mind that it starts always from the sign "#". Also, you can change the other properties just to see what will happen if you are not satisfied with the form of the button and etc (if there will be any need to style this button a bit just let me know and will try to help). The second string of code determines the color of the button when you have put your cursor over it, it could be changed the same way I have described before, just replace #5b72a5 with the color code you wish to have.</p>
<p>Congratulations it's almost done.</p>
<p>The last step is the integration of the facebook API. You can find detailed instructions here <a href="https://creators.ning.com/forum/topics/facebook-integration-instructions" target="_blank">https://creators.ning.com/forum/topics/facebook-integration-instructions</a>. The one that should be integrated to make everything from above work is located under 3rd party integration tab (not sure whether sign in/sign up integration would serve for this purpose as well as I haven't had enough of time to test it).</p>
<p>Right now, the button should be in its place and it should work.</p>
<p>You can check what the result would be just here on creators, as I have implemented it. Such button would be displayed for any type of the content because it will appear in the share bar (under share bar I have meant the line where all sharing options are presented). There is only one thing I'm not sure about, there is the chance that all this code won't work if there is no other sharing option enabled, I hope you don't mind if I would test it tomorrow.</p>
<p>Hope that you will find this post useful :-)</p>
<p>Best regards,</p>
<p>Kyryl</p>
<p>The Ning Team.</p>
<p>P.S. <a class="comments-author-name" href="https://creators.ning.com/members/FabricioGiugni">Fabricio</a>, I have seen your comments under the post regarding the implementation of the Facebook API. It seems that the network doesn't accept the API credentials for completely not connected with the settings reason. I will notify developers that your issue is a little bit different and probably more complicated so they will take a loot into this carefully. Sorry for the inconveniences. Besides of this, I hope you are having a great day.</p>
<p style="color: red; font-size: 150%;">Update #1:</p>
<p>The code has been changed a little according to the ⚡JFarrow's comment. I haven't made changes to the last longest script block as it's native javascript and basically $ is used as the variable.</p>
<p style="color: red; font-size: 150%;">Update #2 (another way):</p>
<p>To make your button look like this:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/559128?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/559128?profile=RESIZE_480x480" class="align-full" width="340"></a></p>
<p></p>
<p>You should post the following code into the End of Page Code section:</p>
<p><div id="fb-root"></div><br> <script>(function(d, s, id) {<br> var js, fjs = d.getElementsByTagName(s)[0];<br> if (d.getElementById(id)) return;<br> js = d.createElement(s); js.id = id;<br> js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId=<strong>INSERT_YOUR_APP_ID_HERE</strong>";<br> fjs.parentNode.insertBefore(js, fjs);<br> }(document, 'script', 'facebook-jssdk'));</script></p>
<p><strong>Note:</strong> You should inseret app id that you have gotten from facebook instead of "<strong>INSERT_YOUR_APP_ID_HERE</strong>", if you have the app of the version which is not 2.10 it won't work I suppose based on code that I see.</p>
<p>Then put the following code after the one you have just posted:</p>
<p><script><br> x$(".socialActions.cf").attr("id","socialActionscf");<br> </script></p>
<p><script type="text/javascript"><br> var $ = function (id){<br> return document.getElementById(id);<br> }<br> var shareButton = document.createElement("div");<br> var socialActions = $("socialActionscf");<br> socialActions.insertBefore(shareButton, socialActions.childNodes[0]);<br> shareButton.className = "fb-share-button";<br> shareButton.setAttribute("data-href", window.location.href);<br> shareButton.setAttribute("data-layout", button_count);<br> </script></p>
<p>To make this button appeared in on line with the other buttons paste the following code to the custom css in the design studio:</p>
<p>.fb-share-button.fb_iframe_widget {float:left; margin-right: 10px;} </p>
<p><strong>Pros:</strong></p>
<p>- If for some reason, the network doesn't accept your app id and app secret, this is the way around, as there is no need to integrate the app by using 3rd party integration if you are using this method. However, if you have followed all the instructions from here <a href="https://creators.ning.com/forum/topics/facebook-integration-instructions">https://creators.ning.com/forum/topics/facebook-integration-instructions</a> and replaced the app id in code and share still doesn't work (no action after you clicked it, or the button isn't displayed) that means that likely you haven't set your app right.</p>
<p>- There is the sign of the facebook on the button, so the users won't be confused with "F share" like it could have happened with the previous version of the code.</p>
<p><strong>Cons:</strong></p>
<p>- Don't actually know why but the button is displayed incorrectly it still doesn't look bad but not as I suppose it would be. If some one has any ideas regarding this please let me know. Thanks.</p>
<p style="color: red; font-size: 150%;">Update #3 (should be the last update as it's the best solution):</p>
<p>Basically it's also should work without the 3-rd party integration completed but the properly set app with the facebook still required. So here we go the step by step guidance.</p>
<p>Copy and paste this code on the custom code page into <head> section:</p>
<p><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></p>
<p>Next step. Copy the code below and past it on the custom code page into End of Page Code section:</p>
<p><!–– Facebook share ––></p>
<p><div id="fb-root"></div><br> <script>(function(d, s, id) {<br> var js, fjs = d.getElementsByTagName(s)[0];<br> if (d.getElementById(id)) return;<br> js = d.createElement(s); js.id = id;<br> js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId="<strong>Facebook_app_id</strong>";<br> fjs.parentNode.insertBefore(js, fjs);<br> }(document, 'script', 'facebook-jssdk'));</script></p>
<p><script><br> x$(".socialActions.cf").attr("id","socialActionscf");<br> x$(".after-content").attr("id","aftercontent");<br> </script></p>
<p><div class="fb-share-button" data-href="" data-layout="button_count" id="fbsharebutton"></div></p>
<p><script type="text/javascript"><br> var $ = function (id){return document.getElementById(id);}</p>
<p>var container=$('socialActionscf');<br> if(!container){ $('aftercontent').removeChild($('fbsharebutton'));<br> } else { $('socialActionscf').appendChild($('fbsharebutton'));<br> }<br> </script></p>
<p><strong>Note: </strong>Please don't forget to replace the "<strong>Facebook_app_id</strong>" with the id of your app.</p>
<p>And the last step, you should put the following code into the custom CSS section in the design studio:</p>
<p>.fb-share-button.fb_iframe_widget {float:left; margin-right: 10px;} </p>
<p>And it's all set. You will have the native Facebook share button with the counter, I have attached the screenshot so you will see how it would look like</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/559141?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/559141?profile=original" class="align-full" width="416"></a></p>
<p></p>
<p><strong>P.S. </strong>After I have realized that this could be done this way I fill myself really silly, as it's so simple and working without any graphic bugs</p></div>TIP: Brush Up On Social Media with Bookmark FREE eCourseshttps://creators.ning.com/forum/topics/tip-brush-up-on-social-media-with-bookmark-free-ecourses2017-06-15T00:18:34.000Z2017-06-15T00:18:34.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>If you have been looking for a FREE way to learn about social media in your own time, I have a secret for you.  A platform called <a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank">Bookmark</a> allows you to take eCourses for free when you sign up using <a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank">this referral link</a>.    These courses each take around 20-30 minutes, they are self paced and you can earn digital badges after completing them... You'll truly learn a LOT!</p>
<p></p>
<p>As someone who is heavily involved in social media and community building, I even learned a lot through the courses.   Go ahead and sign up and in addition to being able to <a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank">create your own website on Bookmark</a>, you can also learn through the eCourses.  What do you have to lose?</p>
<p></p>
<p><span class="font-size-4"><strong>Here are a list of the courses currently offered on Bookmark:</strong></span></p>
<p></p>
<div class="bg-white-profile">
<div class="w66">
<div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><br class="Apple-interchange-newline" />
<a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/starting_business-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Starting your online business</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/12-facebookMarketing-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Facebook marketing</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/07-googleAdwords-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Getting to know Google Adwords</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/02-photoshopCourseList-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Getting to know Photoshop</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/03-socialMedia-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Getting to know Social Media</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/04-gettingKnowInternet-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Getting to know the Internet</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><img alt="e-Learning Introduction to Evernote" src="https://www.bookmark.com/assets/images/courses/evernote-1.jpg" /></div>
<div class="eLearningBlockContent">
<h5>Introduction to Evernote</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/10-linkedin-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Introduction to LinkedIn</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/14-seo-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Introduction to SEO</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/01-introductionWebDevelopment-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Introduction to web development</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/08-paypalGuide-2.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Paypal guide</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/06-basicMobileDesign.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Basics of mobile web design</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/09-personalBranding-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Personal branding</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/13-twitterBusiness-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Twitter for Business</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/11-webUsability-1.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Web usability</h5>
</div>
</div>
<div class="eLearningBlock">
<div class="eLearningBlockIMG"><a rel="nofollow" href="https://www.bookmark.com?r=57940986878a0" target="_blank"><img src="https://www.bookmark.com/assets/images/courses/youtubeMarketing.jpg" class="align-full" /></a></div>
<div class="eLearningBlockContent">
<h5>Youtube Secrets</h5>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<p></p>
<div class="clear"><span class="font-size-4">Of course, if you <a rel="nofollow" href="http://justinfarrow.com/ning.html" target="_blank">need help with your Ning Community, let me know</a>.  It's what I do!  </span></div>
</div>Tip N3 responsive in-line images with titles. Easy HTML.https://creators.ning.com/forum/topics/tip-responsive-centered-in-line-images-easy-html2014-04-29T00:01:25.000Z2014-04-29T00:01:25.000ZGeorge H. Compton IVhttps://creators.ning.com/members/GeorgeHComptonIV<div><p>Your images will auto resize while being in-line and centered. It'll work on all columns and layouts. You can also add an image title underneath each and every image.<br> <br> <strong><a href="http://4himalone2.ning.com/tmp-test" target="_blank">click here to see it live</a> </strong> On this page I have the divide in two HTML box's, in the comments and in the HTML box above the footer </p>
<p>Easy HTML. We'll be use Ning's HTML editor to create the HTML. First figure out how many pictures you're going to add. You will add a number for each image in the divide below.<br> now we'll add this divide to any HTML box, now you will see your numbers. Highlight the first number then press the image upload button. Now add your image title right before this symbol </a> which is at the end of the HTML. It will look like this <strong>(</strong> <strong>300" />your image text</a></strong> <strong>) Adding the text is optional.<br></strong></p>
<p>Continue this step for every image you want to add. See image below.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557649?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557649?profile=original" width="550"></a></p>
<p>Add a link to any individual picture.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557695?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557695?profile=RESIZE_1024x1024" width="558"></a></p>
<p></p>
<p>Place this divide in any HTML box and follow the instructions above. You can also use this in comments, blogs, groups, HTML boxes below the header and above the footer. Anywhere that accepts HTML.</p>
<div style="background: none repeat scroll 0% 0% #71DBD6; border: 1px solid #2F9D49; padding: 15px; margin-bottom: 15px;">
<div class="inline-images">
<br> 1 2 3 4
<br> </div>
</div>
<p>Next choose the appropriate stylesheet for your network. A standard network width or a 100% network width stylesheet.</p>
<p></p>
<p><strong>Standard network width</strong><br> Place this CSS stylesheet in your (custom code <Head> Code box)</p>
<div style="background: none repeat scroll 0% 0% #71DBD6; border: 1px solid #2F9D49; padding: 15px; margin-bottom: 15px;">
<!-- GEOCOMs inline images Standard network width -->
<br> <!-- <Head> Code box -->
<br> <link rel="stylesheet" type="text/css" href="http://storage.ning.com/topology/rest/1.0/file/get/11511431?profile=original"/>
<br> <!-- End inline-images -->
</div>
<p></p>
<p><strong>100% network</strong> <strong>width</strong><br> Place this CSS stylesheet in your (custom code <Head> Code box)</p>
<div style="background: none repeat scroll 0% 0% #71DBD6; border: 1px solid #2F9D49; padding: 15px; margin-bottom: 15px;">
<!-- GEOCOMs inline images 100% network width -->
<br> <!-- <Head> Code box -->
<br> <link rel="stylesheet" type="text/css" href="http://storage.ning.com/topology/rest/1.0/file/get/11511434?profile=original"/>
<br> <!-- End inline-images -->
</div>
<p><strong>You can also add a little style to make it stand out.</strong></p>
<p><strong><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557735?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557735?profile=RESIZE_1024x1024" width="550"></a></strong>Just edit the colors and add it to your design studio CSS section.<br> If anyone would like help customizing this just let me know.</p>
<div style="background: none repeat scroll 0% 0% #71DBD6; border: 1px solid #2F9D49; padding: 15px; margin-bottom: 15px;">
DIV.inline-images a{
<br> background-color: rgba(
<span class="rgba1">215,</span>
<span class="rgba2">222,</span>
<span class="rgba3">227,</span>
<span class="rgba4">0.4</span>)!important;
<br> border: 1px solid #333!important;
<br> border-radius:8px!important;
<br> -moz-border-radius:8px!important;
<br> -webkit-border-radius:8px!important;
<br> -khtml-border-radius:8px!important;}
</div></div>( tip N3 ) the importance of CSS @media Queries - And how to use them.https://creators.ning.com/forum/topics/tip-n3-the-importance-of-css-media-wraps2014-04-06T17:35:38.000Z2014-04-06T17:35:38.000ZGeorge H. Compton IVhttps://creators.ning.com/members/GeorgeHComptonIV<div><p>It's very important to use the @media wraps for different screen resolutions on a responsive network such as Ning 3.0 networks.  </p>
<p>There are a lot of 3.0 networks that have asked me for help. Most of them their sites look perfect on a laptop, PC or TV with their custom CSS. But when it comes to a cell phone view it's terrible because they are using the same custom CSS codes for their cell phones as they are for the larger screen resolutions. Hopefully this will help some of the creators out there.</p>
<p></p>
<p><span class="font-size-3"><strong><span style="color: #0000ff;">Usage Examples</span></strong></span><br />
<strong>This CSS wrap will deal with resolutions 960 pixels and wider. Change the word min- to max- that will make the CSS work on screen resolutions 960 pixels and smaller.</strong><br />
<br />
@media screen and (min-width:960px)  {<br />
<br />
 }<br />
<br />
<span style="color: #000000;"><strong>And this is how it will look with your CSS added to it. As you can see there are now two of these symbols } at the end of your CSS code... very important.</strong></span> :-)<br />
<br />
<br />
@media screen and (min-width:960px)  {<br />
HEADER.site-header.cf {<br />
    height:170px!important; }<br />
 }</p>
<p><strong><span style="color: #000000;">You can add multiple snippets of CSS in one @media wrap</span></strong><br />
<br />
@media screen and (min-width:960px)  {<br />
DIV.adjacentEntryLink.adjacentEntryLink-next{<br />
  margin-right:0px!important;}<br />
<br />
DIV.adjacentEntryLink.adjacentEntryLink-previous{<br />
  margin-left:0px!important;}<br />
<br />
BODY.page-members.page-members .profileCoverArea {<br />
    height: 235px!important; }<br />
} </p>
<p><br />
<span style="color: #000000;"><strong>You can also use a max and min in the same CSS @media wrap. This CSS wrap will deal with screen resolutions 760 pixels up to 960 pixels.</strong></span><br />
<br />
@media screen and (min-width:760px) and (max-width:960px)  {<br />
  <br />
}</p>
<p></p>
<p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br />
<span style="color: #0000ff;" class="font-size-3"><strong>Examples</strong></span><br />
<strong><span style="color: #0000ff;">Example 1,</span></strong> <strong><span style="color: #0000ff;">profile Cover Area image.</span></strong><br />
Let's say your profile Cover Area image looks great with a height of 265 pixels when your screen resolution is 970 pixels or wider but doesn't look very good at a screen resolution of 969 pixels or less. So we will use an  @media wrap to solve that issue.<br />
<br />
<strong>This will deal with the height of your profile Cover Area image from screen resolutions 970 pixels or greater</strong><br />
<br />
@media screen and (min-width:970px)  {<br />
DIV.banner-header.profileCoverArea {<br />
    height:265px!important;<br />
} }<br />
<br />
<strong>And this one will deal with the height of your profile Cover Area image from screen resolutions 720 pixels up to 970 pixels.</strong><br />
<br />
@media screen and (min-width:720px) and (max-width:970px)  {<br />
DIV.banner-header.profileCoverArea {<br />
    height:170px!important;<br />
} }<br />
<br />
<strong>And these two will deal with the height of your profile Cover Area image for Mobile Phones 720 pixels or smaller.</strong><br />
<strong>There are a few different types of mobile phones with different screen resolutions so will break it down a little more to accommodate.</strong><br />
<br />
@media screen and (min-width: 480px) and (max-width:720px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:75px!important;<br />
} }<br />
<br />
@media screen and (max-width:480px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:40px!important;<br />
} }<br />
<br />
<br />
<strong>Now just add the four codes to your design studio CSS section and your cell phones, Tablets, Pc's and tv's views will all look great. This is how it should look in the CSS section.</strong></p>
<p>/* start profile Cover Area image mod */<br />
<br />
/* #### Desktops & TV's #### */<br />
@media screen and (min-width:970px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:265px!important;<br />
} }<br />
<br />
/* #### Tablets #### */<br />
@media screen and (min-width:720px) and (max-width:970px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:170px!important;<br />
} }<br />
<br />
/* #### Mobile Phones #### */<br />
@media screen and (min-width: 480px) and (max-width:720px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:75px!important;<br />
} }<br />
<br />
@media screen and (max-width:480px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:40px!important;<br />
} }</p>
<p>/* End profile Cover Area image mod */</p>
<p></p>
<p><strong><span style="color: #0000ff;">Example 2, basic</span></strong> <strong><span style="color: #0000ff;">profile Cover Area image with a network width of 100%.</span></strong><br />
Now let's say you're using 100% width for your 3.0 network. You may want to use more CSS @media wraps for the larger resolutions. We'll use the same profile Cover Area image just like we did in the previous example.<br />
 <br />
<strong>This is how it should look in the CSS section.</strong></p>
<p>/* start profile Cover Area image mod */<br />
/* #### Desktops & TV's #### */<br />
@media screen and (min-width:2000px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:530px!important;<br />
} }<br />
<br />
@media screen and (min-width:1558px) and (max-width:2000px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:445px!important;<br />
} }<br />
<br />
@media screen and (min-width:1260px) and (max-width:1558px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:350px!important;<br />
} }<br />
<br />
@media screen and (min-width:960px) and (max-width:1260px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:265px!important;<br />
} }<br />
 <br />
/* #### tablets and smaller portable devices #### */<br />
@media screen and (min-width:720px) and (max-width:960px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:170px!important;<br />
} }<br />
<br />
/* #### Mobile Phones #### */<br />
@media screen and (min-width: 480px) and (max-width:720px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:75px!important;<br />
} }<br />
<br />
@media screen and (max-width:480px)  {<br />
DIV.banner-header.profileCoverArea{<br />
    height:40px!important;<br />
} }</p>
<p>/* End profile Cover Area image mod */</p>
<p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
<p><span class="font-size-3"><strong><span style="color: #0000ff;">Your design studio CSS section and stylesheets should be set up much like this. That way you always know where to place and find your codes for your different resolutions and devices.</span></strong></span></p>
<p><strong>There are a few different types of CSS @media wraps.</strong></p>
<p><br />
/* #### Mobile Phones Portrait #### */<br />
@media screen and (max-device-width: 480px) and (orientation: portrait)  {<br />
  /* some CSS here */ </p>
<p>}<br />
<br />
/* #### Mobile Phones Landscape #### */<br />
@media screen and (max-device-width: 640px) and (orientation: landscape)  {<br />
  /* some CSS here */<br />
}<br />
<br />
/* #### Mobile Phones Portrait or Landscape #### */<br />
@media screen and (max-device-width: 640px)  {<br />
  /* some CSS here */<br />
}<br />
<br />
/* #### iPhone 4+ Portrait or Landscape #### */<br />
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)  {<br />
  /* some CSS here */<br />
}<br />
<br />
/* #### Tablets Portrait or Landscape #### */<br />
@media screen and (min-device-width: 768px) and (max-device-width: 1024px)  {<br />
  /* some CSS here */<br />
}<br />
<br />
/* #### Desktops & TV's #### */<br />
@media screen and (min-width: 1024px)  {<br />
  /* some CSS here */<br />
}</p>
<p><br />
A simple ways to learn more about the different CSS @media wraps. Type this query in any search engine "<strong>css media query width</strong>" ....<br />
There is a whole lot more you can do with the CSS @media wraps to keep your site responsive and looking good on all devices.</p>
</div>3.0 Footer Tip: Add Social Icons Using Icon Font and No Javascripthttps://creators.ning.com/forum/topics/3-0-footer-tip-add-social-icons-using-icon-font-and-no-javascript2014-03-31T02:11:01.000Z2014-03-31T02:11:01.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Hey Ningers, here is a simple yet elegant and modern social footer featuring entypo icon font and long-shadow icon design. The whole thing requires no javascript or images and we may learn something new together. What we are building is the following, using an icon font:</p>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557472?profile=original" width="100%"></a></p>
<p><span style="text-decoration: underline;">Minor NOTE:</span> You do not have to have 2 rows of icons. If you'd just like one row, I'll explain below</p>
<p><span class="font-size-5">The HTML for the Page Footer: [All Code Attached at Bottom as TXT File]<br></span></p>
<p><strong>STEP ONE:</strong> Copy this code to a text document and find/replace all instances of <em>[YOUR NETWORK]</em> and <em>yournetwork.ning.com</em> with your own URLs and Network Name. Basically change all links to go to the pages on your network which the icon represents. THEN, Place this in the above Footer Section of your Pages Manager:</p>
<p><div class="jffooter"><br> <a title="[YOUR NETWORK] on Facebook" href="http://facebook.com/YourPage"><div class="jfsocial">&#62220;</div><br> <a title="[YOUR NETWORK] on Twitter" href="http://yournetwork.ning.com"><div class="jfsocial">&#62217;</div><br> <a title="[YOUR NETWORK] on Google+" href="http://yournetwork.ning.com"><div class="jfsocial">&#62223;</div><br> <a title="[YOUR NETWORK] on Linkedin" href="http://yournetwork.ning.com"><div class="jfsocial">&#62232;</div><br> <a title="[YOUR NETWORK] Member Map" href="http://yournetwork.ning.com"><div class="jfsocial">&#59175;</div><br> <a title="[YOUR NETWORK] on Pinterest" href="http://yournetwork.ning.com"><div class="jfsocial">&#62226;</div><br> <a title="[YOUR NETWORK] on Vimeo" href="http://yournetwork.ning.com"><div class="jfsocial">&#62214;</div><br> </div><br> </br><br> <div class="jffooter"><br> <a title="Your Profile Page" href="http://yournetwork.ning.com"><div class="jfsocial">&#59170;</div><br> <a title="Community Hubs for Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#128101;</div><br> <a title="Add Yourself to Member Map" href="http://yournetwork.ning.com"><div class="jfsocial">&#59172;</div><br> <a title="Surveying Photos" href="http://yournetwork.ning.com"><div class="jfsocial">&#128247;</div><br> <a title="Articles for Land Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#128240;</div><br> <a title="Student Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#127891;</div><br> <a title="Surveying Video Library" href="http://yournetwork.ning.com"><div class="jfsocial">&#127916;</div><br> </div></p>
<p> </p>
<p>Like So:</p>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557507?profile=original" width="100%"></a></p>
<p> </p>
<p><strong>STEP TWO:</strong> Place This in your Top Section of your Custom Code Page at the top:</p>
<p><link href='http://weloveiconfonts.com/api/?family=entypo' rel='stylesheet' type='text/css'></p>
<p><strong>STEP THREE:</strong> Add this Code to the Advanced Section of CSS:</p>
<p>/* entypo */<br> [class*="entypo-"]:before {<br> font-family: 'entypo', sans-serif;<br> }<br> .jffooter {<br> padding: 20px 0;<br> text-align: center;<br> }<br> <br> .jfsocial {<br> display: inline-block;<br> width: 70px;<br> height: 70px;<br> margin: 0 10px;<br> line-height: 70px;<br> font-family: Entypo;<br> font-size: 35px;<br> text-align: center;<br> color: <span style="color: #ff0000;">#bbb</span>;<br> border-radius: 50%;<br> background: #eee;<br> overflow: hidden;<br> transition: color .3s;<br> }<br> <br> .jfsocial:hover {<br> color: <span style="color: #ff0000;">#000</span>;<br> cursor: pointer;<br> }<br> <br> .jfsocial {<br> box-shadow: rgb(210, 210, 210) 1px 1px,<br> rgb(210, 210, 210) 2px 2px,<br> rgb(211, 211, 211) 3px 3px,<br> rgb(211, 211, 211) 4px 4px,<br> rgb(211, 211, 211) 5px 5px,<br> rgb(212, 212, 212) 6px 6px,<br> rgb(212, 212, 212) 7px 7px,<br> rgb(212, 212, 212) 8px 8px,<br> rgb(213, 213, 213) 9px 9px,<br> rgb(213, 213, 213) 10px 10px,<br> rgb(214, 214, 214) 11px 11px,<br> rgb(214, 214, 214) 12px 12px,<br> rgb(214, 214, 214) 13px 13px,<br> rgb(215, 215, 215) 14px 14px,<br> rgb(215, 215, 215) 15px 15px,<br> rgb(215, 215, 215) 16px 16px,<br> rgb(216, 216, 216) 17px 17px,<br> rgb(216, 216, 216) 18px 18px,<br> rgb(216, 216, 216) 19px 19px,<br> rgb(217, 217, 217) 20px 20px,<br> rgb(217, 217, 217) 21px 21px,<br> rgb(218, 218, 218) 22px 22px,<br> rgb(218, 218, 218) 23px 23px,<br> rgb(218, 218, 218) 24px 24px,<br> rgb(219, 219, 219) 25px 25px,<br> rgb(219, 219, 219) 26px 26px,<br> rgb(219, 219, 219) 27px 27px,<br> rgb(220, 220, 220) 28px 28px,<br> rgb(220, 220, 220) 29px 29px,<br> rgb(221, 221, 221) 30px 30px;<br> text-shadow: rgb(226, 226, 226) 1px 1px,<br> rgb(227, 227, 227) 2px 2px,<br> rgb(227, 227, 227) 3px 3px,<br> rgb(228, 228, 228) 4px 4px,<br> rgb(229, 229, 229) 5px 5px,<br> rgb(229, 229, 229) 6px 6px,<br> rgb(230, 230, 230) 7px 7px,<br> rgb(230, 230, 230) 8px 8px,<br> rgb(231, 231, 231) 9px 9px,<br> rgb(232, 232, 232) 10px 10px,<br> rgb(232, 232, 232) 11px 11px,<br> rgb(233, 233, 233) 12px 12px,<br> rgb(233, 233, 233) 13px 13px,<br> rgb(234, 234, 234) 14px 14px,<br> rgb(235, 235, 235) 15px 15px,<br> rgb(235, 235, 235) 16px 16px,<br> rgb(236, 236, 236) 17px 17px,<br> rgb(236, 236, 236) 18px 18px,<br> rgb(237, 237, 237) 19px 19px,<br> rgb(238, 238, 238) 20px 20px;<br> }<br> <br> </p>
<p> </p>
<p>Further Customization:</p>
<p>If you only want one or threee row of icons, simply remove or add one entire block of links like so:</p>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557569?profile=original" width="100%"></a></p>
<p>If you'd like to change the hover color of the links, change the value(s) in <span style="color: #ff0000;">red</span> (above) with the HEX code for the color you want. The first red color is the color of icon before hover and the second red color is the one it changes to on hover..</p>
<p><em><strong>Want to Change out the Icons?</strong></em> Entypo has hundreds of icons to choose from. Simply head to the <a rel="nofollow" href="http://entypo.com/characters/" target="_blank">Character Map for Entypo</a> and change out the unicode for the icon with the one you prefer. For example: To change the icon for Facebook to one for Tumblr, simply change &#62220; to &#62229; in the HTML portion.</p>
<p><a target="_blank" href="http://entypo.com/characters/"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557670?profile=original" width="100%"></a></p>
<p> </p>
<p>I will be adding <a rel="nofollow" href="http://www.jbfarrow.com/ning-tips/howtoaddsocialiconfootertoaningnetwork" target="_blank">more customization options to this page</a> on my project site under "Ning Tips". Enjoy!</p></div>Time Saver: Your RSS Feeds for Location Tags on Ninghttps://creators.ning.com/forum/topics/time-saver-your-rss-feeds-for-location-tags-on-ning2014-03-26T20:11:29.000Z2014-03-26T20:11:29.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I hope to save you all some time with this tip. Below you will find 4 text files, each with RSS feeds for major locations around the world, geared to pull all content which has been tagged on your network for the location names. Simply open the TXT file up in a notepad or notepad++ file, Find/Replace all mentions of 'yournetwork' with your own network URL and save for quick access when building RSS modules.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557292?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557292?profile=original" width="553"></a></p>
<p><strong>Note:</strong> The locations within these files pull instances of locations with the first letter Capitalized. So for example it will pull a feed for the tag 'Australia' or 'Japan' but if you have content tagged 'australia' or 'japan' you will need to change this in the feed before importing.</p>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557329?profile=original" width="561"></a></p>
<p>And on that note, you can also change the tag name to any subject or keyword you like to pull an RSS feed for that tag.</p>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557368?profile=original" width="561"></a></p>
<p>Download and Modify These to Work for Your Feeds</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557406?profile=original">ning-forum-tags-rss.txt</a></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557435?profile=original">ning-video-tags-rss.txt</a></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557458?profile=original">ning-photo-tags-rss.txt</a></p>
<p> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557491?profile=original">ning-blog-tags-rss.txt</a></p>
<p><strong>Bonus:</strong> When you are finished modifying the feeds to match your network, you can mix and combine them into a mega-feed for example (by Continent) by pasting the feeds you would like to mix into <a rel="nofollow" href="http://www.rssmix.com/" target="_blank">RSSMix</a> which will parse all of the feeds you give it into a single RSS feed.</p></div>Community: ✍ Contribute Your Cleverer Content Categories ✍https://creators.ning.com/forum/topics/community-contribute-your-cleverer-content-categories2014-03-19T04:57:10.000Z2014-03-19T04:57:10.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I wanna see what kind of clever categories everyone is coming up with (Blog Pages, Forum Pages, Photo Pages all have categories) . As a community of "creators" we should be able to come up with the clevererest content categories anywhere!</p>
<p>This is what I am talking about:</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557208?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/557208?profile=original" width="534"></a>My network is obviously for surveyors, but the categories become significant when a member is trying to figure out what to write about and if clever enough could inspire someone to post! Isn't that what its all about? Let's help each other come up with cleverer categories.. the clevererest cause we're creators.</p></div>targeting the tab container container in v1 themeshttps://creators.ning.com/forum/topics/targeting-the-tab-container-container-in-v1-themes2014-03-19T20:44:19.000Z2014-03-19T20:44:19.000Zsoaringeaglehttps://creators.ning.com/members/soaringeagle<div><p>i was asked how to add a background to the tab container tabs, in v2 themes this is easy since the tabs are contained in a ul tabContainerSection-tabs so .tabContainerSection-tabs {background:red;} works</p>
<p>but in v1 themes theres just a row containing the tabs</p>
<p>so you need to use</p>
<p>.section-tabContainer .row:nth-of-type(2) {<br />
 background:red;<br />
}</p>
<p>the reasoning is there are 2 rows inside section-tabContainer 1st row containing a span full containing an h3 with the tab container title</p>
<p>the 2nd row contains the tabs so must be targetted with nth of type (2) meaning 2nd row within the section-tabContainer</p>
<p>this maybe confusing to new coders so thought a lil tip could help</p>
<p>i hope in the fiture ning adds a class like the .tabContainerSection-tabs to that row</p>
<p></p>
</div>Ning 3.0 Tip: Infinite Scroll for Photos (Loading More Images ... )https://creators.ning.com/forum/topics/ning-3-0-tip-infinite-scroll-for-photos-loading-more-images2014-03-19T16:43:29.000Z2014-03-19T16:43:29.000ZSweetPotatohttps://creators.ning.com/members/SweetPotato<div><p>Hi all,</p>
<p style="text-align: left;">I've been playing around with the awesome <a rel="nofollow" href="http://www.infinite-scroll.com/" target="_blank">Infinite Scroll</a> jQuery plugin to get it to work with Ning 3.0 photos.</p>
<p style="text-align: center;"><span style="text-decoration: underline; color: #3366ff;"><em><strong>Tested on V1 Aloe theme and V2 Infinity theme</strong></em></span></p>
<p><span style="color: #000000;"><strong>What does this tip do?</strong></span> Instead of seeing the pagination buttons at the bottom of your photos page, you'll instead get the next page of photos automatically loading below those already there.</p>
<p>Here's what you need to do:<br> <br> <span style="color: #000000;"><strong>1)</strong></span> Load the jquery.infinitescroll.min.js on your site by adding the following code to <em>Social Site Manager > Custom Code > End of Page code</em></p>
<p><span style="color: #3366ff;"><script type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/956929?profile=original"></script></span></p>
<p><span style="color: #000000;"><strong>2)</strong></span> <em>Go to Social Site Manager > Sites & Pages</em> and select your Photo content instance. Open the Below Header HTML box and insert the following code, depending on which Design Studio theme version you're using:<br> <br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557241?profile=original">Click to Enlarge<img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557241?profile=RESIZE_320x320" width="300"></a></p>
<p></p>
<p><span class="font-size-4"><strong><span style="color: #3366ff;">VERSION 1 Theme</span></strong></span></p>
<p><span style="color: #3366ff;"><script type="text/javascript"></span><br> <span style="color: #3366ff;">xg.addOnRequire(function () {</span><br> <span style="color: #3366ff;">x$(document).ready(function() {</span><br> <br> <span style="color: #3366ff;">x$('.matrix .row .span:has(.matrix-itemFrame)').addClass('photoListPage-entry');</span><br> <br> <span style="color: #3366ff;">var curPage = 1;</span><br> <span style="color: #3366ff;">var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text(); // Number of pages</span><br> <br> <span style="color: #3366ff;">x$('.photoListPage .matrix .row').infinitescroll({</span><br> <br> <span style="color: #3366ff;">navSelector : ".pagination", </span><br> <span style="color: #3366ff;">// selector for the paged navigation (it will be hidden)</span><br> <br> <span style="color: #3366ff;">nextSelector : ".pagination-next", </span><br> <span style="color: #3366ff;">// selector for the NEXT link (to page 2)</span><br> <br> <span style="color: #3366ff;">itemSelector : ".matrix .row .span", </span><br> <span style="color: #3366ff;">// selector for all items you'll retrieve</span><br> <br> <span style="color: #3366ff;">loading: {</span><br> <span style="color: #3366ff;">img: "http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",</span><br> <span style="color: #3366ff;">msgText: "Loading more photos ..."</span><br> <span style="color: #3366ff;">},</span><br> <br> <span style="color: #3366ff;">},function() { // Optional callback when new content is successfully loaded</span><br> <br> <span style="color: #3366ff;">curPage++;</span><br> <br> <span style="color: #3366ff;">if(curPage == pagesNum) {</span><br> <br> <span style="color: #3366ff;">x$(window).unbind('.infscr');</span><br> <br> <span style="color: #3366ff;">} else {}</span><br> <br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;"></script></span></p>
<p><span class="font-size-4" style="color: #3366ff;"><strong>VERSION 2 theme</strong></span><br> <br> <span style="color: #3366ff;"><script type="text/javascript"></span><br> <span style="color: #3366ff;">xg.addOnRequire(function () {</span><br> <span style="color: #3366ff;">x$(document).ready(function() {</span><br> <br> <span style="color: #3366ff;">var curPage = 1;</span><br> <span style="color: #3366ff;">var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text(); // Number of pages</span><br> <br> <span style="color: #3366ff;">x$('.grid-frame.sheet ul.matrix.row').infinitescroll({</span><br> <br> <span style="color: #3366ff;">navSelector : ".pagination", </span><br> <span style="color: #3366ff;">// selector for the paged navigation (it will be hidden)</span><br> <br> <span style="color: #3366ff;">nextSelector : ".pagination-next", </span><br> <span style="color: #3366ff;">// selector for the NEXT link (to page 2)</span><br> <br> <span style="color: #3366ff;">itemSelector : ".photoListPage-entry", </span><br> <span style="color: #3366ff;">// selector for all items you'll retrieve</span><br> <br> <span style="color: #3366ff;">loading: {</span><br> <span style="color: #3366ff;">img: "http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",</span><br> <span style="color: #3366ff;">msgText: "Loading more photos ..."</span><br> <span style="color: #3366ff;">},</span><br> <br> <span style="color: #3366ff;">},function() { // Optional callback when new content is successfully loaded</span><br> <br> <span style="color: #3366ff;">curPage++;</span><br> <br> <span style="color: #3366ff;">if(curPage == pagesNum) {</span><br> <br> <span style="color: #3366ff;">x$(window).unbind('.infscr');</span><br> <br> <span style="color: #3366ff;">} else {}</span><br> <br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;"></script></span></p>
<p></p>
<p><span style="color: #000000;"><strong>3)</strong> Now add this css in the Design Studio Custom CSS (this positions the loading gif) - both V1 and V2 of Design studio:</span><br> <br> <span style="color: #3366ff;">#infscr-loading {</span><br> <span style="color: #3366ff;"> margin: 20px;</span><br> <span style="color: #3366ff;"> text-align: center;</span><br> <span style="color: #3366ff;">}</span><br> <br> <a href="http://whineglass.ning.com/photos-beta" target="_blank">See it in action here</a> (on my messy sandbox site - sorry!)</p>
<p>Enjoy</p>
<p>SP</p>
<p><br> <strong>Notes:</strong></p>
<p>i) The method i've used here adds script to the 'Below Header Ad' box in order to get round the fact that photo pages no longer have a standard Body class css selector (i.e. it's determined by your page name). I wanted this to work for everyone. However, you can include the script in the <em>End of Page code</em> by targeting the photo page specific body class selectors should you wish to avoid adding it in the below header ad box.</p>
<p>ii) The documentation on the <a rel="nofollow" href="http://www.infinite-scroll.com/" target="_blank">Infinite Scroll</a> jQuery plugin site is patchy to say the least. Much of it is outdated.</p>
<p>iii) You can change the loading gif image and the text that accompanies it by altering the following code as it appears above:</p>
<p><span style="color: #000000;">loading: {</span><br> <span style="color: #000000;">img: "<span style="color: #3366ff;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original">http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original</a></span>",</span><br> <span style="color: #000000;">msgText: "<span style="color: #3366ff;">Loading more photos ...</span>"</span><br> <span style="color: #000000;">}</span></p>
<p></p>
<p></p>
<p></p>
<p></p></div>V2 Infinity Theme | Code to Change Menu Tab Colorshttps://creators.ning.com/forum/topics/v2-infinity-theme-code-to-change-menu-tab-colors2014-03-08T17:58:43.000Z2014-03-08T17:58:43.000ZSusan Danielshttps://creators.ning.com/members/SusanDaniels<div><p>I changed the color of my tabs in the new Infinity Theme V2. I made changes to the color, then copy and pasted into the <span style="color: #800000;"><strong><span style="font-family: georgia,palatino;">Custom CSS - This CSS will only be used on this theme</span></strong></span>.</p>
<p><a target="_blank" href="http://goldenstarsocial.com"><img class="align-left" style="padding: 3px;" src="http://storage.ning.com/topology/rest/1.0/file/get/557146?profile=original" width="550"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><a target="_blank" href="http://goldenstarsocial.com"><img class="align-left" style="padding: 3px;" src="http://storage.ning.com/topology/rest/1.0/file/get/557176?profile=original" width="550"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Text file is attached.</p>
<p></p>
<p>Warmly,</p>
<p>Susan</p>
<p></p></div>How Do You Use Your Tab Container?https://creators.ning.com/forum/topics/how-do-you-use-your-tab-container2014-03-07T01:58:34.000Z2014-03-07T01:58:34.000ZRandy L. Volletthttps://creators.ning.com/members/RandyLVollett<div><p>I must say that the Tab Container is the best invention since the Peperoni Pizza. This little container has a powerful and unlimited array of uses. I have been using my simple slider for advertizing and linking to other parts of our site, but it does drag it down with a lot of coding and load time. With the Tab Container i now can make categories for our village resources and just place a simple link without any extra coding. Less coding the better.<br> <br> This is just a simple simple example what i use the Tab Container for. Although i am removing the code for the slider i am adding this easy and attractive vertical tabs that John Bizley's made that you can get <a href="http://creators.ning.com/forum/topics/how-to-get-vertical-tabs-in-the-new-tab-container" target="_blank">HERE</a>.<br> <br> Because what ever content you add there will always be an open tab with content, so to make my container look closed i just added an HTML box and uploaded a 1x1 px transparent pic and titled the tab Select Category or you can just type a small message that would describe your content subject in the blank area you see here.<br> <br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557253?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/557253?profile=original" width="506"></a><br> Here is my selected tab with my content and a link to my parts page. So why don't i fill just one box with all the links and parts descriptions? Because i don't want my box to be any longer on my page than shown here. It keeps my subjects clean and organized as the Tab Container was intended to be. If you don't want your box to expand down when you select a category just omit the Select Category tab and have an active tab open all the time, but make sure each content is the same size.<br> <br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557273?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/557273?profile=original" width="506"></a><br> Show us your creative ways to use the Tab Container here.</p></div>Mobile Usage Trendshttps://creators.ning.com/forum/topics/mobile-usage-trends2014-03-04T22:19:52.000Z2014-03-04T22:19:52.000ZKoshttps://creators.ning.com/members/Kos<div><p>They're doing it everywhere. In the laundromat, while eating, on the bus and at work. Everyone's on their phone so what's the trend in mobile usage you ask? Here you go!</p>
<p>Oh and how <em>fast</em> your page loads............does matter. Visual from this <a rel="nofollow" href="http://www.citrix.com/news/announcements/feb-2014/data-reveals-mobile-ad-reach-has-doubled-.html" target="_blank">Citrix article</a>.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557246?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557246?profile=RESIZE_1024x1024" width="750"></a></p></div>3.0 Tip- Mobile Apps & Links to your Networkhttps://creators.ning.com/forum/topics/3-0-tip-mobile-apps-links-to-your-network2014-03-02T04:30:01.000Z2014-03-02T04:30:01.000ZFire-Techhttps://creators.ning.com/members/FireTech<div><p>A number of years ago, if you tried to make a mobile app that would link to your network and make access easier for your members, it was difficult to do...wouldn't work on multiple platforms and would often break some codes (not to mention that our sites weren't responsive...so they looked terrible anyhow).</p>
<p style="text-align: center;"><span class="font-size-3"><strong>Well, if you haven't heard...times have changed!</strong></span></p>
<p>With 3.0, we finally have a truly responsive platform that looks great on mobile and most mobile browsers now have the ability to save a shortcut to the Home Screen. I'm sure a lot of you know this...but have you shared it with your members?</p>
<p>Here's a little something I whipped up for my sites to let members know that they can make a link on their desktop / laptop, tablet or mobile device. Feel free to use it for your own.</p>
<p>Enjoy,</p>
<p>FT</p>
<p> </p>
<p> </p>
<p></p>
<center>
<p> </p>
<p><strong style="font-size: 12pt;">No matter the platform or device you use, you can create a shortcut on your desktop or mobile device for quick access to the community!</strong></p>
</center>
<center>
<p> </p>
<p>On your desktop or laptop computer, just drag our URL to your desktop.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/557155?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/557155?profile=original" class="align-center"></a></p>
<p> </p>
<p> </p>
<p style="text-align: center;">For your mobile device or tablet, find the option to add a shortcut to your Home Screen in your menu options. Here's an example from Google Chrome.</p>
<p><img src="http://storage.ning.com/topology/rest/1.0/file/get/557183?profile=original" class="align-center" width="300"><img src="http://storage.ning.com/topology/rest/1.0/file/get/557216?profile=original" class="align-center" width="300"></p>
</center></div>Ning 3.0 Tip: Download Buttonhttps://creators.ning.com/forum/topics/ning-3-0-tip-download-button2014-02-18T13:32:15.000Z2014-02-18T13:32:15.000ZSweetPotatohttps://creators.ning.com/members/SweetPotato<div><p>Hi all,</p>
<p>I've worked on several client projects recently where there was a need for members to easily access downloadable items (PDFS, Spreadsheets etc) in forum discussions.</p>
<p>This simple tip looks for the word 'download' in links within forum discussions and then styles the link accordingly - it simply makes the download option more obvious.</p>
<p><strong>How it works:</strong></p>
<p>When you add an attachment to a forum discussion (1 below) in Ning 3.0 you get this box:</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557016?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557016?profile=original" width="575"></a></p>
<p><br> Upload your file and then ensure that the Title contains the word 'Download', in the instance above it's 'Download the PDF' (2).</p>
<p>Press OK and save the forum discussion.<br> <br> <strong>Now for the script:</strong><br> <br> Open Social Site Manager, then Custom Code, and place this in the End of Page Code section:</p>
<p><script><br> x$('.discussionDetailPage .card .content a:contains("Download"), .discussionDetailPage .entry-content.cf a:contains("Download")').addClass('SP_Download');<br> </script></p>
<p>Press save.<br> <br> <strong>Now for the CSS:</strong><br> <br> Open the Design Studio and Custom CSS, then add this:<br> <br> /*Download Button*/<br> .SP_Download{<br> color:#1d1d1d;<br> font-size:16px;<br> border-radius:3px;<br> -webkit-border-radius:3px;<br> -moz-border-radius:3px;<br> padding:10px 15px 10px 40px;<br> background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F8F7F7), color-stop(1, #ECEBEB));<br> background:-moz-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);<br> background:-webkit-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);<br> background:-o-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);<br> background:-ms-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);<br> background:linear-gradient(to bottom, #F8F7F7 5%, #ECEBEB 100%);<br> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F7F7', endColorstr='#ECEBEB',GradientType=0);<br> background-color:#F8F7F7;<br> background-image: url("http://storage.ning.com/topology/rest/1.0/file/get/11391124?profile=original");<br> background-repeat:no-repeat;<br> background-position:7px 5px;<br> border:solid 1px #c9c9c9;<br> }</p>
<p>This styling can of course be simplified and amended to taste.</p>
<p>Here is the result:</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557038?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557038?profile=original" width="218"></a></p>
<p></p>
<p>This tip has been tested using a Design Studio V1 theme and a Design Studio V2 theme.</p>
<p>It won't be for everyone but is a good option for people with a forum where only admins add content and can control the links in the discussions.</p>
<p>Enjoy</p>
<p>SP<br> <br> I have more tips on my <a href="http://creators.ning.com/profile/sweetpotato" target="_self">profile page</a> or <a rel="nofollow" href="http://www.sweetpotato.me.uk" target="_blank">my site</a></p></div>Are there any formatted templates I can use for broadcast messages?https://creators.ning.com/forum/topics/are-there-any-formatted-templates-i-can-use-for-broadcast2014-02-14T08:51:05.000Z2014-02-14T08:51:05.000ZRachella Sinclairhttps://creators.ning.com/members/RachellaSinclair<div><p>Ideally it would have a similar look to my site, but that's not essential. : <a href="http://noelparknet.ning.com">http://noelparknet.ning.com</a></p>
<p>BTW- How can I tell if I'm using 2.0 or 3.0?</p>
<p>Thanks,</p>
<p>Rachella</p>
</div>Three Handy Facebook Tricks You May Not Knowhttps://creators.ning.com/forum/topics/three-handy-facebook-tricks-you-may-not-know2014-01-29T01:05:16.000Z2014-01-29T01:05:16.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>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 <a href="http://creators.ning.com/forum/topics/hack-to-embed-facebook-videos" target="_self">hack to embed facebook videos into your site</a>, 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.</p>
<h2>3 Handy Facebook Tricks that You Might Not Know</h2>
<h3>Trick One: Download Facebook Videos Quickly for Reuse on Youtube or Ning</h3>
<p>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. <a rel="nofollow" href="http://facebookvideoz.com/" target="_blank">Facebookvideoz</a> will help you download the videos you need to make the magic happen!</p>
<p><a href="http://facebookvideoz.com/" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556921?profile=original" class="align-full" width="500"></a></p>
<p> </p>
<h3>Trick Two: How to Invite All Friends to a Facebook Event</h3>
<p>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:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556942?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556942?profile=original" class="align-full" width="500"></a></p>
<ul>
<li>Go to your <strong>Event Facebook page</strong> and click on <strong>Invite friends</strong>.</li>
<li><strong>Scroll down your friend list until the end</strong> to ensure you have loaded all the friends you want to invite.</li>
<li>On Chrome, press <span class="key">CTRL</span> + <span class="key">SHIFT</span> + <span class="key">J</span> (Windows) or <span class="key">CMD</span> + <span class="key">Opt</span> + <span class="key">J</span> (Mac).</li>
<li><strong>Copy and paste</strong> this <code>javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()}</code> <strong>followed by an</strong> <span class="key">Enter</span> in the console space. You will then see all your friends name automatically ticked.</li>
</ul>
<p>By making sure that you mention and point to your network in the event description, you can draw much needed attention to your site</p>
<h3>Trick Three: Hide Your Last Name on a Facebook Profile</h3>
<p><br> 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.<br> <a href="http://storage.ning.com/topology/rest/1.0/file/get/556961?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556961?profile=original" class="align-full" width="500"></a></p>
<ul>
<li>Login to your Facebook account.</li>
<li>Grab any Indonesian proxy from this list <a target="_blank" rel="external" href="http://www.freeproxylists.net/id.html">here</a> then change your proxy on your browser.</li>
<li>On Chrome for PC head to <strong>Settings</strong> > <strong>Show advanced settings</strong> > under <strong>Network</strong>, click on <strong>Change proxy settings</strong> > click on <strong>Lan Settings</strong> and <strong>tick</strong> "Use Proxy Server for your LAN".</li>
<li>Fill in the address box with the proxy, and the port box accordingly. For example, if your proxy is 180.250.160.58:8080, "<strong>180.250.160.58</strong>" goes into the <strong>address box</strong> and <strong>"8080</strong>" is the <strong>port</strong>.</li>
<li>Tick on <strong>Bypass Proxy Server For Local Addresses</strong>. Press <strong>OK</strong>.</li>
<li>Now, go to your Facebook Account settings page, change the language to <strong>"Bahasa Indonesia"</strong> and save changes.</li>
<li><strong>Remove your Facebook last name</strong> and save changes again.</li>
<li>Once you have complete everything, revert to your original language.</li>
</ul>
<p></p>
<p>As always, if you need my help, <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">just let me know</a>. Enjoy!</p></div>3.0 Trick: Add Custom Icons Colors and CSS To Change Themhttps://creators.ning.com/forum/topics/3-0-trick-add-custom-icons-colors-and-css-to-change-them2014-01-27T00:49:50.000Z2014-01-27T00:49:50.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>A client asked me recently if the icon colors could be changed. Of course I knew there had to be a way to change or customize the icons that Ning serves us. So, this is the quick and dirty way to change the color of the icons. I added a single pixel stroke and a faint drop shadow to the icons to make them stand out. The original sprite image can be found <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557201?profile=original">sprite.png</a>.</p>
<p><strong><span class="font-size-5"> How to Over-ride the default icons on your Ning 3.0 network</span></strong></p>
<p>First Choose a Premade Sprite Image (right click and copy image URL or download and reupload to your own network through a text box)</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556944?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/556944?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556978?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/556978?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557022?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557022?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557066?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557066?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557118?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557118?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557159?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557159?profile=RESIZE_180x180" width="140"></a></p>
<p> </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p> *If you need another color, let me know the HEX# in the comments below and I'll make it and upload it for you.</p>
<hr>
<p>Second, now add the following CSS to your Advanced CSS box in Design studio and replace the red url with the sprite image you chose above. <em>Note:</em> If you'd like to use white icons with a single black 1px stroke, just copy and paste the following into your CSS as is.</p>
<p><span class="font-size-1">.icon {</span><br> <span class="font-size-1">background-image: url('<span style="color: #ff0000;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/557248?profile=original">http://storage.ning.com/topology/rest/1.0/file/get/557248?profile=original</a></span>')!important;</span><br> <span class="font-size-1">}</span></p>
<p> Now you are done! Enjoy your custom icons!</p>
<p>If you are interested in more tricks like this, take a look at the archive <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">on my profile</a>. If you need help with your network, drop me a line! Happy to help..</p></div>Google Authorship - Completed :Dhttps://creators.ning.com/forum/topics/google-authorship-completed-d2014-01-24T16:16:54.000Z2014-01-24T16:16:54.000ZRobert Spencerhttps://creators.ning.com/members/RobertSpencer<div><p><span class="font-size-3" style="font-family: helvetica;">hey guys, </span></p>
<p><span class="font-size-3" style="font-family: helvetica;">ive been sitting there faffing around all day trying to get this Google Authorship to work. And i have finally had some success.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/556954?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556954?profile=original" width="700" class="align-center"></a></span></p>
<p><span class="font-size-3" style="font-family: helvetica;">hopefully soon (within weeks) i should see my little google+ face next to some of my blog posts i have created on my site! :D and so will others. It is a bit of a vanity thing i think really, but its cool and i like this kind of stuff. If you want a presence online then having your face next to content on google is awesome, and if you can blog on your ning site and people see your face next to your blog then even better.<br></span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><span style="font-size: 12pt;">For anyone that doesnt know what I am going on about then </span><a rel="nofollow" href="https://support.google.com/webmasters/answer/1408986?hl=en" target="_blank" style="font-size: 12pt;">see this link on Google Authorship</a></span></p>
<p><span style="font-size: 12pt; font-family: helvetica;">If you want to do this too, then just follow these steps. Make sure you do this exactly as i have said below. I will come back and reply if anyone else has difficulty.</span></p>
<p></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Step 1</strong>. <a rel="nofollow" href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/?gpsrc%3Dogpy0%26tab%3DwX%26partnerid%3Dogpy0" target="_blank">Create a Google+ profile</a>. your gonna need one of these.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Step 2</strong>. <a rel="nofollow" href="https://support.google.com/plus/answer/2676340?hl=en-GB" target="_blank">Find out your id, or create a customisable URL instead.</a> (both are the same thing)</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Step 3</strong>. goto your ning network and edit your profile. http://<span style="color: #339966;">yourningnetwork.</span>com/profiles/settings/editProfileInfo</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">you need to add the following code into a text box on one of your profile questions.</span></p>
<p><span style="font-family: helvetica;" class="font-size-3"><a href="https://plus.google.com/<span style="color: #339966;">+YourGoogleProfileNumberOrID"</span> rel="me">My Google+ Profile</a></span></p>
<p><span style="font-family: helvetica;" class="font-size-3">Make sure you have the <span style="text-decoration: underline; color: #ff6600;">rel="me"</span>, without going into detail.. this basically tells google this is your profile.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Step 4.</strong> Grab your ning profile link. You can simply just go to this link <em>http://your domain.com/profiles</em> and it will take you to your profile page.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">example: <em><a rel="nofollow" href="http://YourDomain.com/profile/YourUserName">http://YourDomain.com/profile/YourUserName</a></em></span></p>
<p><span class="font-size-3" style="font-family: helvetica;">Grab this and place it in your "<strong><em>contributor to</em></strong>" section of your Google+ profile, make sure this too is <span style="text-decoration: underline;">a public link</span>. You can add a label (basically anchor text) and the url. </span></p>
<p><span style="font-family: helvetica;" class="font-size-3"><strong>Step 5.</strong> Make sure your name on your Google+ profile is the same as on your ning network!</span></p>
<p><span style="font-family: helvetica;" class="font-size-3">If it isnt then you need to change your ning full name field to the same as your Google+.</span></p>
<p><span style="font-family: helvetica;" class="font-size-3">You can add nicknames or <a rel="nofollow" href="https://support.google.com/plus/answer/3298988?hl=en" target="_blank">"other names" on google+</a> but i havnt tested this with the authorship.</span></p>
<p><span style="font-family: helvetica;" class="font-size-3"><strong>Step 6</strong>. getting there! keep going... Next step is to ensure you have an email address for your ning network something@yourdomain.com I had almost given up finding a solution for this, which there is basically no information on <strong>then i stumbled across something!</strong></span></p>
<p><a rel="nofollow" href="http://ningnames.com/help-center/faq-email-forwarding.aspx" target="_blank">http://ningnames.com/help-center/faq-email-forwarding.aspx</a></p>
<p><span class="font-size-3" style="font-family: helvetica;">(if you dont use ning names then look for email forwarding on your hosting area)</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">You need to follow exactly what this says. I basically made my email exactly the same as my gmail, but i dont think is neccessary as long as you can confirm anyemailaddress@YourDomain.com you should be fine.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">I just filled in the bottom box which says, <strong>basically <em>forward everything to this email address</em></strong> (i made this my gmail address). this also means if someone replies to a no-reply email you send then you will receive it too. cool!</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Step 7.</strong> <a rel="nofollow" href="https://plus.google.com/authorship" target="_blank">Then you need to goto this page</a> from google so you can verify your domain email address, so click the link and type in <span style="color: #008000;">YourName</span>@<span style="color: #008000;">YourDomain</span>.com, you should then get an email to your personal account (as ning names now forwards any email to this account) and you can verify this link. Nice!</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">This will add an email address to your <em><strong>'work'</strong></em> contact area of your google+ account.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">The final thing i hadnt done was realise <strong><span style="text-decoration: underline;">that i needed to make this email address a publicly available address</span></strong> so that the google bots could find it when i ran the check. The test was coming back as negative even though there was a valid email there until i did this. I just saved you literally 3 hours of faffing around there.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">To change this necessary setting just goto <strong><em>your google+ profile>about</em></strong> and <em><strong>edit the contact information</strong></em>. You have to make this work email <strong>Public</strong>. It will be on Your Circles by default i think.</span></p>
<p></p>
<p><span class="font-size-3" style="font-family: helvetica;"><strong>Final Step!</strong> If you then run the test, by going to this page and typing in a blog post url you have written, you will be able to see probably a failed test at this stage.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;"><a rel="nofollow" href="http://www.google.com/webmasters/tools/richsnippets">http://www.google.com/webmasters/tools/richsnippets</a></span></p>
<p><span class="font-size-3" style="font-family: helvetica;">Then.. you can type in your google+ url into the box below. I have screenshot this box, and it should show you whether there is a connection there or not.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">Fingers crossed i have done enough to start seeing my face on google search results for future posts. Maybe i am missing a step? I will soon find out.</span></p>
<p></p>
<p><span class="font-size-3" style="font-family: helvetica;">I hope this has made sense. Believe me it gets complicated in your mind if you think too much about it.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">Any questions? I will attempt to answer over this weekend.</span></p>
<p><span class="font-size-3" style="font-family: helvetica;">Good luck. (you may need it to make sense of my post :D)</span></p>
<p></p>
<p>---------------------------------------</p>
<p>Hey guys - i have an update! Woo-hoo today i received this email and it is good news. Authorship is complete! :D</p>
<p>Good luck to you all and i hope you can use this guide to pull it off too, so sorry it is so long winded :(</p>
<p></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556983?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556983?profile=RESIZE_1024x1024" width="500" class="align-center"></a></p></div>3.0 Hide Items When Signed Inhttps://creators.ning.com/forum/topics/3-0-hide-items-when-signed-in2014-01-18T16:41:47.000Z2014-01-18T16:41:47.000ZKoshttps://creators.ning.com/members/Kos<div><p>What if you have items on your 3.0 site which are there to attract and entice a new visitor, but you don't need/want them to show to an existing member?  Things like a testimonial, "about us" video, other banners or sliders?  You can hide them all to a signed in member (which allows more true content to be viewed)..........by inserting a "class" in each and using one custom code to hide them all.  Note:  This only works if the items are in a HTML/text box - not if in the above-header area.</p>
<p></p>
<p><strong>Place the following <span style="text-decoration: underline;">in front</span> of your HTML code.  It gives a "class name" to whatever content is placed between the <div></strong></p>
<p><br />
<div class="hideit"><br />
YOUR CONTENT OR BANNER CODE GOES HERE<br />
</div><br />
<br />
<br />
<strong>Place this in your Custom Co</strong><strong>de</strong> <strong>area</strong><strong>.  It will hide anything that has the "hideit" class:</strong></p>
<p><br />
<!-- Hidden areas when signed in --><br />
<script type="text/javascript"><br />
if (ning.CurrentProfile != null)<br />
x$('.grid-frame.sheet.section-html:has(.hideit)').hide();<br />
</script><br />
<!-- end hidden areas when signed in --></p>
<p></p>
<p>I have learned soooo much since being with Ning and I cannot thank all the generous Ning Creators enough.  I try to pay it forward in whatever small way I can.  Hat tip on this one to SweetPotato when he helped me <a href="http://creators.ning.com/xn/detail/4244211:Comment:1374546" target="_self">"hide" my slider</a> when a member is signed in.  This has opened up many more ideas for me (and believe me, I'm not a coder!)  I don't think this is any big design secret that I'm giving away here but to a <em>schlep</em> like me, it's gold!  *lol*</p>
</div>Killer Tip : How to add seach bar to your ning 3.0 network ?https://creators.ning.com/forum/topics/killer-tip-how-to-add-seach-bar-to-your-ning-3-0-network2014-01-14T21:12:44.000Z2014-01-14T21:12:44.000ZBernard Lamahttps://creators.ning.com/members/BernardLama<div><p>Hi NCs,</p>
<p>As you know Ning 3.0 doesn't have search bar like ning 2.0 yet. May be some people are desperately looking for a solution. So today I'm gonna show you few simple steps to add google custom search bar to your ning 3.0 network (Ning 2.0 has search bar at the top right corner within ning bar) and it works as good as default ning 2.0 search bar. So here we go.</p>
<p><strong>Step one:</strong> Click on this lick <a rel="nofollow" href="http://www.google.com/cse/manage/all" target="_blank">http://www.google.com/cse/manage/all</a> and <span>sign in to your Google or Gmail account, or create one if you don’t already have one. Once you’ve done that, head over to the Google Custom Search management page. Click on ADD button> Enter your network link under "<span>Sites to search" and hit CREATE button> now go to step two.</span></span></p>
<p><span><span><strong>Step Two:</strong> Copy and paste the following code into notepad. Go back to the google page you just created google custom search bar code and Click on GET CODE and copy the code. Now go back to the notepad and paste the google custom search bar code within <em><strong><p style="text-align:left;"> </strong></em>and<em><strong> </p>.</strong></em><strong> </strong></span></span></p>
<div style="padding: 5px; border: 1px solid black; background-color: #dadfe9;">
<p><!--CUSTOM GOOGLE SEARCH BAR by bernardmax2@gmail.com--><br> <div id="BL_search_bar" style="display:none;"><br> <p style="text-align:left;"></p>
<p>YOUR GOOGLE CUSTOM SEARCH BAR CODE GOES HERE</p>
<p></p><br> </div><br> <script type="text/javascript"><br> if (typeof(x$) != 'undefined') {<br> x$(".ningbar").prepend('<div id="inside_header"></div>');<br> var within_headerCode = document.getElementById('BL_search_bar');<br> var insideheaderCode = document.getElementById('inside_header');<br> insideheaderCode.innerHTML = within_headerCode.innerHTML;<br> }<br> </script><br> <style><br> input.gsc-search-button-v2 {<br> padding: 6px 20px 7px 20px;<br> }<br> .gsc-search-box-tools .gsc-search-box .gsc-input {<br> padding-right: 0px;<br> }<br> .gsc-control-cse {<br> background-color: hsla(0, 100%, 100%, 0);<br> border-color: transparent;<br> height: 33px;<br> padding: 0px 3px;<br> }<br> #inside_header {<br> width: 300px;<br> float:right;<br> }<br> </style><br> <!--CUSTOM GOOGLE SEARCH BAR by bernardmax2@gmail.com--></p>
</div>
<p><strong>Step Three: </strong>Now copy and paste the entire code into custom code <strong>(End of Page Code) </strong>and save the page. You are done.</p>
<p>Live preview <a href="http://ksnonline.ning.com" target="_blank">here</a></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556896?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556896?profile=original" width="575" class="align-full"></a></p>
<p> </p>
<p><span style="color: #ff0000;">If you are looking for more than this tip or want to hire me for any kind of Ning custom job or ning re-designing jobs, you can directly contact me @ bernardmax2@gmail.com</span></p>
<p><span><span style="color: #ff0000;">Follow me on facebook </span><a rel="nofollow" href="https://www.facebook.com/ningtips">https://www.facebook.com/ningtips</a></span></p></div>Simple way to assess how much messaging activity is happening across your network.https://creators.ning.com/forum/topics/simple-way-to-assess-how-much-messaging-activity-is-happening2014-01-13T17:03:08.000Z2014-01-13T17:03:08.000ZRobert Spencerhttps://creators.ning.com/members/RobertSpencer<div><p>This is how i see how much message activity is happening across my network.</p>
<p>When i write this i am speaking from a Ning 2.0 point of view, i have yet to it from a ning 3.0 yet but there is no reason why it wouldnt work if the URL structure is the same.</p>
<p></p>
<p>Goto Google analytics, and reporting.</p>
<p>Goto <strong>behaviour>all pages</strong></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556872?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556872?profile=original" width="216" class="align-center"></a></p>
<p></p>
<p>then you will have a drilldown by page of all your content, starting with the most popular posts. change the date range to the past year or a longer period of time.</p>
<p>The primary dimension by default is the "page" which is basically the page URL. So you can look for any URL here.</p>
<p>When someone checks their inbox they click a link which has a query string contained inside. Also if someone creates a new message or reads a message or replies to a message the word '<strong><span style="color: #339966;">inbox</span></strong>' is common throughout.</p>
<p>create a message: /profiles/message/new?folder=<strong><span style="color: #339966;">Inbox</span></strong>&page=1</p>
<p>reply to message: profiles/message/reply?id=0000000000&folder=<strong><span style="color: #339966;">Inbox</span></strong>&page=1</p>
<p>read message: profiles/message/show?id=0000000000&folder=<strong><span style="color: #339966;">Inbox</span></strong>&page=1</p>
<p>list messages: <span>/profiles/message/list<span style="color: #339966;"><strong>Inbox</strong></span></span></p>
<p><br> So you can see that if you search for the word <span style="color: #339966;"><strong>"Inbox"</strong></span> you will find all pages relating to the messaging.</p>
<p>So when you see it by month if you select a large data range then you will see months or instances of high message activity vs low activity. </p>
<p>Questions you should ask are..<br></p>
<p>what caused the high amounts of messaging activity?</p>
<p>what caused the site to become dead in those months for private messaging?</p>
<p><br> Private messaging is a sign that your community is buzzing behind the scenes, even if it might not be on the surface. </p>
<p>Its great to be able to see this activity but what can we do with it? </p>
<p>What promotes private messaging?</p>
<p></p>
<p>in my example i created a group to trade items. Once you complete your first successful trade you get to belong in the 'trusted traders group', which is a group of VIPS who have the luxury of trading the item second after they have received the item.. basically it was a mechanism which 'reduced' fraudulent trades.</p>
<p>Basically i used profile questions to allow users to use the advanced search facility to find codes that interested them.</p>
<p>I also had content which fed into peoples need for codes, this also attracted others from the web to join the community as we could provide a need other sites could not fulfill.</p>
<p>Here in the below example is message activity over this time, and also how the previous content before people landed on messages shows how successful this code trading group was in the uplift in messaging.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556895?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556895?profile=original" width="500" class="align-center"></a></p>
<p></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556926?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556926?profile=original" width="511" class="align-center"></a><span style="color: #0000ff;"><strong><span style="color: #000000;">Key:</span></strong><br> content promoting a need for codes, and allowing outsiders to find the site.<br> <br></span> <span style="color: #ff0000;">users searching other members and updating their own profiles before sending messages.</span></p>
<p></p>
<p><span style="color: #000000;">What would be a good way to increase private messaging on the site? Anyone had success? what does your analytics read on private message activity and why?</span></p>
<p></p>
<p></p></div>Show ads according to genderhttps://creators.ning.com/forum/topics/show-ads-according-to-gender2013-11-27T21:12:49.000Z2013-11-27T21:12:49.000ZPeruCoolhttps://creators.ning.com/members/PeruCool<div><p>Change what's in red by your code of advertising, be displayed at blogs, videos, forums and photo</p>
<p><strong><span style="color: #ff6600;">Code within a text box</span><br></strong></p>
<p><div style="margin: 0 auto; width: 100%;"><br> <div style="width: 70%; float: left; margin: 0px 0px 0px 0px;"><br> <div id="noticia" style="font-size: 11px;"></div><br> <div id="noticia2" style="font-size: 9px; color: #000000;"></div><br> </div><br> <div id="imagen" style="width: 15%; float: right; margin: 0px 0px 0px 0px;"></div><br> </div><br> <div style="clear: both;"></div></p>
<p></p>
<p><span style="color: #ff6600;"><strong>Within custom code</strong></span></p>
<p><span style="font-size: 13px;"><!-------------------------------------</span><strong style="font-size: 13px;">Ads for men</strong><span style="font-size: 13px;">--------------------------------></span></p>
<p><script type="text/javascript"><br> if ((ning.CurrentProfile.gender == "m")) {</p>
<p>x$("#noticia").html("<p align='right'></br><span style="color: #ff0000;">Hola</span>,<B> "+ning.CurrentProfile.fullName+"!</B><br><span style="color: #ff0000;">Encontramos amigas</span><br><span style="color: #ff0000;">entre</span> "+(ning.CurrentProfile.age - 3)+" <span style="color: #ff0000;">y</span> "+(ning.CurrentProfile.age + 3)+" <span style="color: #ff0000;">años</span><br><span style="color: #ff0000;">de tu localidad</span> "+ning.CurrentProfile.location+"</br>(<a href='http://<span style="color: #ff0000;"><strong>YOURWEB</strong></span>.com/profiles/members/search?name=&age_min="+(ning.CurrentProfile.age - 3)+"&age_max="+(ning.CurrentProfile.age + 3)+"&gender=f'><span style="color: #ff0000;">Agrégalas, Click Aquí</span></a>)</p>");</p>
<p>x$("#noticia2").html("</br><p align='left'><a href='http://<span style="color: #ff0000;"><strong>YOURWEB</strong></span>.com/photo?sort=mostPopular'><span style="color: #ff0000;">Ver Perfiles al Azar</span></a></p>");</p>
<p>x$("#imagen").html("<a href='http://<span style="color: #ff0000;"><strong>YOURWEB</strong></span>.com/profiles/members/search?name=&age_min="+(ning.CurrentProfile.age - 3)+"&age_max="+(ning.CurrentProfile.age + 3)+"&gender=f'><img src='http://storage.ning.com/topology/rest/1.0/file/get/11390619?profile=original' align='right' width='50' /></a>");</p>
<p>}<br> </script></p>
<p></p>
<p><!-------------------------------------<strong>Ads for <strong>women</strong> </strong>--------------------------------></p>
<p><script type="text/javascript"><br> if ((ning.CurrentProfile.gender == "f")) {<br> x$("#noticia").html("<p align='right'></br>Hola,<B> "+ning.CurrentProfile.fullName+"!</B><br>Encontramos amigos<br>entre "+(ning.CurrentProfile.age - 2)+" y "+(ning.CurrentProfile.age + 4)+" años<br>de tu localidad "+ning.CurrentProfile.location+"</br>(<a href='http://perucool.com/profiles/members/search?name=&age_min="+(ning.CurrentProfile.age - 2)+"&age_max="+(ning.CurrentProfile.age + 4)+"&gender=m'>Agrégalos, Click Aquí</a>)</p>");</p>
<p>x$("#noticia2").html("</br><p align='left'><a href='http://perucool.com/profiles/members/?sort=random'>Ver Perfiles al Azar</a></p>");</p>
<p>x$("#imagen").html("<a href='http://perucool.com/profiles/members/search?name=&age_min="+(ning.CurrentProfile.age - 2)+"&age_max="+(ning.CurrentProfile.age + 4)+"&gender=m'><img src='http://storage.ning.com/topology/rest/1.0/file/get/11390643?profile=original' align='right' width='50' /></a>");</p>
<p>}<br> </script></p>
<p></p>
<p><!-------------------------------------<strong>Ads for <strong>unregistered</strong></strong>--------------------------------><br> <script type="text/javascript"><br> if ((ning.CurrentProfile == null)) {</p>
<p>x$("#noticia").html("<p align='right'></br>El <B>Perú</B> es una gran Marca, Conoce la Comunidad mas Grande de Peruanos, Registrate y Comparte tu Orgullo.</br></p>");</p>
<p>x$("#noticia2").html("</br><p align='left'>Registro Gratuito, <a href='http://perucool.com/main/authorization/signUp'>Click Aquí</a></p>");</p>
<p>x$("#imagen").html("<img src='http://storage.ning.com/topology/rest/1.0/file/get/11390639?profile=original' align='right' width='50' />");</p>
<p>}<br> </script></p>
<p></p>
<p><strong>I hope to serve them for their networks.</strong></p>
<p>With creativity and learning basic sentences (conditional) of javascript, you can customize your message for both gender and age:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556680?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556680?profile=original" width="630" class="align-center"></a></p>
<p><br> Left .. Ad men ad women right ---</p>
<p>For example here shows pictures of girls if male, and redirects the delimiting members searching their age ..</p>
<p></p></div>Free WebRTC video chat embed!https://creators.ning.com/forum/topics/free-webrtc-video-chat-embed2014-01-06T17:44:10.000Z2014-01-06T17:44:10.000ZCherryhttps://creators.ning.com/members/Cherry<div><p>Wow, this year is off to a good start! I have been searching for a video chat that would work on tablets and smartphones. NO FLASH! I found it last night! You can find it on <strong><a rel="nofollow" href="https://ovx.me/" target="_blank">OpenClove</a> . </strong>It works well. We tested it out with computers first and then smartphones. my members are loving it. Some say they like it better than Skype. It's the best thing since sliced bread!</p>
<p>You only need to add one instance of it to your site. You can add more if you want, but it's not necessary. Members can create their own rooms by creating a unique passcode and passing it on to the members that they would like to talk to. I started out by embedding it into a page, but then I found a way to make a pop up version. I put the pop out in the ad space above the header on <a rel="nofollow" href="http://www.nos-ayudamos.com/" target="_blank">my site</a>. Feel free to come and try it out.</p>
<p>I'm attaching both codes here if you would like to use them. </p>
<p><strong> <a href="http://storage.ning.com/topology/rest/1.0/file/get/556887?profile=original" target="_self">OpenClove embed code</a></strong></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556862?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556862?profile=RESIZE_320x320" width="250" class="align-full"></a></p>
<p><a href="http://i.picasion.com/pic76/1e9ca570d7ce95d49b6e1e4cd21a00d4.gif" target="_blank"><img src="http://i.picasion.com/pic76/1e9ca570d7ce95d49b6e1e4cd21a00d4.gif" class="align-left" style="padding: 5px;"></a> <a href="http://storage.ning.com/topology/rest/1.0/file/get/556909?profile=original" target="_self">OpenClove pop up code</a></p>
<p>The Pop up code includes this gif image, but you can change it out for any image that you want. </p>
<p></p>
<p>I hope that you and your members enjoy this as much as what we are. </p>
<p></p></div>