Other YouTube Subscriber Button BBcode

[Damnlag]

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]

<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

 

[Liam W]

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

 

[Damnlag]

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.

 

[TickTackk]

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:

   <!--XenForo_Require:JS-->

8. Replace with
   

   <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

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

 

[Damnlag]

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:

   <!--XenForo_Require:JS-->

8. Replace with
   

   <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

    <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? ⓢ

 

[TickTackk]

Where are you saving the main icon file? icon file must be in png/gif/bmp/jpg/jpeg format only.

 

[Damnlag]

Where are you saving the main icon file? icon file must be in png/gif/bmp/jpg/jpeg format only.

http://damnlag.com/forum/styles/youtubegaming/xenforo/icons/subscriber-icon.png

 

[TickTackk]

Add this to extra.css

.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;
}

 

[Damnlag]

Add this to extra.css

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

 

[TickTackk]

Not sure about any of those issues, sorry.

 

[Damnlag]

Not sure about any of those issues, sorry.

Alright, thanks for all the help!