Nos, ez a post arról fog szólni, hogy hogyan is hostoltam a saját blogomat.

A hosztom a 000webhost volt. Nem a leggyorsabb, de zökkenőmentes, sok tárhelyel, MySQL és PHP supportal. Kezdőknek és profiknak is egyaránt sok-sok hasznos PHP alapú eszközt nyújt a szájt elleprzése érdekében. (Ilyen pl. a PHPMyAdmin felület). Webes fájlkezelőből van pl. 2. Az egyik a szokásos, a másik egy WinXP kinézetű. Kizárólagh akkor, ha nincs kedved az FTP-n molyolni. A feltöltés elég gáz volt. Csak FTP-n, az oldal vizuális felületén gyorsan ment minden. Asszem 2 GB tárhelyem volt. Egy accounton több tárhelyed is lehet. Mind ingyen, Szóval ha ügyes vagy, akkor össze tudod linkelni a tárhelyeket, ezzel megtöbbszörözve az eredeti méretet. Ez csak egy érdekesség.

Blogmotornak a Flatpress-t használtam. Szuper engine, jópár fontos pluginnal, de ezekből nincsen több úgy ca. 40-nél. Ami a legjobb benne – és erre is volt kihegyezve-, az a BBcode-ban való posztírás. Nekem állatira bejött, -és akár hiszitek, akár nem – Mindig ilyen blogról álmodoztam. Amúgy az már a dolog másik fele, hogy a BBcode íráson kívül nem sok mindenre alkalmas, és pl. egy kép beszúrása elég macerás. Vannak ezt megkönnyítő eszközök, de akkoris, egy [img=images/pelda.jpg scale=50% float=left] nem egyenértékű 2-3 kattintással. Van hozzá WYSIWYG szövegszerkesztő plugin is, amit a wordpress alapján kreáltak. Lassú volt, nekem nem tetszett. Akkor még ottvan az is, hogy videókat csak yt-ról lehet berakni, és azokat is macerás. Legalább is én szenvedtem vele.
Róla még annyi érdekességet: Az “Adatbázis nélküli WordPress”-ként is szokták emlegetni, ami azért valljuk be messze nem fedi a valóságot. De azért hasonló DB nélküli motorokhoz képest elég sok fícsört tartalmaz alapból, és nem győzöm hangsúlyozni, hogy a pluginek is jópofák. És a BBcode is isteni.

A BBcode-ról: A BBcode-t Bulletin Board code-nak is szokták nevezni, és azért hozták létre, hogy a fórumok stílusát a júzerek le tudják megtörni különböző HTML kódokkal. Ez nyújt védelmet a különböző hekkelések ellen is. Miért is volt jó ez akkor, amikor tényleg limitálja a lehetőségeidet? Hát egyszerűen azért, mert egyszerű! Könnyen tanulható, és ami a legfontosabb: működik!
Ja, és tényleg semmit nem lehet elbaszni. Kivéve egy plugint, ha szarul van megírva. Arról mondjuk nem a BBcode tehet. Lényeg a lényeg: A BBcode jó. Hol találkozhatsz BBcode-dal? A leggyakoribb – mint azt már említettem -, a fórumokon. Különösen a phpBB motoros fórumokon.

Hirtelen most ennyi jutott eszembe, majd legközelebb jövök többel.

http://www.phpbb.com/community/faq.php?mode=bbcode

Buscando esto weeeee

[url=http:// ruta... ][img] pic.. [/img][/url]

Viele Blogger benutzen nicht WordPress, sondern Textpattern als Blog-Engine. Ähnlich wie BBCode in Foren benutzt wird, nutzt Textpattern eine eigene Auszeichnungssprache für Formatierungen und Links, genannt Textile. Da ich mir diese Befehle nie merken kann, habe ich mir in dem Firefox-AddOn BBCode eigene Tags eingerichtet, mit denen man die Textile/Textpattern-Formatierungen bauen kann.

„_value_“ steht dabei für den markierten Text, „_clipboard_“ für die Zwischenablage:

TXP Linktext
“_value_”:_clipboard_

TXP Link
“_clipboard_”:_value_

TXP fett
*_value_*

TXP kursiv
__value__

TXP Zitat
??_value_??

TXP durchgestrichen
-_value_-

TXP hinzugefügt
+_value_+

TXP hochgestellt
^_value_^

TXP tiefgestellt
~_value_~

[BBCode-Plugin via Perun]

Hello everyone,

As you may well know, SMF 2.0 is still in its pre-release stage, as the current version installed on Ichiraku is Release Candidate 1.1. As it’s not the final release yet, we are expecting some bugs to crop up once in a while, so we are very, very critical of the system’s performance and are always on the lookout for issues that may manifest as users utilize it for their purposes.

A somewhat frustrating bug has appeared for users of Firefox, Safari, and Google Chrome (we have tested it on Internet Explorer 8 and Opera 9.6 without any error, so if you are users of these browsers, this issue does not concern you). This is a rather annoying problem to users of the SMF Rich Editor, commonly called WYSIWYG (what you see is what you get). This is a new feature of SMF 2 that enables users not familiar with BBCode like [img] or [b] to format their posts and see in real-time, within the posting window, what their posts would look like when submitted. However, a problem with the coding, as described in this article, there is an acknowledged bug in SMF 2.0 that will be addressed in the second Release Candidate of SMF 2. To quote:

The new lines thing is a bug in Webkit.

Webkit wraps lines in iframes in <divs>

To see the entire article, click THIS.

Basically, what happens is that when you try to format an entire post with several line breaks, SMF’s WYSIWYG editor automatically cuts the line breaks from them and jams them all together in one big paragraph.

We have already submitted a report to the developers regarding this issue.

A few images of the problem using Firefox:

Test message using single line of text.

As you can see here, you can format your text with as many combinations of style as you can think of, and it would appear as nice as it appears in the window AS LONG AS THERE IS NO LINE BREAK. However, when line breaks are involved, this:

Test message, with several line breaks

You will see that all line breaks were removed, and that there was an additional [/] after your text.

We have found however that you can actually work around this issue by inputting one whole block of text, formatting them, and then dividing them into paragraphs. The problem seems to be triggered by typing several paragraphs then formatting them afterward.

Again we are working with the SMF developers to fix this issue, so until the issue is fixed, bear with us. Otherwise, use Opera or Internet Explorer for the meantime if you want to use the WYSIWYG editor without complications, or manually format your posts using BBCode or using WYSIWYG one line at a time.

Cheers,

Ichiraku DEV

I’ve blogged before about some of the technology behind the free DirtMind image gallery so here’s some more…

For a long time I’ve wanted to make uploading and using images on forums simpler. FireFox gives us the capabilities to do this since when writing a firefox extension you’ve got access to a bit more functionality than you normally do from javascript as it’s trusted code.

The mission, upload an image by right clicking on it, generating all necessary BBCode.

The solution:

1) Write a nice XUL user interface for adding right click options to the firefox browser, selecting a local picture, establishing selection of a remote picture and providing nice upload feedback

