Sidebar "Bling" Cross Promotes Your Online Presence
By Reggie · December 10, 2007
These days real estate professionals are members of social sites, online communities, blogs and more. So how do we deliver a consistent brand and message over so many tools? Also how to we channel interested parties to our other communities? One way is to use a similar sidebar for each application.
Introducing the BLING Widget for Real Estate Agents
Since we have not seen the perfect sidebar bling application for you real estate agents, we developed one for you to use. You will notice in “Step 7″ I instruct you to use the full path to the icons. This is so that you can use this code on real estate networks like Activerain, Facebook and more without making further changes.
Here is an example of the buttons I have created for your use.
(Buttons from left to right: LinkedIn, Facebook, RSS, Activerain, Zolve, MyBlogLog, Google MyMaps, Friendster, Trulia Voices, Zillow and RealTown Real Estate Network.)
DOWNLOAD ZIP FILE OF BUTTONS HERE.
IMPORTANT: If you are adding this to your blog, please make a backup of your template before beginning so you can easily restore things if you need too.
Step 1:
Create a new folder on the root directory of your website or blog and title it “bling”
Step 2:
From the icons I’ve created, choose the specific icons you want to use on your sidebar widget and add them to your newly created folder titled “bling”. (Note: Choose either the .jpg files or the .png files. PNG files have a transparent background.)
Step 3:
Start by opening notepad or your HTML editor. Now you will be adding the code from each step to the blank notepad document. Please add each snippet of code to notepad in the order below. If you are advanced, the complete code is avaliable here.
Step 4
Copy the code below. Now paste into the notepad document we opened in Step 3. The code we just copied is for the header of our widget. The widget title is”Find Me Online” If you would like to use a different headline, replace those words with your own. You can also update the header and border color by replacing the hexadecimal (6 Digit) color with one from this chart.
Step 5
Copy the text below. Now paste this code after the code above. We will be editing it as follows:
Replace [Insert URL of Personal Photo] with absolute/full URL to photo. (i.e. http://www.mytechopinion.com/images/reggie.jpg) (Tip: Ideal width is 75 pixels or less)
Replace [Insert Name] with your name
Replace [Insert Company Name] with your company or blog name
Replace [Insert Your Blog or Website URL Here] with your actual URL
Step 6
Copy the code below. This is the DIV for the buttons. Please paste to our open notepade file after the previous code.
Ok, now you will start to add the buttons for your widget. 4 buttons will fit on each row. If you are using more than 4 buttons, you can add another DIV by preforming Step 6 again. This will create a 2nd row of icons.
Step 7
Earlier you added the buttons for your widget into a newly created folder. Now find the corresponding code from the options below. Then add each desired to your notepad or open editor. Look for “<!–Insert Buttons to the left of this block–>” and paste the button(s) code before it.
LinkedIn
Replace [Insert LinkedIn URL] with the link to your LinkedIn Profile.
Facebook
Replace [Insert Facebook URL] with the link to your Facebook Profile. Also replace [Full Path to Image] with your full URL to the image.
ActiveRain
Replace [Insert Activerain URL] with the link to your Activerain Profile or blog. Also replace [Full Path to Image] with your full URL to the image.
RSS
Replace [Insert RSS URL] with the link to your RSS feed URL. Also replace [Full Path to Image] with your full URL to the image.
Zolve
Replace [Insert Zolve URL] with the link to your Zolve profile or blog. Also replace [Full Path to Image] with your full URL to the image.
MyBlogLog
Replace [Insert ByBlogLog URL] with the link to your MyBlogLog Community. Also replace [Full Path to Image] with your full URL to the image.
Friendster
Replace [Insert Friendster URL] with the link to your Friendster URL. Also replace [Full Path to Image] with your full URL to the image.
MyMaps
Replace [Insert MyMaps URL] with the link to your custom Google MyMaps page. Also replace [Full Path to Image] with your full URL to the image.
Trulia Voices
Replace [Insert Trulia Voices URL] with the link to your Trulia Voices profile. Also replace [Full Path to Image] with your full URL to the image.
Zillow
Replace [Insert Zillow Profile URL] with a link to your profile on Zillow. Also replace [Full Path to Image] with your full URL to the image.
RealTown Real Estate Network
Replace [Insert RealTown Profile URL] with a link to your profile on RealTown Real Estate Network. Also replace [Full Path to Image] with your full URL to the image.
If you have enjoyed MyTechOpinion - Technology for Real Estate, please subscribe to our RSS feed!
Other posts you may enjoy:
Tags: real estate agents, real estate agent, maps, map, technology, Directory
I cant wait to get in my template and screw it up. Very nice work! I cant wait to see MTO across the web!
hey! nice work reg!
I tried, messed it up, can’t get the button inside the box. And I’m not real good at code. Any chance I could send you the code, it probably has a small mistake, and you could direct me to the problem? I only tried facebook just to get one done before I went too far. you can email me at steve (at) greenptdev (dot) com if it’s not a huge burden.
Hey Steve,
I sent an email over to you. Please email me what you have and I will take a look. Thanks for giving the “Bling” a try.
This is awesome, Reg! Thanks for the step-by-step. I love MTO!
Hi Reggie,
Very, very cool. How about some bling for profiles on Zillow? Just substitute your profile name for in this URL: http://www.zillow.com/profile/profile name]
d
Thanks Sarah!
David G, you bet! I had a few requests today. I’ll have the new buttons avaliable by tomorrow. Thanks for the mention.
Reggie
A suggested improvement for Bling 2.0: use the “title” attribute. That way, when people move the mouse over an icon like the “in” one, a tooltip will pop up saying “LinkedIn”.
IIRC, the title attribute needs to be used on the anchor tag for it to work in both Internet Explorer and Firefox.
Reggie,
Thanks! What a great way to provide consistent branding throughout all the various sites we use! Just one small request, would there be any way to add Twitter to this list?
Thanks again,
Rich
Hi Rich,
Thank you! I’m happy to hear that you like this bling.
Yes, I will create a twitter button for you and others. Give me until this weekend. Reggie
What a cool tool! And I, too, would love to see a Twitter button, if you have time!