iWeb FAQ - Facebook and Twitter

iWebFAQ.org

 

I’m a Facebook user. How can I get my visitors to add me as a friend? How can I create a fan page for my website to start a community? How can I have people sharing the URL of my website with their friends on FB? And much more...

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


I personally don’t like Facebook. They are having way too many informations about their members. However I have to admit that it is useful. Since there are so many users it is an important tool to make your site popular and keep in touch with your visitors by creating a group.



Chapter 1: Facebook Profile Badge (Add to contacts widget)

Chapter 2: Facebook Share (Allow people to share a page of your site on their Facebook Wall with one click)

Chapter 3: Facebook Page Badge

Chapter 4: Facebook Like Box (Become a fan of the website)

Chapter 5: Facebook Like Button (For people to like a particular page/post of your website)

Chapter 6: Facebook Comments Box (For people to post a comment on your website through FB)

Chapter 7: Follow me on Twitter button

Chapter 8: Twitter Profile Widget (Display your latest tweets on your website)

Chapter 9: Send to Twitter link or button (Allow people to share a page of your site on their Twitter with one click)

Chapter 10: How to stream your Blog entries to your FB Page’s Wall

Chapter 11: How to stream your Blog entries to your Twitter

Chapter 12: How to stream your Facebook Page entries to your Twitter




Chapter 1: Facebook Profile Badge (Add to contacts widget)




(this is just an image, not working since I don’t want a 1000 people a day adding me as a friend, please do not add me)



Note: For this widget you can use either HTML Snippets or Alternative HTML


1. The first thing you need to do is login to your Facebook

2. Go to this page of Facebook. By hitting “Edit this badge” you can further customize what the badge should include. Once you’re done with customizing the badge hit Other.

3. Copy the HTML code and paste it in an HTML Snippet or add it to your pages using Alternative HTML. The code is full of useless parts which can be deleted if you want. For a basic badge just keep what I highlighted in red here:


<!-- Facebook Badge START --><a href="https://www.facebook.com/cedric.giger" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="C&#xe9;dric Giger">C&#xe9;dric Giger</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><br/><a href="https://www.facebook.com/cedric.giger" target="_TOP" title="C&#xe9;dric Giger"><img src="https://badge.facebook.com/badge/1335895607.331.1963677553.png" style="border: 0px;" /></a><!-- Facebook Badge END -->


If you want to use your own image substitute the URL to the image in the code

<img src="http://badge.facebook.com/badge/1XX5895607.331.1963677553.png" style="border: 0px;" />

with the URL to your own image

4. Now people will be able to click on it, see your public profile and add you as a friend if they want to



Chapter 2: Facebook Share (Allow people to share a page of your site on their Facebook Wall with one click)


Share on Facebook



Note: For this widget you have to use Alternative HTML


Alternatively you could also use one of the services described under Tell a friend.


1. First copy this code:


<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>


2. Instead of Share on Facebook write what you would like to appear on your site as a link. If you ant an image instead of text replace it with:


<img=”URLtoTheImage” width=”30px” height=”35px” border=”0”>


3. On the pages you want to add the Facebook Share widget add a TextBox with a code (something like ShareOnFBGoHere)




4. Publish your website to a folder

5. Open or download MassReplaceIt (freeware)


If it’s the first time you’re using MassReplaceIt read the “Alternative HTML” FAQ among the first pages of this book to make sure the settings are right


6. In the Search field type ShareOnFBGoHere (or the code of your choice)

7. In the Replace field paste your Share on Facebook code


Of course if you’re using MassReplaceIt for other codes as well you can add it to that query.




8. In Files add your website's folder




9. Save the query by hitting Command(cmd or Apple)+S and enter a name for it so the next time you publish your website you will only have to hit the Replace button

10. Hit Replace and MassReplaceIt will search for files it has to make changes to




11. Again hit Replace All and MassReplaceIt will automatically replace the code “ShareOnFBGoHere” and add the Facebook code instead


Note: You have to repeat the process from step 10 to 11 every time you republish.


If you want to use HTML Snippets instead you can use this code:


<a href="http://www.facebook.com/sharer.php?u=YourURL" target="_blank">Share on FB</a>


