Announcement

Collapse
No announcement yet.

Tweet BBCode

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Tweet BBCode

    One way to integrate social media with forums is to embed tweets from Twitter into forum posts.

    Go to AdminCP > Custom BB Codes > Add New BB Code and enter the following information:

    Title: Tweet
    BB Code Tag Name: tweet
    Replacement: (Updated code as of 02/26/22 to fix issue for Tweet URL with querystring parameters)
    Code:
    <div data-tweet-param="{param}"></div><script>(function(){function k(a,c){var d=Element.prototype;return(d.matches||d.webkitMatchesSelector||d.mozMatchesSelector||d.msMatchesSelector||function(a){return-1!==[].indexOf.call(document.querySelectorAll(a),this)}).call(a,c)}function g(a,c){return a?k(a,c)?a:"HTML"===a.tagName?null:g(a.parentNode,c):null}var b,u=`{param}`.replace(/<br\s*[\/]?>/gi, '').replace(/\r|\n/g,'').replace(new RegExp(unescape('%26amp;'), 'g'),unescape('%26')),a,e=document.getElementsByTagName("script"),e=e[e.length-1],f;if(/^http[s]*:\/\//.test(u)){a=document.createElement("a");a.href=u;b=a.pathname.substring(a.pathname.lastIndexOf("/")+1)}f=e.parentNode.querySelector('[data-tweet-param*="'+u+'"]:empty');(a=g(f,".js-post"))?a=a.getAttribute("data-node-id"):(a=g(f,".js-post-sm"),a=a?a.getAttribute("data-nodeid"):Math.floor(Math.random()*10000));a="t_"+(a||"")+"_"+b;window[a]=function(a){f.innerHTML=a.html;a=f.getElementsByTagName("script");for(var c,d=document.getElementsByTagName("head")[0],b=0;b<a.length;b++)a[b].src?(c=document.createElement("script"),c.src=a[b].src,d.appendChild(c)):eval(a[b].textContent)};var h=document.createElement("script");h.src="https://api.twitter.com/1/statuses/oembed.json?id="+b+decodeURIComponent("%26")+"callback="+a;e.parentNode.appendChild(h)})();</script>
    Example: [tweet]TweetUrlOrTweetIdHere[/tweet]
    Other Options: Select Yes to all starting from "Remove Tag If Empty" option (for Button Image option, you could specify image path. If specified, a new button for this BB Code will appear in the editor)

    Demo:
    This tweet:
    [tweet]https://twitter.com/noypiscripter/status/758114543033647104[/tweet]

    or just using the Twitter Post ID

    [tweet]758114543033647104[/tweet]

    will be rendered as:



    To get the Tweet URL, go to a tweet on Twitter, click on the 3 dots icon below the tweet, choose "Copy link to Tweet" and then copy the URL.

    Other sample:
    glennrocksvb
    Founder/Coder
    Last edited by glennrocksvb; 02-26-2022, 05:38 PM. Reason: Updated Replacement Code to fix issue for Tweet URL with querystring parameters
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

    #2
    Can I do this even if I'm currently using cloud?

    What's the best way to get 21X20 twitter button image?

    I'm a rookie, so please excuse my ignorance..

    Comment


      #3
      Originally posted by vhforum View Post
      Can I do this even if I'm currently using cloud?

      What's the best way to get 21X20 twitter button image?

      I'm a rookie, so please excuse my ignorance..
      Yes you can do this in vBCloud.

      You can download this Twitter icon: (Right-click > Save image as...)

      and then upload it in the File Upload Manager (not sure if name is accurate) in vBCloud AdminCP. Then copy the generated link of the uploaded image and paste it into the Button Image field in BB Code Manager.

      BTW, I've set the Button Image for the Tweet BB Code in this forum. See how it looks in the Advanced Editor.
      glennrocksvb
      Founder/Coder
      Last edited by glennrocksvb; 09-16-2018, 08:27 PM.
      Helpful? Donate. Thanks!
      Fast VPS Host for vBulletin: A2 Hosting & IONOS

      Comment


        #4
        Thanks Glenn! Got it working! Bought you a coffee..

        Comment


          #5
          Thansk
          vhforum

          Enjoying your coffee now...


          glennrocksvb
          Founder/Coder
          Last edited by glennrocksvb; 05-11-2017, 11:33 AM.
          Helpful? Donate. Thanks!
          Fast VPS Host for vBulletin: A2 Hosting & IONOS

          Comment


            #6
            PNG (20x20) :

            Or SVG (20x20) :

            PNG (16x16) :

            Or SVG (16x16) :

            For people who want the black
            lefoureur
            Junior Member
            Last edited by lefoureur; 08-06-2016, 12:14 AM.

            Comment


            #7
            Can we get this done for the new social media site Gab.ai?

            Comment


              #8
              Originally posted by vhforum View Post
              Can we get this done for the new social media site Gab.ai?
              Does that have an embed code feature where you can embed posts outside of their site?
              Helpful? Donate. Thanks!
              Fast VPS Host for vBulletin: A2 Hosting & IONOS

              Comment


                #9
                Originally posted by glennrocksvb View Post

                Does that have an embed code feature where you can embed posts outside of their site?
                I don't know, they are a newer site. They just made it possible to get links for each actual post so I figured you could?

                There is currently a waiting list to join the site, I could PM you some account details to check out the site if you'd like.

                Thanks!

                Comment


                  #10
                  Ok great.. got it working..

                  Comment


                    #11
                    Is there a way to have it embed just by posting the link.. without the tags?

                    Comment


                    #12
                    Something wrong has happened.. I got it working as evident.. but I must have changed something somewhere.. it won't show new ones when posted..


                    https://www.boxingworld.news/forum/boxing

                    Comment


                      #13
                      Try clearing system cache in AdminCP.
                      Helpful? Donate. Thanks!
                      Fast VPS Host for vBulletin: A2 Hosting & IONOS

                      Comment


                        #14
                        I just tried it and no change.. I don't understand.. I can preview it fine.. just when I post etc..

                        Comment


                          #15
                          When you paste the Tweet URL into the editor, make sure it's not pasted as link. It should be pasted as plain text. Chrome (or probably other browsers) has a feature 'Paste as plain text' in the context menu when you right click on the editor.
                          Helpful? Donate. Thanks!
                          Fast VPS Host for vBulletin: A2 Hosting & IONOS

                          Comment

                          Latest Topics

                          Collapse

                          Working...
                          X