2) Using the firefox extension encode the local image, or download a remote image and encode it (without saving a local file – that would be cheating)

3) Upload to the image host, decode the image data back into a picture.

After that it’s easy  because we’re just into the normal serverside image processing stuff that the image host does.

Here’s some screenshots of it in action:

Selecting an image to upload

The image uploaded

Because of the other stuff I’ve blogged about before in terms of image captioning and deep site integration with phpBB you can now upload an image, caption it and post it extremely easily. Check out this HQ video of the whole process!

Or watch in in lower quality on youtubte:

http://www.erweiterungen.de/detail/BBCodeXtra/

Fügt Befehle zur Formatierung mit BBCode/HTML/XHTML dem Kontextmenü hinzu.

http://www.erweiterungen.de/detail/BBCode/

Fügt dem Kontextmenü Formatierungsbefehle (BBCode/HTML/XHTML/etc.) für Blogs und Foren (phpBB u.a.) hinzu.

I posted this guidance recently based on the response I got from a comment on an AMO (addons.mozilla.org) editor’s blog. Basically it’s instructions on how to leave a review but not how to get a review. I’ve released several firefox addons/extensions under various different IDs so here’s my advice on actually getting reviews…

Reviews are all important for firefox extension developers as without a number (minumum 3 decent) reviews you can’t get an extension out of the sandbox and into the public site. That’s important because in the sandbox you have to have a log in to get at an extension on the main public area anyone can download and use anonymously, so clearly there’s a barrier to normal users for sandbox extensions. This is for a good reason of course, good reviews mean that an extension isn’t just spam or complete shit, it’s actually useful.

1) If you have a log in to AMO then please leave reviews for the extensions you like, even if they’re already public

2) Please leave a review for my extensions

3) If you’re just sponging off the way extension developers make cool stuff for free help them out by leaving a review, it’s not like it costs anything more than 5 mins of your time!

The obvious answer is to get your users to do leave reviews. The problem is it can be hard to get users if you don’t have reviews. I’ve gone about this by examining the target user base for my addon, and then telling them about it. My latest extension is about generating bbcode for forum users so naturally forum users are my target audience, I started off with my own forum and then let other forums know about it. If an extension is properly labelled then interested people will find it, of course many of them use google rather than AMO so you need to think about getting a website or page up that shows off your extension that people will find by search engines. Be careful with forums though, they are notoriously twitchy about percieved spam!

Do you personally know people/internet peeps that would be interested in using your addon? Then invite them to leave a review and make sure you explain how to!

List it on AMO. People do naturally find extensions by searching AMO, I know because they’ve found mine!

Blog it! Blogs are a great way to direct search engine traffic to something of interest.

Tweet it! If you have a twitter following then let your tweeps know about your new found extension awesomeness.  It’s bound to be relevant to some of them, or at least as relevant as knowing that you’ve woken up.

Get external links! If your target audience has a community or reference website then ask the webmasters if they’d be interested in linking to your extension in their resources section. Remember, everyone hates a spammer but people like contributors so you’ll often find that if you word your communication properly you’ll get a positive response. This will drive users to your extension, and in turn will drive up the number of reviews.

Pimp it out! Whatever mediums/networks you’re a part of should know about your extension. Post it to Facebook, twitter, yammer, bebo, blinko, linkedin, hi5, plaxo, friendfeed, plurj, rejaw, meemi etc. But only let them know once, otherwise you’ll be just another spammer and ignored as such.