In the code replace YourURL with the URL to your website. In my case that would be: http://iwebfaq.org/site/iWeb_FAQ.html


Example:


<a href="http://www.facebook.com/sharer.php?u=http://iwebfaq.org/site/iWeb_FAQ.html" target="_blank">Share on FB</a>


This way you have to enter the URL of a page manually. Whereas with the first method it is automatically entered/generated.

Paste the code into an HTML Snippet. As always with HTML Snippets this solution is a workaround. Meaning far from perfect.



Chapter 3: Facebook Page Badge


To have a Facebook page for your website or yourself if you’re an artist or something there are two things to be done. The first part is creating the page. The second one is adding the widget to your website. So let’s start with the page:


1. First visit this page of Facebook

2. Hit Create a page and fill in all the required informations

3. Once you filled in the informations you need to confirm that you’re authorized to create the page by checking the box and giving an electronic signature. Then hit Create Page.

4. Add the basic informations, add a picture and so on


Now we will create the Page Badge.


1. Hit “Add a Fan Box to your site” which you find on the left menu of the Facebook page

2. Configure the Fan Box

3. Copy the code and paste it into an HTML Snippet


However I prefer using the Facebook Like Box.



Chapter 4: Facebook Like Box (Become a fan of the website)




1. Go to this page of Facebook

2. Enter your Facebook page’s URL, the width, choose whether you want the faces to display or not and whether you want the stream to display or not

3. Hit “Get Code”.

4. From the top of the popup window appearing after you hit "Get Code" choose "IFRAME"

5. Under "This script uses the app ID of your app:" choose your FB page.

6. Copy the code and paste it in an HTML Snippet or add it with Alternative HTML


You find this widget on each of my pages, join in! :-)



Chapter 5: Facebook Like Button (For people to like a particular page/post of your website)




How this is done is described in my iWebFAQ.org E-Book (sample)



Chapter 6: Facebook Comments Box (For people to post a comment on your website through FB)






Note that I will probably not read the comments you post here. For questions use the Forum instead!


How this is done is described in my iWebFAQ.org E-Book (sample)



Chapter 7: Follow me on Twitter button




Simply link your Twitter page http://twitter.com/YOUR-ID with a text link or image-link.



Chapter 8: Twitter Profile Widget (Display your latest tweets on your website)




1. Login to your Twitter account and visit this page of Twitter.

2. Click on Create new and enter your Twitter-Username, define a height, choose a style, …

3. Once you're done configuring the widget hit Create widget, copy the code generated by Twitter and paste it in the following code:


<div style="width:300px;height:600px;">

Paste your code here

</div>


4. Define the width you want the Twitter-Widget to display and specify the height (same as you entered on the Twitter page)

5. For this widget you can use either HTML Snippets or Alternative HTML. If you use HTML Snippets note that the Widget doesn't work in iWeb itself but works once published to the web.

6. People will now see your latest tweets on your website, they can reply and join the conversation



Chapter 9: Send to Twitter link or button (Allow people to share a page of your site on their Twitter with one click)


Share on Twitter



How this is done is described in my iWebFAQ.org E-Book (sample)



Chapter 10: How to stream your Blog entries to your FB Page’s Wall


If you have a website with a blog for the news on it and have a Facebook Page for the website it’s a good idea to stream the news blog to your Facebook Page so every new entry on the blog gets also automatically posted to your Facebook Page.


You can also stream it to both Facebook and Twitter at the same time.


How this is done is described in my iWebFAQ.org E-Book (sample)



Chapter 11: How to stream your Blog entries to your Twitter


If you have a website with a blog for the news on it and have a Twitter account for the website it’s a good idea to stream the news blog to your Twitter so every new entry on the blog gets also automatically posted to your Twitter.


You can also stream it to both Facebook and Twitter at the same time.


How this is done is described in my iWebFAQ.org E-Book (sample)



Chapter 12: How to stream your Facebook Page entries to your Twitter


If you have a Facebook Page where you publish the news of the website and a Twitter account you can stream the entries from the Facebook Page to the Twitter account. So every new entry on the Facebook Page gets also automatically posted to your Twitter account.


How this is done is described in my iWebFAQ.org E-Book (sample)




iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark