Recently I thought about building a social networking module that allowed you to upload an icon, paste in your link and voilà - instant social network links in a block.

Turns out there already exists a few modules in this space and to be frank I don't think we really need yet another Drupal social networking module. However none of the modules really suited my requirments so I turned to Drupal core fields and Views to see if I could build this with no code and just a bit of configuration.

OK, so the requirements for this are pretty simple:

1. Drupal core Image field
2. http://drupal.org/project/link
3. http://drupal.org/project/views
4. An icon set, there are some attached as an archive

Note - if you follow the setup of the content type exactly as described you will be able to import the view I have attached.

1. Set up a new content type

Create a new content type called "Social Network". Each node will hold one link and one icon, therefor we need to add two fields:

Link Field

This is where the Link module comes in. Add a field with the machine name "field_social_network_link" and configure it to NOT allow titles and to allow only one value.

Image Field

Add am image field with the machine name "field_social_network_icon". Ideally you should enable the alt field so you can enter some alt text for accessibility.

For both fields the Display settings don't really matter - if you want to fiddle about with them hiding labels and such you can, however in reality we will never link to these nodes. Instead we are going to create a View and display the results in a block.

Now go ahead and create some Social Network nodes, you'll need a set of icons and of course links to your social network services. There is a default set attached, it contains both large and small icons for most popular services.

2. Create a View

Go to Views and create a new view, call it whatever you like, maybe "Social Networking Links". I'll bullet point the first part of the setup and then we'll look at the trick to make this work.

If you followed the content type setup to the letter you can import the Views export I have attached below. Otherwise you can work through these guidelines:

• Create a block view of fields.
• Allow unlimited items, do no use a pager.
• Add the Content Type filter and restrict to the content type we created earlier.
• Add two fields - the link and image fields you created earlier.

Now configure the fields. If Views added the Title field you can delete this, we don't need it. Make sure the Link field is first, this is so its values are available to the image field for rewriting the output.

1. Link field we want to set to "Exclude from display".
2. The image field we need to Rewrite results > Output this field as a link, then enter the token for the link, if all has gone well this will be [field_social_network_link]. You can set the target to be "_blank" if you want to open the pages in a new browser tab. Finally under the Style settings > Customize field HTML I set this to None - since we don't really need any extra markup.

In the attached Views export I have used an HTML List format (unordered list) and for the Field settings I un-checked "Provide default field wrapper elements" -bascially I don't need any default wrappers.

Now you can save the View, go to the block configuration and enable the block. By default the list will be vertical, maybe this is OK for you, really I want them horizontal so I added some CSS.

3. Style with CSS

I want my icons lined up horizontally, which is pretty darn easy to do with CSS. You can add this to your themes CSS.

/* Social networking block */<br>.view-social-network ul {<br>&nbsp; padding: 0;<br>&nbsp; margin: 0;<br>}<br>.view-social-network ul li {<br>&nbsp; list-style: none;<br>&nbsp; display: inline;<br>}

So there you go, very easy to setup and using modules that most sites have installed already.

AttachmentSize social-networking-block-views-export.txt8.55 KB social-network-icons.zip105.51 KB