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

    Free Mod 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:
    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!
    Buy me a coffeePayPal QR Code
    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.
      Last edited by glennrocksvb; 09-16-2018, 08:27 PM.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      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...


          Last edited by glennrocksvb; 05-11-2017, 11:33 AM.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          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
            Last edited by lefoureur; 08-06-2016, 12:14 AM.

            Comment


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Just curious if we are allowed to use black Twitter logo per Twitter's branding guidelines?

            • lefoureur
              lefoureur commented
              Editing a comment
              It's a good question, but given that uses bootstrap a black version, I do not think it's a problem

              (Http://bestbootstrapthemes.com/files...ns-webfont.jpg)

            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Maybe it's ok. Probably what they stated in their guidelines is not strictly implemented?
              Originally posted by Twitter
              And never show the Twitter logo in black or any other colors.
              Okay, we do have one exception: some limitations with color printing may apply. This is the only time the logo is permitted to be displayed in black with prior permission from Twitter.

            #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!
              Buy me a coffeePayPal QR Code
              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


                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      No, that's not possible. Especially on vBCloud.

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


                    Comment


                      #13
                      Try clearing system cache in AdminCP.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      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!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"