Finally, get an AMO account and leave review for other people. If I see reviews for one of my extensions I’ll lookup the username and leave a review for their extension. A bit of quid quo pro works well. So leave me a review and I’ll leave you one, there are many others that have the same philosophy, if you’re one of them then why not leave a comment here gently spamming your firefox extension.

Do you have any other tips?

Oops, I forgot to disable some testing stuff before uploading to addons.mozilla.org (commonly known as amo). This is a common mistake when making FireFox extensions – you put in code to show debug messages and enable features for testing and then forget to turn that stuff off when you upload. Ooops 

So, DM BBCode Extension 1.2 has been released, it’s exactly the same as 1.1 but a proper release!

As a user of forums I find I quickly get tired of messing around with all those BBCodes. It’s annoying when trying to post an image or link that I have to right click something, copy to clipboard, then paste, then put tags around, then type something etc. etc.

So I set out to simplify all this, I had a look at some other BBCode extensions, notably Jed Brown’s original. However I found it to be a little unweildy and complex for my needs so I decided to write my own, extremely simple, BBCode extension. So easy, yer mother could use it

Here’s how it works, when you right click on something it has a look at what you’ve right clicked on and offers you some useful menu entries. For example:

Right clicking on a image that's also a link

Right clicking somewhere on a page

Right clicking in a text area

Also when you’re in a textarea (such as when posting on a forum) the extension adds new right click menu that applies BBCode such as quote, url, img tags etc. to the current selection. Thanks to unfocused for this suggestion! I wanted to avoid loads of nested menus and just make something that’s simple and easy to use that would make my life easier. As a result it’s going to make anyone else’s life easier if they’re a forum user. BBCode is used on most forum software like vBulletin and phpBB. As always with DirtMind stuff it’s free and there’s no ads so check it out:

Please leave a review/rating on the FireFox website :)

As part of the dirtmind site I wanted to provide a gallery for users to uploads pics, emoticons etc. for posting in the dirtmind forum and so we could start building some content. With the general philosophy of don’t pay for things when there’s so much great open source about I looked at the Coppermine image gallery. Ok, so there’s some not so great open source about too. All of the galleries I looked at were ok, but didn’t integrate deeply into my site (which was now based on the phpBB architecture) so I set about (armed with no php skill but a bit of general programming skills) to write my own.

Key Features

• Users can upload images into their sfw or nsfw galleries
• Users can delete images they’ve uploaded
• Site admins can delete other people’s images
• Very large images are automatically scaled down
• Images are tagged intelligently (large image get a big tag, medium images get a smaller less obtrusive tag, tiny images get no tag at all so that thinks like emoticons or avatars can be uploaded)
• Images should be exposed as RSS so that latest uploads can be shown
• JPG, GIF  and PNG (static, transparent and animated) to be supported
• Thumbnails are automatically created
• Multiple files can be uploaded at once
• BBCode is automatically generated for both single images and multiple selection

The Gallery

Should be fairly easy right? Actually, it was fairly easy – there’s a lot out there on how to upload files, watermark and resize images so it was quite straightforward to manage the uploading into user directories. At first I thought “I don’t need a database” since I was using a user and gallery based directory structure to store the files. This was mind numbingly stupid as it caused performance issues once the image number got large and made things like images RSS very hard to do.

So I bit the bullet and refactored the gallery into using a database to record images. This was actually pretty simple and didn’t affect my code much, I do a DB insert when an image is uploaded, a DB delete when it’s removed and then there’s just a bunch of selects instead of directory scanning.

I’m really happy with the multiple file upload capability, this was based on the stick man’s idea of making multiple file uploads look like they’re using a single file input element. Once uploaded the files are presented back to the user as a grid of thumbnails which can then be selected/unselected and with each change in selection the BBCode is automatically generated using javascript. Good stuff

Of course since all the pages on my site are in the phpBB architecture I’ve got things like login, user rights etc. done for me but even so the result is I think an extremely clean and elegant image host – it’s got none of the complexity that the old Coppermine System used to have galleries are automatically created for users when they upload their first image. Due to the tight integration into the forum software it’s incredibly simple to post uploaded images (single or multiple) into the forum, in fact it’s a single click!

You can checkout the gallery here including the bbcode generation features but you can’t upload images unless you’ve registered an account (this is to prevent abuses and spam) but registering is free like everything else at DirtMind so feel free to register and upload some images if you want to try it out.

Related to this I’ve also launched a FireFox Extension for BBCode to make BBCode as simple as right clicking on images and links

This problem comes up if you find yourself creating a forum from scratch or implementing some sort of comment system and want to make sure you can introduce some formatting functionality without compromising security.

Well, there are plenty of regular expressions examples out there, but few deal directly with BBCode and of those, most don’t go beyond the basic Bold, Italic, and Strike formatting plus HTML links, images etc…

This example not only formats the above basic stuff, but also does quotes, alignment, Google search links, Wikipedia article links, as well embedded videos for several video sharing sites. You can always add more tags by following the same pattern. All the content is formatted into paragraphs (<p>) for proper validation. It checks for nested quotes up to a specified depth.

There is no extensive input cleanup to prevent XSS attacks through tags. I’m just showing the basics like tag stripping which can be circumvented by clever attakers, so it’s up to you to implement a more thorough system. The reason I’m excluding it is because there are already many, many, many examples out there that do a wonderful job at it.

This does set a limited set of formatting options.

