Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Jun 2014
    Posts
    4

    Question Dynamically change data-identifier for a like btn

    Hello!

    I've bought the VIP version of the Like Btn and I'd like to do the following:

    - I have one like button on my page - it's going to be displayed in a lightbox:

    Code:
    <p id="likebtn" class="likebtn-wrapper" data-style="drop" data-lang="auto" data-dislike_enabled="false" data-icon_dislike_show="false" data-identifier="setfromjs" data-unlike_allowed="true" data-popup_position="bottom" data-popup_enabled="false" style="margin-top:30px"></p>
    <script type="text/javascript" src="//w.likebtn.com/js/w/widget.js" async="async"></script>
    - I'm changing the data-identifier according to the item currently displayed in the lightbox (data-identifier="item10" etc)

    - The problem is that the code doesn't take into consideration that the data-identifier was changed dynamically. So regardless of the data-identifier, it's the same like for all items.

    ---

    So is there a way to get this to work? Without having to create ~50 like buttons - one for each item I'd like to display in the lightbox?

    Thank you in advance!


  2. #2
    Admin LikeBtn's Avatar
    Join Date
    Sep 2011
    Posts
    320
    Call the following function every time you change identifier:
    if (typeof(LikeBtn) != "undefined") {
    LikeBtn.init();
    }
    http://likebtn.com/en/faq#ajax


  3. #3
    Junior Member
    Join Date
    Jun 2014
    Posts
    4

    Question

    Thank you for your reply! But unfortunately that's not working for me.

    I have the following code:

    Code:
    $( "#likebtn" ).attr( "data-identifier", "item" + item.index );
    
    if (typeof(LikeBtn) != "undefined") {
    	console.log("asd init"); // I can see this in the web console
    	LikeBtn.init();
    }
    I can also see with the inspector that the data-identifier is changed properly.

    What else could I try? Or why wouldn't it work?

    I've also tried
    Code:
    $( "#likebtn" ).init();
    Thank you!


  4. #4
    Admin LikeBtn's Avatar
    Join Date
    Sep 2011
    Posts
    320
    Could you please provide a link to the page or send it to support@likebtn.com


  5. #5
    Junior Member
    Join Date
    Jun 2014
    Posts
    4
    Ok, thank you! I've sent an email because the page isn't officially launched yet.


  6. #6
    Admin LikeBtn's Avatar
    Join Date
    Sep 2011
    Posts
    320
    You need to do the following:
    1) Remove current Like Button: $("#likebtn").remove();
    2) Insert the code of the Like Button with the new identifier.
    3) Initialize the button:
    if (typeof(LikeBtn) != "undefined") {
    LikeBtn.init();
    }


  7. #7
    Junior Member
    Join Date
    Jun 2014
    Posts
    4
    It works! Thank you very much for your help!


  8. #8
    Junior Member
    Join Date
    Jan 2016
    Posts
    2
    Hello, I'm trying to do this in PHP using this approach...

    First, in the PHP file for the page itself, I set a variable with the name:
    <?php $button_unique_identifier = "this_button_name"; >

    And then use it in the <span> like this:
    <!-- LikeBtn.com BEGIN -->
    <span class="likebtn-wrapper" data-theme="greenred" data-i18n_like=" Like" data-identifier="<?php $button_unique_identifier; ?>" data-show_like_label="false" data-counter_zero_show="true" data-popup_disabled="true" data-site_id="568df3b47d9c0c711b4c05a2"></span>
    <script>(function(d,e,s){if(d.getElementById("like btn_wjs"))return;a=d.createElement(e);m=d.getEleme ntsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode .insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
    <!-- LikeBtn.com END -->

    When I inspect the code, it shows that the value of data_identifier is "". Is it a mistake in my PHP or does the button not allow this? Thanks.


  9. #9
    LikeBtn Support support's Avatar
    Join Date
    Jan 2015
    Posts
    121
    Hello,

    Try to use the following code:

    <!-- LikeBtn.com BEGIN -->
    <span class="likebtn-wrapper" data-theme="greenred" data-i18n_like=" Like" data-identifier="item_1" data-show_like_label="false" data-counter_zero_show="true" data-popup_disabled="true" data-site_id="568df3b47d9c0c711b4c05a2"></span>
    <script>(function(d,e,s){if(d.getElementById("li ke btn_wjs"))return;a=d.createElement(e);m=d.getEleme ntsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode .insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
    <!-- LikeBtn.com END -->

    Also you can add like button to your website using shortcode: https://likebtn.com/en/wordpress-like-button-plugin.


  10. #10
    Junior Member
    Join Date
    Jan 2016
    Posts
    2
    Figured out the problem, I just had a problem with the PHP within the LikeBtn code. Rather than using ="<?php $button_unique_identifier; ?>" I should have been using ="<?php echo $button_unique_identifier; ?>". It works great now. Thanks!

    Quote Originally Posted by adam5 View Post
    Hello, I'm trying to do this in PHP using this approach...

    First, in the PHP file for the page itself, I set a variable with the name:
    <?php $button_unique_identifier = "this_button_name"; >

    And then use it in the <span> like this:
    <!-- LikeBtn.com BEGIN -->
    <span class="likebtn-wrapper" data-theme="greenred" data-i18n_like=" Like" data-identifier="<?php $button_unique_identifier; ?>" data-show_like_label="false" data-counter_zero_show="true" data-popup_disabled="true" data-site_id="568df3b47d9c0c711b4c05a2"></span>
    <script>(function(d,e,s){if(d.getElementById("like btn_wjs"))return;a=d.createElement(e);m=d.getEleme ntsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode .insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
    <!-- LikeBtn.com END -->

    When I inspect the code, it shows that the value of data_identifier is "". Is it a mistake in my PHP or does the button not allow this? Thanks.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •