Other YouTube Subscriber Button BBcode

Damnlag

Member
I need a custom bbcode created for a YouTube Subscriber button. Willing to pay $10.

A user clicks the button from the text editor box on signatures/posts, the person enters their YouTube username, wraps it in tags like [YTID] [/YTID] and shows the following box using the code below.

[YTID]username[/YTID]

b5ffb19d4598d30eca4584978224cf3d.png

Code:
<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channel="username" data-layout="full" data-count="default"></div>

The username in the code needs to be replaced with the users username that they enter.

The YouTube subscribe button page on google if needed - https://developers.google.com/youtube/youtube_subscribe_button
 
You could do this easily without extra development...

Put the script tag in the page_container_js_head template, then create a custom bbcode with the HTML replacement as the div and the content in the username tag...

Liam
 
You could do this easily without extra development...

Put the script tag in the page_container_js_head template, then create a custom bbcode with the HTML replacement as the div and the content in the username tag...

Liam

Unless your willing to give me step by step instructions, I have no knowledge on how exactly to do everything required to create it.
 
  1. Login to ACP
  2. Switch the tab to Appearance
  3. Click Styles on the left hand side
  4. Click on Templates for your skin
  5. In the small search box where it says "Filter items", search for "page_container_js_head"
  6. Click on the template name that is having color, red.
  7. Find:
    HTML:
    <!--XenForo_Require:JS-->
  8. Replace with
    HTML:
    <script src="https://apis.google.com/js/platform.js"></script>
    <!--XenForo_Require:JS-->
  9. Click on "Save All Changes".
  10. Click on "Home"
  11. Click on Custom BB Codes
  12. Click on Add New Custom BB COde
  13. Enter BB Code Tag as per your requirement
  14. Add Title as per your requirement
  15. Under HTML Replacement, set it to
    HTML:
    <div class="g-ytsubscribe" data-channel="{text}" data-layout="full" data-count="default"></div>
  16. Switch to Advanced Options
  17. Check "Disable similes", "Disable line break conversion", "Disable auto-linking" and "Stop parsing BB code"
  18. Finally enter a icon path and click on save cusotm bbcode.
 
  1. Login to ACP
  2. Switch the tab to Appearance
  3. Click Styles on the left hand side
  4. Click on Templates for your skin
  5. In the small search box where it says "Filter items", search for "page_container_js_head"
  6. Click on the template name that is having color, red.
  7. Find:
    HTML:
    <!--XenForo_Require:JS-->
  8. Replace with
    HTML:
    <script src="https://apis.google.com/js/platform.js"></script>
    <!--XenForo_Require:JS-->
  9. Click on "Save All Changes".
  10. Click on "Home"
  11. Click on Custom BB Codes
  12. Click on Add New Custom BB COde
  13. Enter BB Code Tag as per your requirement
  14. Add Title as per your requirement
  15. Under HTML Replacement, set it to
    HTML:
    <div class="g-ytsubscribe" data-channel="{text}" data-layout="full" data-count="default"></div>
  16. Switch to Advanced Options
  17. Check "Disable similes", "Disable line break conversion", "Disable auto-linking" and "Stop parsing BB code"
  18. Finally enter a icon path and click on save cusotm bbcode.

Thank you very much!

Although, I'm having trouble adding an icon or even this text icon now. How could I add this to the image box on the editor? ⓢ
 
Add this to extra.css
Code:
.redactor_btn_container_custom_ytid a,
.redactor_btn_container_custom_ytid a:hover
{
    background-image: url('http://damnlag.com/forum/styles/youtubegaming/xenforo/icons/subscriber-icon.png') !important;
    background-repeat: no-repeat;
    background-position: center center;
}
 
Add this to extra.css
Code:
.redactor_btn_container_custom_ytid a,
.redactor_btn_container_custom_ytid a:hover
{
    background-image: url('http://damnlag.com/forum/styles/youtubegaming/xenforo/icons/subscriber-icon.png') !important;
    background-repeat: no-repeat;
    background-position: center center;
}

Alright, it now shows up. However, the image disappears when you hover over it.

And what's the trick to adding it to the signature editor? It doesn't show at all in that.
 
Back
Top Bottom