|
How to create definitions for AME 2.5
by
16 May 2011
Rating:
 (1 vote
- 5.00 average) If you use the Automatic Media Embedder mod for vBulletin 3.8 and you want to learn how to make your own definitions this is a lesson. AME 2.5 Mod: AME 2.5 - Media Embedding for posts, sigs, vm's, groups and blogs Digital Jedi's Definitions: DJ's AMEs :: Media Definitions for AME 2.5 :: More Video, Twitter, Pinterest... You will need some knowledge of "regular expressions" to do this. I suggest reading over the introduction and some of the pages on this site: http://www.regular-expressions.info/tutorial.html. The more you know the easier it will be of course. Also I strongly strongly urge you to download http://www.regexbuddy.com/ There is a free trial but you will need to buy it if you continue to use it. This lesson will assume you have RegexBuddy. We will create a custom video definition, it will introduce you to the basics on which you can build. One of the simplest video sites out there is http://twitvid.com. A sample TwitVid URL is: http://www.twitvid.com/38UOE however http://twitvid.com/38UOE is also a valid link. The "38UOE" is the unique ID of each video. Before we start making a definition we need to make sure the site allowed their media to be embedded, not all do. Make sure they give you the option to have embed code on the video, which TwitVid does. Step 1: Copy and paste the URL of the video into the two main boxes of RegexBuddy. You should also make sure the "case insensitive" button is pressed because AME is not case sensitive.  The top box is going to be the actual regular expression, we will edit it. The lower box will remain the original URL. The goal will be to have the URL in the bottom box completely highlighted in yellow by the time we are done. "But it's already yellow." That is true, but as is it would only work for this 1 video. We need to edit it so it works for all TwitVid videos. The next step is we must "escape" all special characters in the regular expression (top box.) RegexBuddy will highlight special characters in light blue, and as you can see periods (.) are special characters in regular expressions. So are question marks (?). There are more but these are the most common. To "escape" a special character you simply put a backslash (\) in front of it. Go ahead and escape all the special characters in the top box:  As you can see all the blue highlighting has been removed now that all special characters are escaped. Now comes the "hard" part. We need to do something with that unique id. (38UOE). When we come to an ID theres really only one decision to make. \d - This will match any digit, 0 to 9 \w - This will match any "word" character which for regex can be any letter or number or underscore character. Since TwitVid uses both letters AND numbers in their IDs we must use \w. We now need to "build" on \w... Ultimately we will end up with: ([\w]+) Let me explain the why... First the parentheses ( and ). These tell the program you want to use the data matched inside them later in the program. In our case this means we want to use the data inside them in our embed code. You can have multiple sets of parentheses in a regular expression. You can access them in the embed code as $p1, $p2, $p3... etc... $p1 being the left most set of parentheses and incrementing from left to right. The square brackets [ and ]. Inside of these you put all the possible characters you need to match. Remember \w is a short-cut to say "match ANY letter or ANY number or an underscore. In TwitVid's case this is all you need. However if another site maybe had dashes (-) in their ID you would need to add that here. ([\w-]+) for example. If it had dashes and number signs and ampersands we'd use ([\w-#&]+). But back tot he case at hand, for TwitVid it's just ([\w]+). Last but least is the plus sign (+). The plus sign tells us that we can match 1 OR MORE of the characters specified in the square brackets. In our case that means it can match 1 or more letters OR numbers (or underscores.) To better illustrate the + sign edit the regex in RegexBuddy. Replace 38UOE with ([\w]).  You'll see only the "3" is highlighted in the bottom box. This is because without the plus sign our regex will only match the 1st character in our ID. Go ahead and put that + back in now: ([\w]+).  Now you will see the whole line is highlighted. Remember the + means to match 1 OR MORE characters in the square brackets. If you used an asterisks (*) instead that would mean ZERO OR MORE of the characters in the square brackets. Well it looks like we're done, right? At least with the regex, right? Sorry... not yet. Remember there is a second URL possibility for TwitVid, the one without the "www" in the URL: http://twitvid.com/38UOE Go paste that URL in the bottom box of regex buddy above or below the current URL:  As you can see none of that second URL is highlighted. How can we get 1 regex to match both URLs? The answer here lies in the * I just told you about. We can put the "www" inside square brackets and follow it by an * and that will tell the regex it can match either with or without the www. Actually we need to put the period after www in the brackets as well, and that period is escaped so all in all we need to put www\. into brackets. Replace www\. with [www\.]*  Now you can see both URLs are highlighted. (RegexBuddy alternates highlight colors.) So now we are finally done with the "hard part" of this exercise- but we're not done. Now we have to put this info into the AME Settings and edit the embed code. In your Admin CP go to AME CP and then "Add a New Definition."  Title and Description are up to you but I'd suggest something like: TwitVid and "TwitVid Video." The Unique Key is again up to you- just make sure you don't use one already in use on your forum. I'd go simple again like: twitvid. Display Order: Totally up to you Active: Yes Contain: Yes Regular Expression: Here we copy the regex from the top box of RegexBuddy. Replacement: For now paste in the Embed code provided by TwitVid for this video: Code:
<iframe title="Twitvid video player" class="twitvid-player" type="text/html" width="480" height="360" src="http://www.twitvid.com/embed.php?guid=38UOE&autoplay=0" frameborder="0"></iframe> Turn the above code into: Code:
<iframe title="Twitvid video player" class="twitvid-player" type="text/html" width="480" height="360" src="http://www.twitvid.com/embed.php?guid=$p1&autoplay=0" frameborder="0"></iframe> Code:
<iframe title="Twitvid video player" class="twitvid-player" type="text/html" width="$ameinfo[width]" height="$ameinfo[height]" src="http://www.twitvid.com/embed.php?guid=$p1&autoplay=0" frameborder="0"></iframe> The Extraction Information options can remain blank, those are only needed for advanced definitions which are rarely needed.  Now hit SAVE and you should have made your first working custom AME definition! Let's check it out in action: http://www.juot.net/forums/showthread.php?p=1042022#post1042022 
|