To make everything easier to read in the code file, I used multiple Regex replacements instead of one super duper pattern. This also makes adding quick tags for something else much simpler.

A sample of the rendered markup :

• [b]Bold[/b] = Bold
• [i]Italic[/i] = Italic
• [del]Strike[/de] = Strike
• [color=blue]Blue[/blue] = Blue
• [color=#FA9A99]Pinkish[/blue] = Pinkish
• [size=2]Larger text[/size] (between 2 & 5) = Larger text
• [google]once in a blue moon[/google] = once in a blue moon
• [wikipedia]Captain Haddock[/wikipedia] = Captain Haddock (Remember, Wikipedia articles are case sensitive)
• [img]http://www.google.com/logos/Logo_40blk.gif[/img] =
• [img=Google Logo]http://www.google.com/logos/Logo_40blk.gif[/img] =

One major difference than other BBCode functions is the ability to embed YouTube, Metacafe and LiveVideo media players. You only need to specify the URL within the tags.

E.G. For youtube :

[youtube]http://www.youtube.com/watch?v=c_BgitzVKzw[/youtube]

For LiveVideo
[livevideo]http://www.livevideo.com/video/Megalis/E7C2EEE8A7C740379F40B5ECA56ACE8A/momma-sophia-s-dream.aspx[/livevideo]

I don’t think WordPress supports embedding Metacafe videos at the time of this post, but if you want to include those videos :

To find the exact URL of the LiveVideo page, click on “Get Codes” link underneath the video player.
I tried to keep this as simple as possible for users as they just need to wrap the url around [tag][/tag] markers.

You can embed quotes following a similar convention to phpBB. But there are slight differences as this was for a custom application.

[quote]This is a quote[/quote]

This is a quote

[quote=Author]This is a quote[/quote]

Author wrote

---

This is a quote

And so on…

This version also deals with Headers
([h#]Header[/h#] becomes <h#>Header</h#> from 1 to 6.)

[h3]Header[/h3]

[h4]Header[/h4]

And so on…

Of course, you would want to apply special formatting via CSS to keep the look of the page consistent with the rest of the site.

This particular excerpt was written for a .Net 3.5 app, but this portion should work on 2.0+ with no alterations since it doesn’t use anything unique to the newer framework.

This class is by no means meant to be a comprehensive bbcode plugin, but it should get you on the way to create your own custom tags.

Once again, this code has no usage restrictions. I’m just including a disclaimer like all other code samples I’ve posted here. You don’t have to ask me permission to use it for any purpose and I only ask that you abide by the disclaimer.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

The tag function

/// <summary>
/// Converts the input plain-text BBCode to HTML output and replacing carriage returns
/// and spaces with <br /> and   etc...
/// Recommended: Use this function only during storage and updates.
/// Keep a seperate field in your database for HTML formatted content and raw text.
/// An optional third, plain text field, with no formatting info will make full text searching
/// more accurate.
/// E.G. BodyText(with BBCode for textarea/WYSIWYG), BodyPlain(plain text for searching),
/// BodyHtml(formatted HTML for output pages)
/// </summary>
public static string ConvertToHtml(string content)
{
    // Clean your content here... E.G.:
    // content = CleanText(content);   

    // Basic tag stripping for this example (PLEASE EXTEND THIS!)
    content = StripTags(content);   

    content = MatchReplace(@"\[b\]([^\]]+)\[\/b\]", "<strong>$1</strong>", content);
    content = MatchReplace(@"\[i\]([^\]]+)\[\/i\]", "<em>$1</em>", content);
    content = MatchReplace(@"\[u\]([^\]]+)\[\/u\]", "<span style=""text-decoration:underline"">$1</span>", content);
    content = MatchReplace(@"\[del\]([^\]]+)\[\/del\]", "<span style=""text-decoration:line-through"">$1</span>", content);   

    // Colors and sizes
    content = MatchReplace(@"\[color=(#[0-9a-fA-F]{6}&#124;[a-z-]+)]([^\]]+)\[\/color\]", "<span style=""color:$1;"">$2</span>", content);
    content = MatchReplace(@"\[size=([2-5])]([^\]]+)\[\/size\]", "<span style=""font-size:$1em; font-weight:normal;"">$2</span>", content);   

    // Text alignment
    content = MatchReplace(@"\[left\]([^\]]+)\[\/left\]", "<span style=""text-align:left"">$1</span>", content);
    content = MatchReplace(@"\[right\]([^\]]+)\[\/right\]", "<span style=""text-align:right"">$1</span>", content);
    content = MatchReplace(@"\[center\]([^\]]+)\[\/center\]", "<span style=""text-align:center"">$1</span>", content);
    content = MatchReplace(@"\[justify\]([^\]]+)\[\/justify\]", "<span style=""text-align:justify"">$1</span>", content);   

    // HTML Links
    content = MatchReplace(@"\[url\]([^\]]+)\[\/url\]", "<a href=""$1"">$1</a>", content);
    content = MatchReplace(@"\[url=([^\]]+)]([^\]]+)\[\/ur\l]", "<a href=""$1"">$2</a>", content);   

    // Images
    content = MatchReplace(@"\[img\]([^\]]+)\[\/img\]", "<img src=""$1"" alt="""" />", content);
    content = MatchReplace(@"\[img=([^\]]+)]([^\]]+)\[\/img\]", "<img src=""$2"" alt=""$1"" />", content);   

    // Lists
    content = MatchReplace(@"\[*\]([^\[]+)", "<li>$1</li>", content);
    content = MatchReplace(@"\[list\]([^\]]+)\[\/list\]", "<ul>$1</ul><p>", content);
    content = MatchReplace(@"\[list=1\]([^\]]+)\[\/list\]", "</p><ol>$1</ol><p>", content);   

    // Headers
    content = MatchReplace(@"\[h1\]([^\]]+)\[\/h1\]", "<h1>$1</h1>", content);
    content = MatchReplace(@"\[h2\]([^\]]+)\[\/h2\]", "<h2>$1</h2>", content);
    content = MatchReplace(@"\[h3\]([^\]]+)\[\/h3\]", "<h3>$1</h3>", content);
    content = MatchReplace(@"\[h4\]([^\]]+)\[\/h4\]", "<h4>$1</h4>", content);
    content = MatchReplace(@"\[h5\]([^\]]+)\[\/h5\]", "<h5>$1</h5>", content);
    content = MatchReplace(@"\[h6\]([^\]]+)\[\/h6\]", "<h6>$1</h6>", content);   

    // Horizontal rule
    content = MatchReplace(@"\[hr\]", "<hr />", content);   

    // Set a maximum quote depth (In this case, hard coded to 3)
    for (int i = 1; i < 3; i++)
    {
        // Quotes
        content = MatchReplace(@"\[quote=([^\]]+)@([^\]]+)&#124;([^\]]+)]([^\]]+)\[\/quote\]", "</p><div class=""block""><blockquote><cite>$1 <a href=""" + QuoteUrl("$3") + """>wrote</a> on $2</cite><hr /><p>$4</p></blockquote></div></p><p>", content);
        content = MatchReplace(@"\[quote=([^\]]+)@([^\]]+)]([^\]]+)\[\/quote\]", "</p><div class=""block""><blockquote><cite>$1 wrote on $2</cite><hr /><p>$3</p></blockquote></div><p>", content);
        content = MatchReplace(@"\[quote=([^\]]+)]([^\]]+)\[\/quote\]", "</p><div class=""block""><blockquote><cite>$1 wrote</cite><hr /><p>$2</p></blockquote></div><p>", content);
        content = MatchReplace(@"\[quote\]([^\]]+)\[\/quote\]", "</p><div class=""block""><blockquote><p>$1</p></blockquote></div><p>", content);
    }   

    // The following markup is for embedded video -->   

    // YouTube
    content = MatchReplace(@"\[youtube\]http:\/\/([a-zA-Z]+.)youtube.com\/watch\?v=([a-zA-Z0-9_\-]+)\[\/youtube\]",
        "<object width=""425"" height=""344""><param name=""movie"" value=""http://www.youtube.com/v/$2""></param><param name=""allowFullScreen"" value=""true""></param><embed src=""http://www.youtube.com/v/$2"" type=""application/x-shockwave-flash"" allowfullscreen=""true"" width=""425"" height=""344""></embed></object>", content);   

    // LiveVideo
    content = MatchReplace(@"\[livevideo\]http:\/\/([a-zA-Z]+.)livevideo.com\/video\/([a-zA-Z0-9_\-]+)\/([a-zA-Z0-9]+)\/([a-zA-Z0-9_\-]+).aspx\[\/livevideo\]",
        "<object width=""445"" height=""369""><embed src=""http://www.livevideo.com/flvplayer/embed/$3"" type=""application/x-shockwave-flash"" quality=""high"" width=""445"" height=""369"" wmode=""transparent""></embed></object>", content);   

    // LiveVideo (There are two types of links for LV)
    content = MatchReplace(@"\[livevideo\]http:\/\/([a-zA-Z]+.)livevideo.com\/video\/([a-zA-Z0-9]+)\/([a-zA-Z0-9_\-]+).aspx\[\/livevideo\]",
        "<object width=""445"" height=""369""><embed src=""http://www.livevideo.com/flvplayer/embed/$2&autostart=0"" type=""application/x-shockwave-flash"" quality=""high"" width=""445"" height=""369"" wmode=""transparent""></embed></object>", content);   

    // Metacafe
    content = MatchReplace(@"\http\:\/\/([a-zA-Z]+.)metacafe.com\/watch\/([0-9]+)\/([a-zA-Z0-9_]+)/\[\/metacafe\]",
        "<object width=""400"" height=""345""><embed src=""http://www.metacafe.com/fplayer/$2/$3.swf"" width=""400"" height=""345"" wmode=""transparent"" pluginspage=""http://www.macromedia.com/go/getflashplayer"" type=""application/x-shockwave-flash""></embed></object>", content);   

    // LiveLeak
    content = MatchReplace(@"\http:\/\/([a-zA-Z]+.)liveleak.com\/view\?i=([a-zA-Z0-9_]+)\[\/liveleak\]",
        "<object width=""450"" height=""370""><param name=""movie"" value=""http://www.liveleak.com/e/$2""></param><param name=""wmode"" value=""transparent""></param><embed src=""http://www.liveleak.com/e/59a_1231807882"" type=""application/x-shockwave-flash"" wmode=""transparent"" width=""450"" height=""370""></embed></object>", content);

    // < -- End video markup   

    // Google and Wikipedia page links
    content = MatchReplace(@"\[google\]([^\]]+)\[\/google\]", "<a href=""http://www.google.com/search?q=$1"">$1", content);
    content = MatchReplace(@"\[wikipedia\]([^\]]+)\[\/wikipedia\]", "<a href=""http://www.wikipedia.org/wiki/$1"">$1</a>", content);   

    // Put the content in a paragraph
    content = "</p><p>" + content + "</p>";   

    // Clean up a few potential markup problems
    content = content.Replace("t", "    ")
        .Replace("  ", "  ")
        .Replace("<br />", "")
        .Replace("<p><br />", "</p><p>")
        .Replace("</p><p><blockquote>", "<blockquote>")
        .Replace("</blockquote></blockquote></p>", "")
        .Replace("<p></p>", "")
        .Replace("<p><ul></ul></p>", "<ul>")
        .Replace("<p></p></ul>", "")
        .Replace("<p><ol></ol></p>", "<ol>")
        .Replace("<p></p></ol>", "")
        .Replace("<p><li>", "</li><li><p>")
        .Replace("</p></li></p>", "");   

    return content;
}

StripTags and Match Replace functions

/// <summary>
/// Strip any existing HTML tags
/// </summary>
///
<param name="content">Raw input from user</param>
/// <returns>Tag stripped storage safe text</returns>
public static string StripTags(string content)
{
	return MatchReplace(@"< [^>]+>", "", content, true, true, true);
}

public static string MatchReplace(string pattern, string match, string content)
{
	return MatchReplace(pattern, match, content, false, false, false);
}

public static string MatchReplace(string pattern, string match, string content, bool multi)
{
	return MatchReplace(pattern, match, content, multi, false, false);
}

public static string MatchReplace(string pattern, string match, string content, bool multi, bool white)
{
	return MatchReplace(pattern, match, content, multi, white);
}

/// <summary>
/// Match and replace a specific pattern with formatted text
/// </summary>
///
<param name="pattern">Regular expression pattern</param>
///
<param name="match">Match replacement</param>
///
<param name="content">Text to format</param>
///
<param name="multi">Multiline text (optional)</param>
///
<param name="white">Ignore white space (optional)</param>
/// <returns>HTML Formatted from the original BBCode</returns>
public static string MatchReplace(string pattern, string match, string content, bool multi, bool white, bool cult)
{
	if (multi && white && cult)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.Multiline &#124; RegexOptions.IgnoreCase &#124; RegexOptions.CultureInvariant);
	else if (multi && white)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.Multiline &#124; RegexOptions.IgnoreCase);
	else if (multi && cult)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.Multiline &#124; RegexOptions.CultureInvariant);
	else if (white && cult)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.IgnorePatternWhitespace &#124; RegexOptions.CultureInvariant);
	else if (multi)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.Multiline);
	else if (white)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.IgnorePatternWhitespace);
	else if (cult)
		return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase &#124; RegexOptions.CultureInvariant);

	// Default
	return Regex.Replace(content, pattern, match, RegexOptions.IgnoreCase);
}

Enjoy!

Addendum…
Robert Beal, in particular has created a wonderful HtmlUtility class for C# 3.0+ that will only allow certain tags and tag attributes. If your visitors make use of extensive HTML tags, then that is a better option than my system. If you want to implement a feedback system for guest writers with strong HTML support, Robert’s example is highly recommended.

My example is really only for people who post in plain text most of the time, would only post formatted text and videos semi-rarely.

In fact, it’s probably best to avoid extensive HTML support for ordinary comments, as that will only encourage users to abuse the system. You’re better off using this for something minimal.

If, like me, you post links to your Picasaweb images on forums, you’ll probably have scratched your head in the past and wondered why Google doesn’t include a ‘BBCode’ option in it’s ‘Link to this photo’ section on the right hand side.

So, I thought I’d knock up a quick bookmarklet to achieve this, basically if you copy the code below as the location for a bookmark in your bookmark bar, you can click it to swap out the standard ‘Embed image’ code for BBCode for insertion to forums.

Here you go -

javascript:void(function(){
  var s=document.getElementById('lhid_snippet');
  if(s){
    s.value='[url='+document.location.href+'][img]'+/<img src="([^"]+)"\/>/i.exec(s.value)[1]+'[/img][/url]'};
}())

(you’ll need to get it back one line, it wont format correctly here as one line)
Enjoy

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

BBCODE:

Error: Invalid Imeem shortcode attribute

HTML:

<object width=”300″ height=”80″><param name=”movie” value=”http://media.imeem.com/m/{TEXT}”></param><param name=”wmmode” value=”transparent”></param><embed src=”http://media.imeem.com/m/{TEXT}” type=”application/x-shockwave-flash” width=”300″ height=”80″ wmode=”transparent”></embed></object>

OK now to add an imeem song to your forum, first find the song, lets say:
http://afghan4life.imeem.com/music/-jA7 … nt_playin/

There is a small spot that says embed and should have:

<object width=”300″ height=”80″ data=”http://media.imeem.com/m/tiqwj6NScg/aus=false/” type=”application/x-shockwave-flash”><param name=”wmode” value=”transparent” /><param name=”src” value=”http://media.imeem.com/m/tiqwj6NScg/aus=false/” /></object>

So, to add this song to your forum, type:

Error: Invalid Imeem shortcode attribute

We’ve reached over 25000 on the petition! Congrats! Let’s keep this up!

_________________________

More Banners! Here’s just a sample of some of the many new banners (check out the rest and get their BBcode here):

__________________________

Vlog Compilation from Sosga:

The Vlog is going to be shown at Armageddon con, has been sent to MGM and Sci-Fi and will be sent to many other places in due course. 
SoSGA would like to thank all those who have contributed their time and creative energies to make this part of the campaign a success.

Bueno, la verdad que esto no sabía donde ponerlo, y lo pongo por aquí

Si alguna vez habeis metido un bbcode en un foro, os habreís dado cuenta del problema que existe con el bbcode tipo de youtube. Si pones el bbcode que te dice de meter la url completa, si alguien pone la url del formato youtube/v/15s151 no funciona, porque por defecto son en formato youtube.com/watch?v=12dsfg5… por lo cual en otros foros se opta por introducir el identificador de youtube directamente a la hora de postear un video

Entonces, en el foro de Townportal, he desarrollado un pequeño mix de Bbcode con Javascript, que solventa esto, permitiendo meter cualquier dirección de video de youtube:

Entonces: En la mascara de entrada

[youtube]http://{TEXT1}youtube.com/{TEXT2}[/youtube]

En el reemplazo HTML

<script>
var youtube =”{TEXT2}”;
var identificador;
var clase;
clase = youtube.substring (0,1);
if (clase == “v”)
document.write(“<object width=\”425\” height=\”344\”><param name=\”movie\” value=\”http://www.youtube.com/” + youtube + “\&fs=1\”></param><param name=\”allowFullScreen\” value=\”true\”></param><embed src=\”http://www.youtube.com/” + youtube + “\&fs=1\” type=\”application/x-shockwave-flash\” allowfullscreen=\”true\” width=\”425\” height=\”344\”></embed></object>”);
if (clase == “w”)
{identificador = youtube.substring (8,youtube.length);
document.write(“<object width=\”425\” height=\”344\”><param name=\”movie\” value=\”http://www.youtube.com/v/” + identificador + “\&fs=1\”></param><param name=\”allowFullScreen\” value=\”true\”></param><embed src=\”http://www.youtube.com/v/” + identificador + “\&fs=1\” type=\”application/x-shockwave-flash\” allowfullscreen=\”true\” width=\”425\” height=\”344\”></embed></object>”)};
</script>

Y en la linea de ayuda

[youtube]url de cualquier vídeo de youtube[/youtube]

En sí, el código es más simple que una patata, pero si no teneis ni idea de JS, como me pasó a mí, así os ahorráis aprenderlo

Con este código os la sopla el es de http://es.youtube, o los &related o la coletilla que sea, y además el vídeo siempre tendrá opción a pantalla completa. Y al ser bbcode, los usuarios podrán poner videos aunque el flash esté desactivado para usuarios.

На Блогоде посты с блогов подсасываются по RSS. Конечно хочется иметь вид постов близкий к оригиналу, со всеми красотам офомления HTML(tm). Если с известными блогохостингами (ЖЖ, LI.ru  и прочее) ждать подставы в коде вроде бы не приходится, то со стендэлон блогов может приплыть все что угодно, вплоть до XSS.

Подставлять свой молодой проект и своих пользователей очень не хотелось, но и красоту HTML(tm) терять тоже не хотелось. Решение пришло просто и эффективное как каша из топора: конвертировать HTML в BBCode. Сразу вырисовывается несколько плюсов:

+ Убираем возможный вредоносный код (<a href=”#” onclick=”alert(‘you are hacked!’);”>нажми</a>);
+ Приводим форматирование текста к общему стилю на сайте (<b style=”font-size: 50px”>Ух</b> не пройдет)
+ Возможность форматирования картинок (с помощью max-width и max-height)
+ Специально для спамеров: noindex и nofollow для ссылок

Погуглив немного по просторам сети, пришел к ужасу, что никто этим толком не занимался, поэтому пришлось писать свой код.

Вот что вышло:

function to_bbcode($string) {
  //определяем валидный URL
  $str_http_valid = 'http:\/\/[a-z0-9]?[-a-z\.0-9=_%+\/$ ]*';
  $str_url_valid = $str_http_valid.'(\?[-a-z\.0-9_%+\/=&]*)?';

  //Убираем все ненужные теги, чтобы потом удалить лишние переносы
  $string = strip_tags($string, '<b><a><i><em><embed><img><u><string><ol><ul><li><br><p>');

  //Преобразивания для кода
  $arr_replace    = array(
  //Преобразуем валидные ссылки вида <a href="http://test.ru">test</a> в код [url="http://test.ru"]test[/url]
"/<a\s+[^>]*?href=(['\"])($str_url_valid)\\1[^>]*?>(.*?)<\/a>/Xise"
                         => "('\\2' == '' || trim('\\4') == ''? 	\"\\4\" : \"[url=\\\"\\2\\\"]\\4[/url]\")",
  //Преобразуем валидные картинки вида <img src="http://test.ru/1.jpg"> в код [img]http://test.ru/1.jpg[/img]
"/<img\s+[^>]*?src=(['\"])({$str_url_valid})\\1.*?>/Xise"
                         => "('\\2' == '' ? '\\2' : '[img]\\2[/img]')",
  //преобразуем известные видеохостинги (youtube, rutube и blogoda.ru 
"/<embed\s+.*?src=(['\"])(http:\\/\\/www.youtube.com\\/v\\/([a-z0-9_-]+)(&.*?))?\\1.*?>/Xis" => '[youtube]\\3[/youtube]',
"/<embed\s+.*?src=(['\"])(http:\\/\\/video.rutube.ru\\/([a-z0-9]+))\\1.*?>/Xis" => '[rutube]\\3[/rutube]',
"/<embed\s+.*?src=(['\"])http:\\/\\/blogoda.ru\\/v.swf\\1\s+.*?flashvars=(['\"])(u=([a-z0-9_-])+&id=([0-9]+)).*?\\2*.?>/Xis" => '[blogodavideo]\\3[/blogodavideo]',
"/<embed\s+.*?src=(['\"])http:\\/\\/blogoda.ru\\/m.swf\\1\s+.*?flashvars=(['\"])(u=([a-z0-9_-])+&id=([0-9]+)).*?\\2*.?>/Xis" => '[blogodaaudio]\\3[/blogodaaudio]',
  //Преобразуем стандартные теги форматирования HTML в BBCode (пример: <b>test</b> в [b]test[/b])
          '/<(\/)?(strong|em)>/Xise' => '( strcasecmp("em", "\\2") ?
"[\\1b]" : "[\\1i]" )',
          '/<(\/?(?:b|i|u))(( [^>]*?)?)>/Xise'  => 'strtolower("[\\1]")',
  //Преобразуем списки ol|ul и заменяем li на [*]
          '/<(\/)?[ou]l( [^>]*?)?>/Xis'    => '[\\1list]',
          '/<(\/)?li( [^>]*?)?>/Xise'      => '( "\\1" == "" ? "[*]" : "" )',
  //Убираем повторяющиеся пробелы
          '/[\s]+/Xi' => ' ',
          '/[ ]{2,999}/Xi' => ' ',
  //Форматирем <br> - один перенос, <p> - два переноса
          '/<br( [^>]*?)?>/Xis' => "\n",
          '/<\/?p( [^>]*?)?>/Xis' => "\n\n",
  //Слишком много переносов тоже плохо, убираем
          "/(\n([ ]*)?){2,999}/Xis" => "\n"
      );
  //Преобразуем [ и ] на всякий случай
  $string = str_replace("[", "***^***", str_replace(']', '***@^@***', $string));
  //Запускаем процесс
  $string = preg_replace(array_keys($arr_replace),
                         array_values($arr_replace),
                         $string);
  //Очень важно: закрыть незакрытые теги
  $closetags = array('i','b','u', 'list');
  foreach ($closetags as $tag) {
	  if (($count = substr_count($string, "[$tag]") - substr_count($string, "[/$tag]"))>0) {
	  	$string.=str_repeat("[/$tag]", $count);
	  }
  }
  //Готово
  return  $string;
}

Starting today, we’re happy to give all of our users a new choice for posting quiz results on other web pages. We’ve always offered HTML and today we’re giving you a BBCode option. To get BBCode, take any quiz the same way you always have, but when you go to get code to post, just click on the “BBCode” tab. Here’s a picture of what to look for.

Pick the BBCode tab when you finish a quiz to get BBCode to post

Enjoy the new posting choice, and keep an eye on Blogthings and this blog to see when we add more for you.

gazetowego ludu, w niewłaściwy sposób użyte, może się stać niebezpiecznym narzędziem, bez znieczulenia siekającym w dobry smak, umiar, wyczucie estetyki jako takiej… Dowód niżej.

Otóż Naczelne Admiństwo Forum Gazeta.pl właśnie oddało do użytku moderatorom Forów Prywatnych portalu onego możliwość gmerania w bebechach forumowych (konkretnie zaś w nieruszalnych do tej pory rejonach nagłówka forum) przy pomocy wspomnianego BBcode.

Wiadomo, jakie możliwości on daje: a to wygrubaszenie tekstu, a to podkreślonko nieznaczne, a to wyitalikowanie, a to podkolorowanie, a to wklejkę zdjątka. Dobra rzecz, w prosty sposób pozwalająca na zindywidualizowanie forum, dopasowanie jego wyglądu do zawartości.

Miejscowy lud gazeciano-forumowy w  mig zakochał się w BBcode. Szkoda, że w niektórych przypadkach bez wzajemności… Chcecie przykładu? Macie przykład – jak ktoś chciał dobrze i przedobrzył:

Źródło: Forum Gazeta.pl > Forum Etopiryna na Poddaszu

Piękności. A jaki to hardkor na żywo jest… Uuu, bejbe!

Wymiotny doprawdy przykład ekspresjonizmu forumnaiwnego. Ja poproszę o tę etopirynę, bo mi n i e z a t o p s z e od tego, co widzę. Chyba, że to miał być taki żart, korespondujący z rozrywkowym charakterem “Etopiryny na Poddaszu”, wtedy ową nagłówkową hulaszczość jestem w stanie zrozumieć. Co nie znaczy, że nabieram się na taki żarcik. Nie da rady, sorry. Nie na moje to poczucie humoru.