silly - FORUM - Ning Creators Social Network2024-03-28T19:22:37Zhttps://creators.ning.com/forum/topics/feed/tag/sillySilly Simple Solutions #5: Inject Youtube Subscribe Button under Videos in Ninghttps://creators.ning.com/forum/topics/silly-simple-solutions-5-inject-youtube-subscribe-button-under-vi2020-08-19T20:46:50.000Z2020-08-19T20:46:50.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>So let's say you have a <a title="Youtube channel for Land Surveyors" href="https://www.youtube.com/channel/UCbdUk6U6dLfLr8XDtpWvuLA" target="_blank">Youtube Channel</a> for your community and you have a <a title="Land Surveyors Video Tutorials" href="http://landsurveyorsunited.com/video" target="_blank">Lot of Videos</a> embedded by members throughout your community. Let's also say that you are trying to get your subscriber numbers up so that you can monetize your Youtube Channel (you need 1000 subscribers). Here is a silly simple solution for injecting your Youtube Subscribe button under every video in your Ning community. </p><p><strong>Here is what we are making:</strong></p><p><a href="https://landsurveyorsunited.com/video/autocad-tutorials-on-how-to" target="_blank"><img class="align-center" src="{{#staticFileLink}}7531213478,RESIZE_710x{{/staticFileLink}}" alt="inject youtube subscribe button on ning" width="621" /></a></p><p><strong>Here is what you need to do it from scratch:</strong></p><p><a href="https://developers.google.com/youtube/youtube_subscribe_button" target="_blank">Where to go to configure your button</a></p><p><a href="http://jensocial.com/page/ningcodegenerator" target="_blank">Jen Social's Ning code Injector</a></p><p><span style="text-decoration:underline;font-size:18pt;"><strong>Step One:</strong></span></p><p><strong>Plug your youtube channel ID into the Button Configurer and you will get some code like this:</strong></p><p><script src="https://apis.google.com/js/platform.js"></script></p><p><div class="g-ytsubscribe" data-channelid="UCbdUk6U6dLfLr8XDtpWvuLA" data-layout="full" data-theme="dark" data-count="default"></div></p><p> </p><p><strong>Add this first part to your custom code top section : </strong> <script src="https://apis.google.com/js/platform.js"></script></p><p> </p><p><span style="text-decoration:underline;font-size:18pt;"><strong>Step Two:</strong></span></p><p><strong>Use Jen Social's Ning code injector and paste the second part of the code above into the box and configure to load the code AFTER this element under every video: </strong></p><p><strong>this is the CSS element you need: </strong> div.videoDetailPage-getEmbedCode_wrap</p><p><a href="http://jensocial.com/page/ningcodegenerator" target="_blank"><img class="align-center" src="{{#staticFileLink}}7531288273,RESIZE_710x{{/staticFileLink}}" alt="7531288273?profile=RESIZE_710x" width="710" /></a></p><p> </p><p><span style="text-decoration:underline;font-size:18pt;"><strong>Step Three: </strong></span> </p><p>Paste the generated code into your Custom Code bottom section. Note you can simply replace my channel ID with your own in the following block and it should work (just make sure you add the first part of code above to the top of your custom code page and the following code to the bottom of custom code page).</p><p><script type="text/javascript"><br /> if (typeof(x$) != 'undefined') {<br /> x$("div.videoDetailPage-getEmbedCode_wrap").after('<div class="g-ytsubscribe" data-channelid="UCbdUk6U6dLfLr8XDtpWvuLA" data-layout="full" data-theme="dark" data-count="default"></div>');<br /> }<br /> else{<br /> }<br /> </script></p><p> </p><p>Now go look at any video on your Ning community and your subscribe button should load there. Enjoy! <a href="https://creators.ning.com/members/JFarrow" target="_blank">Let me know</a> if you need help with your Ning Community!</p><p> </p><p><span style="text-decoration:underline;font-size:24pt;"><strong>More Silly Simple Solutions:</strong></span></p><p><span style="font-size:14pt;"><a class="gs-title" dir="ltr" href="https://creators.ning.com/forum/topics-1/silly-simple-solutions-1-doing-stuff-with-pdfs"><strong>Silly</strong> Simple Solutions #1: Doing stuff with PDFs </a></span></p><p><span style="font-size:14pt;"><a class="gs-title" dir="ltr" href="https://creators.ning.com/forum/topics-1/silly-simple-solutions-2-finding-posts-for-weekly-broadcast"><strong>Silly</strong> Simple Solutions #2: Finding Posts for Weekly Broadcast</a></span></p><p><span style="font-size:14pt;"><a class="gs-title" dir="ltr" href="https://creators.ning.com/forum/topics-1/silly-simple-solutions-3-inline-style-images-round-or-oval"><strong>Silly</strong> Simple Solutions #3: Inline Style Images Round or Oval </a></span></p><h3 class="entry-title"><span style="font-size:14pt;"><a href="https://creators.ning.com/forum/topics-1/silly-simple-solutions-4-embed-commenting-under-videos-ning-3">Silly Simple Solutions #4: Embed Commenting Under Videos Ning 3</a></span></h3><p> </p></div>